scout_ante/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autoclose nav dropdown

Browse Source
This commit is contained in:
rxdn 2022-03-22 01:22:43 +00:00
parent cf9ca6e86b
commit c3fed92d8f
6 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/NavElement.svelte
View File

@ -1,11 +1,11 @@
<div class="nav-element"> <div class="nav-element">
{#if link} {#if link}
<Navigate to="{link}" styles="link row" on:click> <a href="{link}" class="link row" on:click>
<div class="icon"> <div class="icon">
<i class="{icon}"></i> <i class="{icon}"></i>
</div> </div>
<slot/> <slot/>
</Navigate> </a>
{:else} {:else}
<a class="link row" on:click> <a class="link row" on:click>
<div class="icon"> <div class="icon">
@ -17,10 +17,8 @@
</div> </div>
<script> <script>
export let icon; export let icon;
export let link; export let link;
import {Navigate} from 'svelte-router-spa'
</script> </script>
<style> <style>

4
frontend/src/components/PanelDropdown.svelte
View File

@ -53,10 +53,6 @@
selectedRaw = selectedRaw.panel_id; selectedRaw = selectedRaw.panel_id;
} }
} }
console.log(selectedRaw)
console.log(selected)
} }
onMount(() => { onMount(() => {

16
frontend/src/includes/Navbar.svelte
View File

@ -1,10 +1,10 @@
<div class="navbar" class:dropdown> <div class="navbar" class:dropdown={$dropdown}>
<div class="wrapper" class:dropdown> <div class="wrapper" class:dropdown={$dropdown}>
<div> <div>
<div class="burger-menu"> <div class="burger-menu">
<NavElement icon="fas fa-bars" on:click={dropdownNav}>Menu</NavElement> <NavElement icon="fas fa-bars" on:click={dropdownNav}>Menu</NavElement>
</div> </div>
<div class="nav-section" class:dropdown> <div class="nav-section" class:dropdown={$dropdown}>
<!-- on:click required to close dropdown again --> <!-- on:click required to close dropdown again -->
<NavElement icon="fas fa-cogs" link="/manage/{guildId}/settings" on:click={closeDropdown}>Settings</NavElement> <NavElement icon="fas fa-cogs" link="/manage/{guildId}/settings" on:click={closeDropdown}>Settings</NavElement>
<NavElement icon="fas fa-copy" link="/manage/{guildId}/transcripts" on:click={closeDropdown}>Transcripts</NavElement> <NavElement icon="fas fa-copy" link="/manage/{guildId}/transcripts" on:click={closeDropdown}>Transcripts</NavElement>
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div> <div>
<div class="nav-section" class:dropdown> <div class="nav-section" class:dropdown={$dropdown}>
<NavElement icon="fas fa-server" link="/#">Servers</NavElement> <NavElement icon="fas fa-server" link="/#">Servers</NavElement>
<NavElement icon="fas fa-sign-out-alt" link="/logout">Logout</NavElement> <NavElement icon="fas fa-sign-out-alt" link="/logout">Logout</NavElement>
</div> </div>
@ -28,16 +28,18 @@
<script> <script>
export let guildId; export let guildId;
export let dropdown = false; export let dropdown;
import NavElement from "../components/NavElement.svelte"; import NavElement from "../components/NavElement.svelte";
function dropdownNav() { function dropdownNav() {
dropdown = !dropdown; console.log(dropdown);
dropdown.update(v => !v);
} }
function closeDropdown() { function closeDropdown() {
dropdown = false; console.log('cum');
dropdown.set(false);
} }
</script> </script>

2
frontend/src/layouts/ManageLayout.svelte
View File

@ -1,7 +1,7 @@
<Head/> <Head/>
<div class="wrapper"> <div class="wrapper">
<Navbar guildId={guildId} bind:dropdown={$dropdown}/> <Navbar guildId={guildId} {dropdown}/>
<div class="super-container" class:dropdown={$dropdown}> <div class="super-container" class:dropdown={$dropdown}>
<LoadingScreen/> <LoadingScreen/>
<div class="content-container" class:hide={$loadingScreen}> <div class="content-container" class:hide={$loadingScreen}>

4
frontend/src/views/Settings.svelte
View File

@ -23,10 +23,6 @@
export let currentRoute; export let currentRoute;
let guildId = currentRoute.namedParams.id let guildId = currentRoute.namedParams.id
onMount(async () => {
dropdown.set(false)
})
</script> </script>
<style> <style>

4
frontend/src/views/Transcripts.svelte
View File

@ -223,10 +223,6 @@
return true; return true;
} }
onMount(async () => {
dropdown.set(false)
})
withLoadingScreen(async () => { withLoadingScreen(async () => {
await loadPanels(); await loadPanels();
await loadSettings(); await loadSettings();