liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add style changer to navigation bar

Browse Source
This commit is contained in:
Spectralitree 2021-12-09 13:56:06 +01:00
parent e958699f68
commit 986f7bd0eb
2 changed files with 47 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.svelte
View File

@ -1,21 +1,25 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { Router, Link, Route } from "svelte-navigator"; import { Router, Link, Route } from "svelte-navigator";
import { Form, Input } from 'sveltestrap'; import Navigation from "./lib/Navigation.svelte";
import Toggle from 'svelte-toggle';
import Navigation from "./lib/Navigation.svelte";
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.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 dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
let styleSrc = light; let styleSrc = light;
let style = localStorage.getItem("pk-style");
onMount(() => { onMount(() => {
if (localStorage.getItem("pk-style")) setStyle(localStorage.getItem("pk-style").toLowerCase());
});
function styleEventHandler(event) {
let style = event.detail;
setStyle(style); setStyle(style);
}) }
function setStyle(style) { function setStyle(style) {
switch (style) { switch (style) {
case "light": styleSrc = light; case "light": styleSrc = light;
localStorage.setItem("pk-style", "light"); localStorage.setItem("pk-style", "light");
@ -27,11 +31,6 @@
localStorage.setItem("pk-style", "light"); localStorage.setItem("pk-style", "light");
}; };
}; };
function styleSelect(e) {
style = e.target.value.toLowerCase();
setStyle(style);
};
</script> </script>
<svelte:head> <svelte:head>
@ -39,16 +38,10 @@
</svelte:head> </svelte:head>
<Router> <Router>
<Navigation/> <Navigation on:styleChange={styleEventHandler}/>
<div> <div>
<Route path="/"> <Route path="/">
<h2>Ooga booga</h2> <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> </Route>
</div> </div>
</Router> </Router>

53
src/lib/Navigation.svelte
View File

@ -1,27 +1,42 @@
<script lang="ts"> <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; let isOpen = false;
const toggle = () => (isOpen = !isOpen); const toggle = () => (isOpen = !isOpen);
</script> </script>
<Navbar color="transparent" expand="lg"> <Navbar color="transparent" light expand="lg">
<NavbarBrand style="color: white;">pk-webs</NavbarBrand> <NavbarBrand>pk-webs</NavbarBrand>
<NavbarToggler on:click={toggle}></NavbarToggler> <NavbarToggler on:click={toggle}></NavbarToggler>
<Collapse {isOpen} navbar> <Collapse {isOpen} navbar expand="lg">
<Nav class="ms-auto" navbar> <Nav class="ms-auto" navbar>
<NavItem> <Dropdown nav inNavbar>
<NavLink href="/dash">Dash</NavLink> <DropdownToggle>Styles</DropdownToggle>
</NavItem> <DropdownMenu end>
<NavItem> <DropdownItem on:click={() => changeStyle("light")}>Light</DropdownItem>
<NavLink href="/settings">Settings</NavLink> <DropdownItem on:click={() => changeStyle("dark")}>Dark</DropdownItem>
</NavItem> </DropdownMenu>
<NavItem> </Dropdown>
<NavLink href="/templates">templates</NavLink> <NavItem>
</NavItem> <NavLink href="/dash">Dash</NavLink>
<NavItem> </NavItem>
<NavLink href="/public">Public</NavLink> <NavItem>
</NavItem> <NavLink href="/settings">Settings</NavLink>
</Nav> </NavItem>
</Collapse> <NavItem>
<NavLink href="/templates">templates</NavLink>
</NavItem>
<NavItem>
<NavLink href="/public">Public</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar> </Navbar>