feat(navbar): highlight selected category

src/lib/components/NavSidebar.svelte

@@ -2,6 +2,7 @@
   import Profile from "$lib/components/sidebar/Profile.svelte"
   import SideButton from "$lib/components/sidebar/SideButton.svelte"
   import Icon from "@iconify/svelte"
+  import { PageType } from "$lib/stores/StateStore"
 </script>
 
 <div class="side-container dark:bg-dark bg-lightdark">
@@ -21,9 +22,18 @@
       </button>
     </div>
     <ul class="side-buttons">
+      <!-- Buttons Here -->
       <SideButton
         iconSrc="/chat.svg"
+        href="/chat"
         name="Chat with AI"
+        category={PageType.Chat}
+      />
+      <SideButton
+        iconSrc="/document.svg"
+        name="Docs Organizer"
+        category={PageType.Docs}
+        href="/docs"
       />
     </ul>
   </div>

src/lib/components/chat/ChatPage.svelte

@@ -0,0 +1 @@
+<h1>1231233313123</h1>

src/lib/components/sidebar/SideButton.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
+  import type { PageType } from "$lib/stores/StateStore"
+  import { stateStore } from "$lib/stores/StateStore"
 
   export let iconSrc: string
   export let name = "None"
+  export let category: PageType | undefined
+  export let href: string
+
+
+  const applyCategory = () => {
+    if (category) $stateStore.pageType = category
+  }
 </script>
+
 <li class="side-btn">
-  <a class="side-btn-wrap side-btn" href="/test">
+  <a class="side-btn-wrap side-btn"
+     on:click={applyCategory}
+     class:selected={$stateStore.pageType === category}
+     href={href}
+  >
     <div class="side-btn-content">
       <img alt="icon"
            class="vertical-center"
            src={iconSrc}
-           width="24px"
+           width="28px"
       />
-      <h5 class="text-2xl text-right">{name}</h5>
+      <h5 class="text-2xl">{name}</h5>
     </div>
   </a>
 </li>
@@ -43,9 +57,14 @@
     background-color: #474749;
   }
 
+  .selected {
+    background-color: #474749 !important;
+  }
+
   .side-btn .side-btn-wrap .side-btn-content {
     display: flex;
     align-items: center;
+    justify-content: center;
   }
 
   .side-btn .side-btn-wrap .side-btn-content h5 {

src/lib/stores/StateStore.ts

@@ -5,20 +5,26 @@ export enum Appearance {
     Dark
 }
 
+/**
+ * @desc First value is must be two over.
+ * If not, it will be confusing to use comparison operators.
+ * @example $stateStore.pageType === PageType.Chat
+ *          If chat is 0, it will be true even if it is not chat.
+ */
 export enum PageType {
-    Chat,
-    Document,
+    Chat = 2,
+    Docs,
 }
 
 export interface StateStore {
     showSettings: boolean
     appearance: Appearance
-    chatType: PageType
+    pageType: PageType
 }
 
 
 export const stateStore = writable<StateStore>({
     showSettings: false,
     appearance: Appearance.Dark,
-    chatType: PageType.Chat
+    pageType: PageType.Chat
 })

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Sidebar from "$lib/components/NavSidebar.svelte"
-  import ChatInput from "$lib/components/share/Input.svelte"
+  import ChatInput from "$lib/components/share/ChatInput.svelte"
   import Settings from "$lib/components/sidebar/settings/Settings.svelte"
   import { DarkMode } from "$lib/utils/DarkMode"
   import { onMount } from "svelte"

src/routes/+page.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+  import { onMount } from "svelte"
+
+  onMount(() => {
+    // TODO if not settings about first page
+    location.href = "/chat"
+  })
 </script>
 
 <svelte:head>

src/routes/chat/+page.svelte

@@ -0,0 +1,3 @@
+<div>
+  Chat here
+</div>

src/routes/docs/+page.svelte

@@ -0,0 +1,3 @@
+<div>
+  Docs here
+</div>