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
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">
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>

53
src/lib/Navigation.svelte
View File

@@ -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>