feat: course list

frontend/src/components/AppSidebar.vue

@@ -0,0 +1,55 @@
+<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>
+</template>
+
+<script setup>
+import UserDropdown from '@/components/UserDropdown.vue'
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { useStorage } from '@vueuse/core'
+import { BookOpen, Users, TrendingUp, Search, Bell, Briefcase, Settings } from 'lucide-vue-next'
+
+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',
+    },
+]
+
+const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
+</script>