Show sidebar on landing & Logout button

Author: kadiryazici

src/App.vue

@@ -11,7 +11,7 @@ const store = useStore()
 </script>
 
 <template>
-  <AppSidebar v-if="store.currentPage !== Page.Landing" />
+  <AppSidebar />
 
   <AppContent>
     <HomePage v-if="store.currentPage === Page.Home" />

src/components/AppSidebar.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { exit } from '@tauri-apps/api/process'
 import { Page } from '../constants'
 import { useStore } from '../stores/store'
 import { Icons } from './Icons'
@@ -9,18 +10,30 @@ const store = useStore()
 
 <template>
   <nav class="nav">
-    <div class="upper">
+    <div
+      v-if="store.currentPage !== Page.Landing"
+      class="upper"
+    >
       <SidebarButton @click="store.setPage(Page.Home)">
-        <Icons.Bell />
+        <Icons.Bell16 />
       </SidebarButton>
     </div>
     <div class="lower">
-      <SidebarButton @click="store.fetchNotifications(true)">
-        <Icons.Sync />
-      </SidebarButton>
+      <template v-if="store.currentPage !== Page.Landing">
+        <SidebarButton @click="store.fetchNotifications(true)">
+          <Icons.Sync16 />
+        </SidebarButton>
+
+        <SidebarButton @click="store.setPage(Page.Settings)">
+          <Icons.Gear16 />
+        </SidebarButton>
+      </template>
 
-      <SidebarButton @click="store.setPage(Page.Settings)">
-        <Icons.Gear />
+      <SidebarButton
+        v-else
+        @click="exit(0)"
+      >
+        <Icons.SignOut16 />
       </SidebarButton>
     </div>
   </nav>

src/components/Icons.ts

@@ -2,8 +2,10 @@ import { markRaw } from 'vue'
 
 import MoreIcon from 'virtual:icons/octicon/kebab-horizontal-24'
 import GearIcon from 'virtual:icons/octicon/gear-24'
+import GearIcon16 from 'virtual:icons/octicon/gear-16'
 import HomeIcon from 'virtual:icons/octicon/home-24'
 import SyncIcon from 'virtual:icons/octicon/sync-24'
+import SyncIcon16 from 'virtual:icons/octicon/sync-16'
 import MuteIcon from 'virtual:icons/octicon/mute-24'
 import GithubIcon from 'virtual:icons/octicon/mark-github-16'
 import UnmuteIcon from 'virtual:icons/octicon/unmute-24'
@@ -12,13 +14,15 @@ import CheckIcon from 'virtual:icons/octicon/check-24'
 import CheckFillIcon from 'virtual:icons/octicon/check-circle-fill-12'
 import XIcon from 'virtual:icons/octicon/x-24'
 import BellIcon from 'virtual:icons/octicon/bell-24'
+import BellIcon16 from 'virtual:icons/octicon/bell-16'
 import CommitIcon from 'virtual:icons/octicon/git-commit-24'
 import CommentDiscussionsIcon from 'virtual:icons/octicon/comment-discussion-24'
 import IssueOpenedIcon from 'virtual:icons/octicon/issue-opened-24'
 import TagIcon from 'virtual:icons/octicon/tag-24'
 import AlertIcon from 'virtual:icons/octicon/alert-24'
 import QuestionIcon from 'virtual:icons/octicon/question-24'
 import MailIcon from 'virtual:icons/octicon/mail-24'
+import SignOutIcon16 from 'virtual:icons/octicon/sign-out-16'
 
 export const Icons = {
   More: markRaw(MoreIcon),
@@ -40,4 +44,8 @@ export const Icons = {
   Alert: markRaw(AlertIcon),
   Question: markRaw(QuestionIcon),
   Mail: markRaw(MailIcon),
+  SignOut16: markRaw(SignOutIcon16),
+  Bell16: markRaw(BellIcon16),
+  Gear16: markRaw(GearIcon16),
+  Sync16: markRaw(SyncIcon16),
 }