:refactor: do some ui refactoring

Author: doroudi

src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     ArabicIcon: typeof import('./components/CountryIcons/ArabicIcon.vue')['default']
     BarChart: typeof import('./components/BarChart.vue')['default']
     BrandManagement: typeof import('./components/Brand/BrandManagement.vue')['default']
+    BreadCrumb: typeof import('./components/Navbar/BreadCrumb.vue')['default']
     Card: typeof import('./components/Card.vue')['default']
     CategoryManagement: typeof import('./components/Category/CategoryManagement.vue')['default']
     CategoryStatics: typeof import('./components/Category/CategoryStatics.vue')['default']
@@ -41,28 +42,19 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
-    NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     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']
     Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
-    NRadioButton: typeof import('naive-ui')['NRadioButton']
-    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     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']
     PersianIcon: typeof import('./components/CountryIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']

src/components/Navbar/BreadCrumb.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+const route = useRoute()
+const { t } = useI18n()
+</script>
+
+<template>
+  <n-breadcrumb class="hidden md:block">
+    <n-breadcrumb-item>
+      <RouterLink to="/">
+        {{ t('home') }}
+      </RouterLink>
+    </n-breadcrumb-item>
+    <n-breadcrumb-item v-for="item in route.meta.breadcrumb" :key="item">
+      {{ t(`menu.${item}`) }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>

src/components/Navbar/Navbar.vue

@@ -1,23 +1,29 @@
-<script setup lang="ts">
-import { Home28Regular as HomeIcon } from '@vicons/fluent'
+<script lang="ts" setup>
+import {
+  PanelLeftContract24Regular as CollapseIcon,
+  PanelLeftExpand20Regular as ExpandIcon,
+} from '@vicons/fluent'
 
-const route = useRoute()
-const { t } = useI18n()
+import { storeToRefs } from 'pinia'
+
+const layoutStore = useLayoutStore()
+const { collapsed } = storeToRefs(layoutStore)
 </script>
 
 <template>
   <n-page-header class="px-2 py-3 navbar">
     <template #title>
-      <n-breadcrumb>
-        <n-breadcrumb-item>
-          <RouterLink to="/">
-            <n-icon :component="HomeIcon" /> {{ t('home') }}
-          </RouterLink>
-        </n-breadcrumb-item>
-        <n-breadcrumb-item v-for="item in route.meta.breadcrumb" :key="item">
-          {{ t(`menu.${item}`) }}
-        </n-breadcrumb-item>
-      </n-breadcrumb>
+      <div class="flex items-center">
+        <n-button mx-2 size="small" quaternary circle @click="layoutStore.toggleSidebar">
+          <template #icon>
+            <NIcon size="1.2rem">
+              <ExpandIcon v-if="collapsed" />
+              <CollapseIcon v-else />
+            </NIcon>
+          </template>
+        </n-button>
+        <BreadCrumb />
+      </div>
     </template>
     <template #extra>
       <div class="flex items-center">

src/components/Sidebar.vue

@@ -5,15 +5,13 @@ import {
   PersonSettings20Regular as AccountSettingsIcon,
   CheckmarkStarburst16Regular as BrandsIcon,
   Folder32Regular as CategoryIcon,
-  Pin20Regular as CollapsedIcon,
   Color24Regular as ColorsIcon,
   CommentMultiple32Regular as CommentsIcon,
   People28Regular as CustomersIcon,
   Home32Regular as DashboardIcon,
   Emoji24Regular as FeedbackIcon,
   Cart24Regular as InvoicesIcon,
   DocumentLink20Regular as PagesIcon,
-  Pin20Filled as PinnedIcon,
   Apps28Filled as ProductsIcon,
   BoxMultiple20Regular as ProductsIcon2,
   StarThreeQuarter20Filled as ReviewIcon,
@@ -112,29 +110,6 @@ const menuOptions: MenuOption[] = [
       },
     ],
   },
-
-  // {
-  //   label: () => t('menu.announcement'),
-  //   key: 'notify',
-  //   icon: renderIcon(NewsIcon),
-  //   children: [
-  //     {
-  //       label: () => renderLabel(t('menu.news'), '/news'),
-  //       key: 'news',
-  //       icon: renderIcon(NewsIcon),
-  //     },
-  //     {
-  //       label: () => renderLabel(t('menu.notifications'), '/notify'),
-  //       key: 'notifications',
-  //       icon: renderIcon(NotifyIcon),
-  //     },
-  //     {
-  //       label: () => renderLabel(t('menu.sms'), 'sms'),
-  //       key: 'sms',
-  //       icon: renderIcon(SmsIcon),
-  //     },
-  //   ],
-  // },
   {
     label: () => t('menu.pages'),
     key: 'pages',
@@ -192,20 +167,11 @@ function renderIcon(icon: any, showBadge = false) {
     :class="{ collapsed: effectiveCollapsed }" @mouseenter="isHovered = true" @mouseleave="isHovered = false"
   >
     <div class="logo-container">
-      <div flex w-full justify-between items-center>
+      <div flex w-full justify-start 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">
-              <CollapsedIcon v-if="collapsed" />
-              <PinnedIcon v-else />
-            </NIcon>
-          </template>
-        </n-button>
       </div>
     </div>
     <n-menu

src/layouts/home.vue

@@ -18,31 +18,3 @@ const collapsed = ref(false)
     </n-layout-content>
   </n-layout>
 </template>
-
-<style lang="scss">
-// .n-layout-content {
-//   height: 100vh !important;
-// }
-// .main {
-//   // padding-left: var(--sidebar-width);
-//   padding-right: 1rem;
-//   transition: all 0.3s ease-in;
-
-//   &.sidebar-collapsed {
-//     padding-left: 5rem;
-//     padding-right: 1rem;
-//   }
-// }
-
-// .rtl {
-//   .main {
-//     padding-right: var(--sidebar-width);
-//     padding-left: 1rem;
-
-//     &.sidebar-collapsed {
-//       padding-right: 5rem;
-//       padding-left: 1rem;
-//     }
-//   }
-// }
-</style>