main layout

src/components/admin/TopLevelLink.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="link"
+    class="cursor-pointer w-full flex flex-col md:flex-row items-center md:gap-2 justify-center p-1 md:rounded-full md:px-3 font-medium text-center text-base self-center"
+    :class="
+      activeNavigation == link.key
+        ? 'text-primary md:bg-primary md:text-white'
+        : 'text-gray-700 hover:text-accent md:hover:bg-accent md:hover:text-white'
+    "
+    @click="setTopLevel(link.key, disableSubLink)"
+  >
+    {{ link.title }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { mapState, mapActions } from "pinia";
+import { useNavigationStore, type topLevelNavigationModel } from "@/stores/admin/navigation";
+</script>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+export default defineComponent({
+  props: {
+    link: {
+      type: Object as PropType<topLevelNavigationModel>,
+      default: null,
+    },
+    disableSubLink: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(useNavigationStore, ["activeNavigation"]),
+  },
+  methods: {
+    ...mapActions(useNavigationStore, ["setTopLevel"]),
+  },
+});
+</script>