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

Make toolbar and main menu collapsible

Browse Source
This commit is contained in:
Wim Brand
2025-11-03 19:15:57 +01:00
parent 4de6331551
commit d422c147b0
7 changed files with 127 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
svelte/src/wrap/Bookmarks.svelte
View File

@@ -3,6 +3,8 @@ import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
let editing = $state(false)
const toggle_edit = () => {
@@ -10,18 +12,20 @@ const toggle_edit = () => {
}
</script>
<div class="title">
<div class="hide_small">Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
</div>
{#if $bookmarks_store.length !== 0}
<div class="title">
<div class:hide={menu_collapsed}>Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
</div>
{/if}
{#each $bookmarks_store as bookmark}
<div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
<i class="icon">{bookmark.icon}</i>
<span class="hide_small">{bookmark.label}</span>
<span class:hide={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
@@ -59,9 +63,7 @@ const toggle_edit = () => {
background: none;
box-shadow: none;
}
@media(max-width: 1000px) {
.hide_small {
display: none;
}
.hide {
display: none;
}
</style>

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

@@ -10,9 +10,17 @@ import { fs_get_node } from "lib/FilesystemAPI.svelte";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
import { get_user, logout_user } from "lib/PixeldrainAPI";
import { get_user } from "lib/PixeldrainAPI";
let menu_collapsed = false
const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed
}
onMount(async () => {
menu_collapsed = document.documentElement.clientWidth < 1000
await loading_run(async () => {
const user = await get_user()
if (user.username === undefined || user.username === "") {
@@ -27,21 +35,26 @@ onMount(async () => {
<div class="nav_container">
<div class="scroll_container">
<nav class="nav">
<button class="button" onclick={toggle_menu}>
<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">home</i>
<span class="hide_small">Home</span>
<span class:hide={menu_collapsed}>Home</span>
</a>
{#if $user.username !== undefined && $user.username !== ""}
<div class="separator hide_small"></div>
<div class="separator" class:hide={menu_collapsed}></div>
<div class="username hide_small">
<div class="username" class:hide={menu_collapsed}>
{$user.username}
</div>
<div class="separator"></div>
<div class="stats_table hide_small">
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
@@ -56,34 +69,30 @@ onMount(async () => {
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
<div class="separator hide_small"></div>
<div class="separator" class:hide={menu_collapsed}></div>
<a class="button" href="/d/me" use:highlight_current_page>
<i class="icon">folder</i>
<span class="hide_small">Filesystem</span>
<span class:hide={menu_collapsed}>Filesystem</span>
</a>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon">dashboard</i>
<span class="hide_small">Dashboard</span>
<span class:hide={menu_collapsed}>Dashboard</span>
</a>
{#if $user.is_admin}
<a class="button" href="/admin" use:highlight_current_page>
<i class="icon">admin_panel_settings</i>
<span class="hide_small">Admin Panel</span>
<span class:hide={menu_collapsed}>Admin Panel</span>
</a>
{/if}
<button class="button" onclick={()=> logout_user("/")}>
<i class="icon">logout</i>
<span class="hide_small">Log out</span>
</button>
{:else}
<a class="button" href="/login" use:highlight_current_page>
<i class="icon">login</i>
<span class="hide_small">Login</span>
<span class:hide={menu_collapsed}>Login</span>
</a>
<a class="button" href="/register" use:highlight_current_page>
<i class="icon">how_to_reg</i>
<span class="hide_small">Register</span>
<span class:hide={menu_collapsed}>Register</span>
</a>
{/if}
@@ -91,16 +100,16 @@ onMount(async () => {
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span class="hide_small">Speedtest</span>
<span class:hide={menu_collapsed}>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span class="hide_small">Themes</span>
<span class:hide={menu_collapsed}>Themes</span>
</a>
<div class="separator"></div>
<Bookmarks/>
<Bookmarks menu_collapsed={menu_collapsed}/>
</nav>
</div>
</div>
@@ -174,10 +183,8 @@ onMount(async () => {
margin: 5px;
}
@media(max-width: 1000px) {
.hide_small {
display: none;
}
.hide {
display: none;
}
.spinner {