From 986f7bd0eb947fcf3fcea40cce6da5956c23acaa Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Thu, 9 Dec 2021 13:56:06 +0100
Subject: [PATCH] feat: add style changer to navigation bar

---
 src/App.svelte            | 33 ++++++++++--------------
 src/lib/Navigation.svelte | 53 +++++++++++++++++++++++++--------------
 2 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 08bd29fa..9f397aea 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { Router, Link, Route } from "svelte-navigator";
-  import { Form, Input } from 'sveltestrap';
-  import Toggle from 'svelte-toggle';
-  import Navigation from "./lib/Navigation.svelte";
+  import Navigation from "./lib/Navigation.svelte"; 
+  
 
-  let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
-  let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css"
+  let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
+  let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
 
   let styleSrc = light;
-  let style = localStorage.getItem("pk-style"); 
-  
+
   onMount(() => {
+    if (localStorage.getItem("pk-style")) setStyle(localStorage.getItem("pk-style").toLowerCase());
+  });
+
+  function styleEventHandler(event) {
+    let style = event.detail;
     setStyle(style);
-  })
+  }
 
   function setStyle(style) {
+    
     switch (style) {
       case "light": styleSrc = light;
       localStorage.setItem("pk-style", "light");
@@ -27,11 +31,6 @@
       localStorage.setItem("pk-style", "light");
     };
   };
-
-  function styleSelect(e) {
-    style = e.target.value.toLowerCase();
-    setStyle(style);
-  };
 </script>
 
 <svelte:head>
@@ -39,16 +38,10 @@
 </svelte:head>
 
 <Router>
-  <Navigation/>
+  <Navigation on:styleChange={styleEventHandler}/>
   <div>
     <Route path="/">
         <h2>Ooga booga</h2>
-        <Form>
-          <Input type="select" name="themes" id="themes" on:change={(e) => styleSelect(e)}>
-            <option>Light</option>
-            <option>Dark</option>
-          </Input>
-        </Form>
     </Route>
   </div>
 </Router>
\ No newline at end of file
diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte
index b31abe50..a9302958 100644
--- a/src/lib/Navigation.svelte
+++ b/src/lib/Navigation.svelte
@@ -1,27 +1,42 @@
 <script lang="ts">
-    import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler} from 'sveltestrap';
+    import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from 'sveltestrap';
+    import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+    function changeStyle(style: string) {
+        dispatch('styleChange', style.toLowerCase());
+    }
+
     let isOpen = false;
 
     const toggle = () => (isOpen = !isOpen);
 </script>
 
-<Navbar color="transparent" expand="lg">
-    <NavbarBrand style="color: white;">pk-webs</NavbarBrand>
+<Navbar color="transparent" light expand="lg">
+    <NavbarBrand>pk-webs</NavbarBrand>
     <NavbarToggler on:click={toggle}></NavbarToggler>
-        <Collapse {isOpen} navbar>
-            <Nav class="ms-auto" navbar>
-                <NavItem>
-                    <NavLink href="/dash">Dash</NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink href="/settings">Settings</NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink href="/templates">templates</NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink href="/public">Public</NavLink>
-                </NavItem>
-            </Nav>
-        </Collapse>
+    <Collapse {isOpen} navbar expand="lg">
+        <Nav class="ms-auto" navbar>
+            <Dropdown nav inNavbar>
+                <DropdownToggle>Styles</DropdownToggle>
+                <DropdownMenu end>
+                    <DropdownItem on:click={() => changeStyle("light")}>Light</DropdownItem>
+                    <DropdownItem on:click={() => changeStyle("dark")}>Dark</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <NavItem>
+                <NavLink href="/dash">Dash</NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="/settings">Settings</NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="/templates">templates</NavLink>
+            </NavItem>
+            <NavItem>
+                <NavLink href="/public">Public</NavLink>
+            </NavItem>
+        </Nav>
+    </Collapse>
 </Navbar>
\ No newline at end of file