feat: batch details

frontend/src/components/AppSidebar.vue

@@ -1,23 +1,37 @@
 <template>
-    <div class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-        :class="isSidebarCollapsed ? 'w-12' : 'w-56'">
-        <div class="flex flex-col overflow-hidden">
-            <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-            <div class="flex flex-col overflow-y-auto">
-                <SidebarLink v-for="link in links" :icon="link.icon" :label="link.label" :to="link.to"
-                    :isCollapsed="isSidebarCollapsed" class="mx-2 my-0.5" />
-            </div>
-        </div>
-        <SidebarLink :label="isSidebarCollapsed ? 'Expand' : 'Collapse'" :isCollapsed="isSidebarCollapsed"
-            @click="isSidebarCollapsed = !isSidebarCollapsed" class="m-2">
-            <template #icon>
-                <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-                    <CollapseSidebar class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-                        :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }" />
-                </span>
-            </template>
-        </SidebarLink>
-    </div>
+	<div
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
+		:class="isSidebarCollapsed ? 'w-12' : 'w-56'"
+	>
+		<div class="flex flex-col overflow-hidden">
+			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+			<div class="flex flex-col overflow-y-auto">
+				<SidebarLink
+					v-for="link in links"
+					:icon="link.icon"
+					:label="link.label"
+					:to="link.to"
+					:isCollapsed="isSidebarCollapsed"
+					class="mx-2 my-0.5"
+				/>
+			</div>
+		</div>
+		<SidebarLink
+			:label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
+			:isCollapsed="isSidebarCollapsed"
+			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			class="m-2"
+		>
+			<template #icon>
+				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+					<CollapseSidebar
+						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+					/>
+				</span>
+			</template>
+		</SidebarLink>
+	</div>
 </template>
 
 <script setup>
@@ -26,30 +40,33 @@ import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
 import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const links = [
-    {
-        label: 'Courses',
-        icon: BookOpen,
-        to: 'Courses',
-    },
-    {
-        label: "Batches",
-        icon: Users,
-        to: 'Batches',
-    },
-    {
-        label: "Statistics",
-        icon: TrendingUp,
-        to: 'Statistics',
-    },
-    {
-        label: "Jobs",
-        icon: Briefcase,
-        to: 'Jobs',
-    },
+	{
+		label: 'Courses',
+		icon: BookOpen,
+		to: 'Courses',
+	},
+	{
+		label: 'Batches',
+		icon: Users,
+		to: 'Batches',
+	},
+	{
+		label: 'Statistics',
+		icon: TrendingUp,
+		to: 'Statistics',
+	},
+	{
+		label: 'Jobs',
+		icon: Briefcase,
+		to: 'Jobs',
+	},
 ]
+const getSidebarFromStorage = () => {
+	return useStorage('sidebar_is_collapsed', false)
+}
 
-let isSidebarCollapsed = ref(useStorage("sidebar_is_collapsed", false))
+let isSidebarCollapsed = ref(getSidebarFromStorage())
 </script>