Merge pull request #60 from doroudi:doroudi/issue59

Change Theme in Login Page

src/components.d.ts

@@ -58,6 +58,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./components/Sidebar.vue')['default']
+    ThemeSwitch: typeof import('./components/ThemeSwitch.vue')['default']
     UserProfile: typeof import('./components/UserProfile.vue')['default']
   }
 }

src/components/Navbar.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import {
-  PanelLeftContract16Regular as CollapseIcon,
-  WeatherMoon48Regular as MoonIcon,
-  PanelLeftExpand20Regular as OpenIcon,
-  WeatherSunny48Regular as SunIcon,
-} from '@vicons/fluent'
 
 const layoutStore = useLayoutStore()
 const { collapsed } = storeToRefs(layoutStore)
@@ -14,25 +8,10 @@ const { collapsed } = storeToRefs(layoutStore)
 <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">
-            <OpenIcon v-if="collapsed" />
-            <CollapseIcon v-else />
-          </n-icon>
-        </template>
-      </n-button>
+      <ThemeSwitch />
     </template>
     <template #extra>
       <div class="flex items-center">
-        <n-button text circle @click="layoutStore.toggleTheme()">
-          <template #icon>
-            <NIcon size="1.4rem">
-              <SunIcon v-if="isDark" />
-              <MoonIcon v-else />
-            </NIcon>
-          </template>
-        </n-button>
         <div class="mx-2">
           <LanguageSelect />
         </div>

src/components/ThemeSwitch.vue

@@ -0,0 +1,21 @@
+<script setup lang='ts'>
+import {
+  WeatherMoon48Regular as MoonIcon,
+  WeatherSunny48Regular as SunIcon,
+} from '@vicons/fluent'
+
+const layoutStore = useLayoutStore()
+</script>
+
+<template>
+  <n-button text circle @click="layoutStore.toggleTheme()">
+    <template #icon>
+      <NIcon size="1.4rem">
+        <SunIcon v-if="isDark" />
+        <MoonIcon v-else />
+      </NIcon>
+    </template>
+  </n-button>
+</template>
+
+<style scoped lang='scss'></style>

src/pages/Account/login.vue

@@ -99,8 +99,9 @@ meta:
           </div>
         </div>
       </div>
-      <div class="mt-3">
+      <div class="mt-3 flex justify-between items-center">
         <LanguageSelect />
+        <ThemeSwitch class="mr-2" />
       </div>
     </div>
   </div>