base structure

src/components/admin/RoutingLink.vue

@@ -1,35 +1,36 @@
 <template>
-  <RouterLink v-if="link" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
+  <RouterLink v-if="link" :to="link">
     <p
       class="cursor-pointer w-full px-2 py-3"
-      :class="
+      :class="active ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'"
-        activeLink == link.key
-          ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
-          : 'pl-3 hover:bg-red-200 rounded-lg'
-      "
     >
-      {{ link.title }}
+      {{ title }}
     </p>
   </RouterLink>
 </template>
 
 <script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { RouterLink } from "vue-router";
 import { mapState, mapActions } from "pinia";
 import { useNavigationStore, type navigationLinkModel } from "@/stores/admin/navigation";
 </script>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { RouterLink } from "vue-router";
 export default defineComponent({
   props: {
+    title: {
+      type: String,
+      default: "LINK",
+    },
     link: {
-      type: Object as PropType<navigationLinkModel>,
+      type: [String, Object as PropType<{ name: string }>],
-      default: null,
+      default: "/",
     },
+    active: {
+      type: Boolean,
+      default: false,
     },
-  computed: {
-    ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
   },
 });
 </script>

src/main.css

@@ -56,7 +56,8 @@ body {
   @apply w-full h-full overflow-hidden flex flex-col;
 }
 
-button:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]):not([class*="ql"] *):not([class*="fc"]),
+/* :not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]) */
+button:not([class*="ql"] *):not([class*="fc"]),
 a[button] {
   @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
 }

src/router/index.ts

@@ -450,6 +450,26 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/account",
+      name: "account",
+      component: () => import("@/views/account/View.vue"),
+      beforeEnter: [isAuthenticated],
+      children: [
+        {
+          path: "",
+          name: "account-default",
+          component: () => import("@/views/admin/ViewSelect.vue"),
+          meta: { type: "read", section: "club" },
+          beforeEnter: [abilityAndNavUpdate],
+        },
+        {
+          path: ":pathMatch(.*)*",
+          name: "account-404",
+          component: () => import("@/views/notFound.vue"),
+        },
+      ],
+    },
     {
       path: "/nopermissions",
       name: "nopermissions",

src/stores/admin/navigation.ts

@@ -88,7 +88,7 @@ export const useNavigationStore = defineStore("navigation", {
           main: [
             ...(abilityStore.can("read", "club", "member") ? [{ key: "member", title: "Mitglieder" }] : []),
             ...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Kalender" }] : []),
-            ...(abilityStore.can("read", "club", "protocoll") ? [{ key: "protocol", title: "Protokolle" }] : []),
+            ...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
             ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
           ],
         },

src/views/account/View.vue

@@ -0,0 +1,37 @@
+<template>
+  <SidebarLayout>
+    <template #sidebar>
+      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="true">
+        <template #topList>
+          <RoutingLink title="Administration" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+        </template>
+        <template #list>
+          <RoutingLink title="Mein Account" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+          <RoutingLink title="Anmeldedaten" :link="{ name: 'account' }" :active="activeRouteName == 'account'" />
+        </template>
+      </SidebarTemplate>
+    </template>
+    <template #main>
+      <RouterView />
+    </template>
+  </SidebarLayout>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import SidebarLayout from "@/layouts/Sidebar.vue";
+import SidebarTemplate from "@/templates/Sidebar.vue";
+import RoutingLink from "@/components/admin/RoutingLink.vue";
+import { RouterView } from "vue-router";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    activeRouteName() {
+      return this.$route.name;
+    },
+  },
+});
+</script>

src/views/account/ViewSelect.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-full bg-white rounded-md flex items-center justify-center">bitte auswählen</div>
+</template>

src/views/admin/View.vue

@@ -7,10 +7,22 @@
         :showTopList="activeNavigationObject.top != null"
       >
         <template #topList>
-          <RoutingLink v-for="item in activeNavigationObject.top" :key="item.key" :link="item" />
+          <RoutingLink
+            v-for="item in activeNavigationObject.top"
+            :key="item.key"
+            :title="item.title"
+            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
+            :active="activeLink == item.key"
+          />
         </template>
         <template #list>
-          <RoutingLink v-for="item in activeNavigationObject.main" :key="item.key" :link="item" />
+          <RoutingLink
+            v-for="item in activeNavigationObject.main"
+            :key="item.key"
+            :title="item.title"
+            :link="{ name: `admin-${activeNavigation}-${item.key}` }"
+            :active="activeLink == item.key"
+          />
         </template>
       </SidebarTemplate>
     </template>
@@ -33,14 +45,13 @@ import { RouterView } from "vue-router";
 
 <script lang="ts">
 export default defineComponent({
-  props: {
-    contestId: {
-      type: String,
-      default: "",
-    },
-  },
   computed: {
-    ...mapState(useNavigationStore, ["activeNavigationObject", "activeTopLevelObject", "activeLink"]),
+    ...mapState(useNavigationStore, [
+      "activeNavigationObject",
+      "activeTopLevelObject",
+      "activeLink",
+      "activeNavigation",
+    ]),
   },
   created() {
     useAbilityStore().$subscribe(() => {