add profile menu (#95)

Fixes #85

Author: doroudi

locales/en.yml

@@ -41,6 +41,7 @@ userMenu:
   language: Language
   theme: Theme
   options: Options
+  profile: Profile
   logout: Logout
   dark: Dark
   light: Light

locales/fa.yml

@@ -144,5 +144,6 @@ userMenu:
   light: روشن
   logout: خروج
   options: تنظیمات
+  profile: پروفایل
   signOut: خروج
   theme: پوسته

src/components.d.ts

@@ -27,14 +27,10 @@ declare module 'vue' {
     Navbar: typeof import('./components/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
-    NDrawer: typeof import('naive-ui')['NDrawer']
-    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
-    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
+    NDropdown: typeof import('naive-ui')['NDropdown']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
@@ -44,16 +40,10 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
-    NSelect: typeof import('naive-ui')['NSelect']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     ReviewManagement: typeof import('./components/Review/ReviewManagement.vue')['default']

src/components/Navbar.vue

@@ -1,26 +1,12 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import {
-  PanelLeftContract16Regular as CollapseIcon,
-  PanelLeftExpand20Regular as OpenIcon,
-} from '@vicons/fluent'
 
 const layoutStore = useLayoutStore()
-const { collapsed, forceCollapsed, isRtl } = storeToRefs(layoutStore)
+const { isRtl } = storeToRefs(layoutStore)
 </script>
 
 <template>
   <n-page-header class="p-2 navbar">
-    <template #title>
-      <n-button mx-2 text size="small" circle @click="layoutStore.toggleSidebar">
-        <template #icon>
-          <n-icon size="1.4rem" :class="{ 'rotate-180': isRtl }">
-            <OpenIcon v-if="collapsed || forceCollapsed" />
-            <CollapseIcon v-else />
-          </n-icon>
-        </template>
-      </n-button>
-    </template>
     <template #extra>
       <div class="flex items-center">
         <n-tooltip placement="bottom" trigger="hover">

src/components/Sidebar.vue

@@ -5,12 +5,14 @@ import {
   PersonSettings20Regular as AccountSettingsIcon,
   CheckmarkStarburst16Regular as BrandsIcon,
   Folder32Regular as CategoryIcon,
+  RadioButton20Filled as CollapseIcon,
   Color24Regular as ColorsIcon,
   CommentMultiple32Regular as CommentsIcon,
   People28Regular as CustomersIcon,
   Home32Regular as DashboardIcon,
   Emoji24Regular as FeedbackIcon,
   Cart24Regular as InvoicesIcon,
+  RadioButton20Regular as OpenIcon,
   DocumentLink20Regular as PagesIcon,
   Apps28Filled as ProductsIcon,
   BoxMultiple20Regular as ProductsIcon2,
@@ -26,6 +28,11 @@ import { NIcon } from 'naive-ui/es/icon'
 const layoutStore = useLayoutStore()
 const { collapsed, forceCollapsed } = storeToRefs(layoutStore)
 const { t } = useI18n()
+const isHovered = ref(false)
+
+const effectiveCollapsed = computed(() => {
+  return (collapsed.value || forceCollapsed.value) && !isHovered.value
+})
 
 function renderLabel(title: string, path: string) {
   return h(
@@ -147,7 +154,7 @@ const menuOptions: MenuOption[] = [
     icon: renderIcon(SettingsIcon),
     children: [
       {
-        label: () => renderLabel(t('menu.accountSettings'), '/account'),
+        label: () => renderLabel(t('menu.accountSettings'), '/account/profile'),
         key: 'account-settings',
         icon: renderIcon(AccountSettingsIcon),
       },
@@ -181,15 +188,24 @@ function renderIcon(icon: any, showBadge = false) {
 
 <template>
   <n-layout-sider
-    :native-scrollbar="false" collapse-mode="width" :collapsed-width="64"
-    :collapsed="collapsed || forceCollapsed" :class="{ collapsed: collapsed || forceCollapsed }"
+    :native-scrollbar="false" collapse-mode="width" :collapsed-width="64" :collapsed="effectiveCollapsed"
+    :class="{ collapsed: effectiveCollapsed }" @mouseenter="isHovered = true" @mouseleave="isHovered = false"
   >
     <div class="logo-container">
-      <div flex items-center>
+      <div flex w-full justify-between items-center>
         <img src="@/assets/images/logo.png" alt="logo" class="logo">
         <h1 class="main-title">
           {{ t('title') }}
         </h1>
+
+        <n-button mx-2 text size="small" circle @click="layoutStore.toggleSidebar">
+          <template #icon>
+            <NIcon size="1.2rem" color="#888">
+              <OpenIcon v-if="collapsed" />
+              <CollapseIcon v-else />
+            </NIcon>
+          </template>
+        </n-button>
       </div>
     </div>
     <n-menu
@@ -203,7 +219,7 @@ function renderIcon(icon: any, showBadge = false) {
 .logo-container {
   display: flex;
   align-items: center;
-  padding: 1.5rem 1.1rem 0.5rem 1.1rem;
+  padding: 1.5rem 0.8rem 0.5rem 1.1rem;
   transition: all 100ms;
   line-height: 1;
 

src/components/UserProfile.vue

@@ -1,29 +1,42 @@
 <script setup lang="ts">
 import type { SelectMixedOption } from 'naive-ui/es/select/src/interface'
+import {
+  DoorArrowRight20Regular as LogoutIcon,
+  Settings20Regular as SettingsIcon,
+} from '@vicons/fluent'
+import { NIcon } from 'naive-ui'
+import { RouterLink } from 'vue-router'
 
 const { t } = useI18n()
-const selectedItem = ref('')
-const router = useRouter()
+
 const items: SelectMixedOption[]
   = [
-    { label: t('userMenu.options'), value: '/options' },
     {
-      label: t('userMenu.logout'),
-      value: '/account/login',
-
+      icon: renderIcon(SettingsIcon),
+      label: renderLabel(t('userMenu.profile'), '/account/profile'),
+      key: 'options',
+    },
+    {
+      icon: renderIcon(LogoutIcon),
+      label: renderLabel(t('userMenu.logout'), '/account/login'),
+      key: 'login',
     },
   ]
 
-function doMenuAction(value: string) {
-  router.push(value)
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon, {}) })
+}
+
+function renderLabel(title: string, path: string) {
+  return () => h(RouterLink, { to: { path } }, { default: () => title })
 }
 </script>
 
 <template>
   <div class="flex items-center">
-    <n-popselect v-model="selectedItem" :options="items" @update:value="doMenuAction">
+    <n-dropdown :options="items">
       <img class="avatar" src="@/assets/images/user.png">
-    </n-popselect>
+    </n-dropdown>
   </div>
 </template>
 

src/pages/Account/profile.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Profile Page
+  </div>
+</template>