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

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>