From eab922569a07bb813b64f276f0f97dd4e676b40f Mon Sep 17 00:00:00 2001
From: Saeid Doroudi <doroudi@outlook.com>
Date: Sat, 23 Mar 2024 11:58:46 +0330
Subject: [PATCH] Change Theme in Login Page Fixes #59

---
 src/components.d.ts            |  1 +
 src/components/Navbar.vue      | 23 +----------------------
 src/components/ThemeSwitch.vue | 21 +++++++++++++++++++++
 src/pages/Account/login.vue    |  3 ++-
 4 files changed, 25 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ThemeSwitch.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index e96fab8..b768d4a 100644
--- a/src/components.d.ts
+++ b/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']
   }
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 28e1b53..b1d3f65 100644
--- a/src/components/Navbar.vue
+++ b/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>
diff --git a/src/components/ThemeSwitch.vue b/src/components/ThemeSwitch.vue
new file mode 100644
index 0000000..df27542
--- /dev/null
+++ b/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>
diff --git a/src/pages/Account/login.vue b/src/pages/Account/login.vue
index 10c2e8c..69801d0 100644
--- a/src/pages/Account/login.vue
+++ b/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>