feat: course list

frontend/src/components/UserDropdown.vue

@@ -0,0 +1,74 @@
+<template>
+    <Dropdown :options="userDropdownOptions">
+        <template v-slot="{ open }">
+            <button class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out" :class="isCollapsed
+                    ? 'px-0 w-auto'
+                    : open
+                        ? 'bg-white shadow-sm px-2 w-52'
+                        : 'hover:bg-gray-200 px-2 w-52'
+                ">
+                <LMSLogo class="w-8 h-8 rounded flex-shrink-0" />
+                <div class="flex flex-1 flex-col text-left duration-300 ease-in-out" :class="isCollapsed
+                        ? 'opacity-0 ml-0 w-0 overflow-hidden'
+                        : 'opacity-100 ml-2 w-auto'
+                    ">
+                    <div class="text-base font-medium text-gray-900 leading-none">
+                        LMS
+                    </div>
+                    <div v-if="user" class="mt-1 text-sm text-gray-700 leading-none">
+                        {{ user.full_name }}
+                    </div>
+                </div>
+                <div class="duration-300 ease-in-out" :class="isCollapsed
+                        ? 'opacity-0 ml-0 w-0 overflow-hidden'
+                        : 'opacity-100 ml-2 w-auto'
+                    ">
+                    <ChevronDown class="h-4 w-4 text-gray-700" />
+                </div>
+            </button>
+        </template>
+    </Dropdown>
+</template>
+
+<script setup>
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import { sessionStore } from '@/stores/session'
+import { usersStore } from '@/stores/user'
+import { Dropdown } from 'frappe-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+const props = defineProps({
+    isCollapsed: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const { logout, isLoggedIn } = sessionStore()
+const { getUser } = usersStore()
+
+const user = computed(() => isLoggedIn && getUser())
+const userDropdownOptions = [
+    {
+        icon: 'log-out',
+        label: 'Log out',
+        onClick: () => {
+            logout.submit()
+        },
+        condition: () => {
+            return isLoggedIn
+        }
+    },
+    {
+        icon: 'log-in',
+        label: 'Log in',
+        onClick: () => {
+            window.location.href = '/login'
+        },
+        condition: () => {
+            return !isLoggedIn
+        }
+    }
+]
+</script>