pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create comonent for collapsing menu entries

Browse Source
This commit is contained in:
Wim Brand
2026-02-12 19:42:23 +01:00
parent 6a19b5bc18
commit ec1c8b0f5b
7 changed files with 192 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
svelte/src/wrap/MainMenu.svelte
View File

@@ -12,8 +12,9 @@ import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
import { get_user } from "lib/PixeldrainAPI";
import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte";
let menu_collapsed = false
let menu_collapsed: boolean = $state(false)
const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed
@@ -37,62 +38,62 @@ onMount(async () => {
<div class="scroll_container">
<nav class="nav" class:collapse={menu_collapsed}>
<button class="button" onclick={toggle_menu}>
<i class="icon small">menu</i>
<i class="icon">menu</i>
<span class:hide={menu_collapsed}>Collapse menu</span>
</button>
<a class="button" href="/" use:highlight_current_page>
<i class="icon small">home</i>
<i class="icon">home</i>
<span class:hide={menu_collapsed}>Home</span>
</a>
{#if $user.username !== undefined && $user.username !== ""}
<div class="separator" class:hide={menu_collapsed}></div>
<div class="username" class:hide={menu_collapsed}>
{$user.username}
</div>
<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
{#snippet title()}
<div class="username">{$user.username}</div>
{/snippet}
<div class="separator"></div>
{#snippet body()}
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
{#if $user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
{/if}
{#if $user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
{/if}
<div>Storage used</div>
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
<div class="separator" class:hide={menu_collapsed}></div>
<div>Storage used</div>
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
{/snippet}
</MenuEntry>
<a class="button" href="/d/me" use:highlight_current_page>
<i class="icon small">folder</i>
<i class="icon">folder</i>
<span class:hide={menu_collapsed}>Filesystem</span>
</a>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon small">dashboard</i>
<i class="icon">dashboard</i>
<span class:hide={menu_collapsed}>Dashboard</span>
</a>
{#if $user.is_admin}
<a class="button" href="/admin" use:highlight_current_page>
<i class="icon small">admin_panel_settings</i>
<i class="icon">admin_panel_settings</i>
<span class:hide={menu_collapsed}>Admin Panel</span>
</a>
{/if}
{:else}
<a class="button" href="/login" use:highlight_current_page>
<i class="icon small">login</i>
<i class="icon">login</i>
<span class:hide={menu_collapsed}>Login</span>
</a>
<a class="button" href="/register" use:highlight_current_page>
<i class="icon small">how_to_reg</i>
<i class="icon">how_to_reg</i>
<span class:hide={menu_collapsed}>Register</span>
</a>
{/if}
@@ -100,21 +101,18 @@ onMount(async () => {
<div class="separator"></div>
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon small">speed</i>
<i class="icon">speed</i>
<span class:hide={menu_collapsed}>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon small">palette</i>
<i class="icon">palette</i>
<span class:hide={menu_collapsed}>Themes</span>
</a>
<div class="separator"></div>
<Bookmarks menu_collapsed={menu_collapsed}/>
{#if !menu_collapsed}
<Tree/>
{/if}
<Tree menu_collapsed={menu_collapsed}/>
</nav>
</div>
</div>
@@ -176,16 +174,17 @@ onMount(async () => {
overflow-x: hidden;
max-width: 100%;
}
.username {
flex: 1 1 auto;
text-align: center;
margin: 3px;
}
.separator {
height: 1px;
margin: 2px 0;
width: 100%;
background-color: var(--separator);
}
.username {
text-align: center;
}
.stats_table {
display: grid;
grid-template-columns: auto auto;