feat(notifications): added notification system w/ interwoven refactoring

components/Docs/Sidebar.vue

@@ -0,0 +1,50 @@
+<template>
+    <div
+        v-if="user"
+        class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-900 px-6 pb-4 ring-1 ring-white/10"
+    >
+        <div class="flex h-16 shrink-0 items-center">
+            <Wordmark />
+        </div>
+
+        <nav class="flex flex-1 flex-col">
+            <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                <li>
+                    <ul role="list" class="-mx-2 space-y-1">
+                        <DocsSidebarNavItem
+                            v-for="item in unwrappedNavigation ?? navigation"
+                            :key="item.name"
+                            :nav="item"
+                        />
+                    </ul>
+                </li>
+                <li class="mt-auto flex items-center">
+                    <div class="inline-flex items-center w-full text-zinc-300">
+                        <img
+                            :src="useObject(user.profilePicture)"
+                            class="w-5 h-5 rounded-sm"
+                        />
+                        <span class="ml-3 text-sm font-bold">{{
+                            user.displayName
+                        }}</span>
+                    </div>
+                    <NuxtLink
+                        href="/"
+                        class="ml-auto rounded bg-blue-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                    >
+                        &larr;&nbsp;Home
+                    </NuxtLink>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { fetchContentNavigation, useObject, useUser } from "#imports";
+
+const user = useUser();
+
+const navigation = await fetchContentNavigation();
+const unwrappedNavigation = navigation[0]?.children;
+</script>

components/Docs/SidebarNavItem.vue

@@ -0,0 +1,30 @@
+<template>
+    <NuxtLink
+        :href="props.nav._path"
+        :class="[
+            current
+                ? 'text-zinc-100'
+                : 'text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900',
+            ' group flex gap-x-3 rounded-md px-2 text-sm font-semibold leading-6',
+        ]"
+    >
+        {{ props.nav.title }}
+    </NuxtLink>
+    <ul class="pl-3 flex flex-col" v-if="children">
+        <li v-for="child in children" class="inline-flex items-center">
+            <ChevronDownIcon class="w-4 h-4 text-zinc-600 rotate-45" />
+            <DocsSidebarNavItem :nav="child" :key="child._path" />
+        </li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+
+type NavItem = { title: string; _path: string; children?: NavItem[] };
+const props = defineProps<{ nav: NavItem }>();
+const children = props.nav.children?.filter((e) => e._path != props.nav._path);
+
+const route = useRoute();
+const current = computed(() => route.path.trim() == props.nav._path.trim());
+</script>