admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 194 Wiki Activity

feat: implement professional Sidenav layout and mobile Sheet menu
Some checks failed
Build MIPS Binary / build (push) Failing after 1m29s
Details

Browse Source
This commit is contained in:
spinline
2026-02-12 20:19:39 +03:00
parent 48d8a8e0ee
commit 48193db81b
6 changed files with 612 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/layout/protected.rs
View File

@@ -2,51 +2,30 @@ use leptos::prelude::*;
use crate::components::layout::sidebar::Sidebar;
use crate::components::layout::toolbar::Toolbar;
use crate::components::layout::statusbar::StatusBar;
use crate::components::ui::sidenav::{SidenavWrapper, Sidenav, SidenavInset};
#[component]
pub fn Protected(children: Children) -> impl IntoView {
// Mobil menü durumu için bir sinyal oluşturuyoruz (RwSignal for easier passing)
let is_mobile_menu_open = RwSignal::new(false);
// Sinyali context olarak sağlıyoruz ki Toolbar ve Sidebar buna erişebilsin
provide_context(is_mobile_menu_open);
view! {
<div class="flex h-screen w-full overflow-hidden bg-background">
// --- SIDEBAR (Desktop: Sabit, Mobil: Overlay) ---
<aside class=move || {
let base = "fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out border-r border-border bg-card lg:relative lg:translate-x-0";
if is_mobile_menu_open.get() {
format!("{} translate-x-0", base)
} else {
format!("{} -translate-x-full", base)
}
}>
<SidenavWrapper attr:style="--sidenav-width:16rem; --sidenav-width-icon:3rem;">
// Masaüstü Sidenav
<Sidenav>
<Sidebar />
</aside>
</Sidenav>
// Mobil arka plan karartma (Overlay)
<Show when=move || is_mobile_menu_open.get()>
<div
class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
on:click=move |_| is_mobile_menu_open.set(false)
></div>
</Show>
// --- MAIN CONTENT AREA ---
<div class="flex flex-1 flex-col overflow-hidden">
// --- TOOLBAR (TOP) ---
// İçerik Alanı
<SidenavInset class="flex flex-col h-screen overflow-hidden">
// Toolbar (Üst Bar)
<Toolbar />
// --- MAIN CONTENT ---
// Ana İçerik
<main class="flex-1 overflow-hidden relative bg-background">
{children()}
</main>
// --- STATUS BAR (BOTTOM) ---
// Alt Bar
<StatusBar />
</div>
</div>
</SidenavInset>
</SidenavWrapper>
}
}
}