fix: cleanup ui

frontend/src/components/UserDropdown.vue

@@ -1,33 +1,45 @@
 <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">
-                        {{ convertToTitleCase(user.split('@')[0]) }}
-                    </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>
+	<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">
+						Learning
+					</div>
+					<div v-if="user" class="mt-1 text-sm text-gray-700 leading-none">
+						{{ convertToTitleCase(user.split('@')[0]) }}
+					</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>
@@ -37,47 +49,51 @@ import { Dropdown } from 'frappe-ui'
 import { ChevronDown } from 'lucide-vue-next'
 
 const props = defineProps({
-    isCollapsed: {
-        type: Boolean,
-        default: false,
-    },
+	isCollapsed: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const { logout, user } = sessionStore()
-let { isLoggedIn } = sessionStore();
+let { isLoggedIn } = sessionStore()
 
 const userDropdownOptions = [
-    {
-        icon: 'log-out',
-        label: 'Log out',
-        onClick: () => {
-            logout.submit().then(() => {
-                isLoggedIn = false;
-            });
-        },
-        condition: () => {
-            return isLoggedIn
-        }
-    },
-    {
-        icon: 'log-in',
-        label: 'Log in',
-        onClick: () => {
-            window.location.href = '/login'
-        },
-        condition: () => {
-            return !isLoggedIn
-        }
-    }
-];
+	{
+		icon: 'log-out',
+		label: 'Log out',
+		onClick: () => {
+			logout.submit().then(() => {
+				isLoggedIn = false
+			})
+		},
+		condition: () => {
+			return isLoggedIn
+		},
+	},
+	{
+		icon: 'log-in',
+		label: 'Log in',
+		onClick: () => {
+			window.location.href = '/login'
+		},
+		condition: () => {
+			return !isLoggedIn
+		},
+	},
+]
 
 function convertToTitleCase(str) {
-    if (!str) {
-        return ""
-    }
+	if (!str) {
+		return ''
+	}
 
-    return str.toLowerCase().split(' ').map(function (word) {
-        return word.charAt(0).toUpperCase().concat(word.substr(1));
-    }).join(' ');
+	return str
+		.toLowerCase()
+		.split(' ')
+		.map(function (word) {
+			return word.charAt(0).toUpperCase().concat(word.substr(1))
+		})
+		.join(' ')
 }
 </script>