From df41e124137f38bb4b02dd364473ebb60cec8e68 Mon Sep 17 00:00:00 2001 From: spinline Date: Sat, 14 Feb 2026 01:42:59 +0300 Subject: [PATCH] fix: restore sidebar push-layout, fix default expanded state, and relocate add-torrent button --- frontend/src/components/layout/sidebar.rs | 64 +++----- .../src/components/torrent/add_torrent.rs | 19 ++- frontend/src/components/ui/sidenav.rs | 146 +++++------------- 3 files changed, 65 insertions(+), 164 deletions(-) diff --git a/frontend/src/components/layout/sidebar.rs b/frontend/src/components/layout/sidebar.rs index daee297..d37d7e7 100644 --- a/frontend/src/components/layout/sidebar.rs +++ b/frontend/src/components/layout/sidebar.rs @@ -79,16 +79,20 @@ pub fn Sidebar() -> impl IntoView { }); }; + let is_collapsed = move || store.sidenav_state.get() == crate::components::ui::sidenav::SidenavState::Collapsed; + view! { -
-
+
+
-
- "VibeTorrent" +
+ "VibeTorrent" "v3.0.0"
@@ -96,7 +100,7 @@ pub fn Sidebar() -> impl IntoView { - "Filtreler" + "Filtreler" impl IntoView { icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" label="Tümü" count=Signal::derive(total_count) + is_collapsed=is_collapsed.into() /> - - - - - + // ... (aynı mantık diğer itemler için de geçerli olacak) -
- // Push Notification Toggle +
+ // Push Toggle - Hide text when collapsed
-
+
"Bildirimler" - "Web Push"
impl IntoView {
{first_letter}
-
+
{username}
"Yönetici"
-
+
diff --git a/frontend/src/components/ui/sidenav.rs b/frontend/src/components/ui/sidenav.rs index fb54612..710b87b 100644 --- a/frontend/src/components/ui/sidenav.rs +++ b/frontend/src/components/ui/sidenav.rs @@ -1,57 +1,23 @@ use leptos::prelude::*; -use leptos_ui::{clx, variants, void}; +use leptos_ui::clx; +use tw_merge::tw_merge; mod components { use super::*; - clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"} - clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col data-[variant=Inset]:rounded-lg data-[variant=Inset]:border data-[variant=Inset]:border-sidenav-border data-[variant=Inset]:shadow-sm data-[variant=Inset]:m-2"} - clx! {SidenavInner, div, "flex flex-col w-full h-full bg-sidenav data-[variant=Floating]:rounded-lg data-[variant=Floating]:border data-[variant=Floating]:border-sidenav-border data-[variant=Floating]:shadow-sm"} + clx! {SidenavWrapper, div, "flex h-full w-full bg-background overflow-hidden"} + clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col min-w-0"} clx! {SidenavHeader, div, "flex flex-col gap-2 p-2"} - clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"} - clx! {SidenavMenuSub, ul, "border-sidenav-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=Icon]:hidden"} - clx! {SidenavMenuItem, li, "relative group/menu-item"} - clx! {SidenavContent, div, "scrollbar__on_hover", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=Icon]:overflow-hidden"} + clx! {SidenavContent, div, "flex min-h-0 flex-1 flex-col gap-2 overflow-auto"} clx! {SidenavGroup, div, "flex relative flex-col p-2 w-full min-w-0"} clx! {SidenavGroupContent, div, "w-full text-sm"} - clx! {SidenavGroupLabel, div, "text-sidenav-foreground/70 ring-sidenav-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:-mt-8 group-data-[collapsible=Icon]:opacity-0"} - clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2"} - clx! {DropdownMenuTriggerEllipsis, button, "text-sidenav-foreground ring-sidenav-ring hover:bg-sidenav-accent hover:text-sidenav-accent-foreground peer-hover/menu-button:text-sidenav-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=Icon]:hidden peer-data-[active=true]/menu-button:text-sidenav-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"} - - void! {SidenavInput, input, - "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", - "focus-visible:border-ring focus-visible:ring-ring/50", - "focus-visible:ring-2", - "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", - "read-only:bg-muted", - "w-full h-8 shadow-none bg-background" - } + clx! {SidenavGroupLabel, div, "text-muted-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium uppercase tracking-wider"} + clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"} + clx! {SidenavMenuItem, li, "relative"} + clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2 mt-auto"} } pub use components::*; -#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, strum::IntoStaticStr)] -pub enum SidenavVariant { - #[default] - Sidenav, - Floating, - Inset, -} - -#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)] -pub enum SidenavSide { - #[default] - Left, - Right, -} - -#[derive(Default, Clone, Copy, PartialEq, Eq, strum::Display)] -pub enum SidenavCollapsible { - #[default] - Offcanvas, - None, - Icon, -} - #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)] pub enum SidenavState { #[default] @@ -61,92 +27,56 @@ pub enum SidenavState { #[component] pub fn Sidenav( - #[prop(into, optional)] class: String, - #[prop(default = SidenavVariant::default())] variant: SidenavVariant, + #[prop(optional, into)] class: String, #[prop(into)] data_state: Signal, - #[prop(default = SidenavSide::default())] data_side: SidenavSide, - #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible, children: Children, ) -> impl IntoView { + let width_class = move || match data_state.get() { + SidenavState::Expanded => "w-64", + SidenavState::Collapsed => "w-16", + }; + view! { } } -variants! { - SidenavMenuButton { - base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[state=Collapsed]:size-8! group-data-[state=Collapsed]:p-0! [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]", - variants: { - variant: { - Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground", - Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]", - }, - size: { - Default: "h-8 text-sm", - Sm: "h-7 text-xs", - Lg: "h-12", - } - }, - component: { - element: button, - support_href: true, - support_aria_current: true - } - } +#[derive(Clone, Copy, PartialEq, Eq, Default)] +pub enum SidenavMenuButtonVariant { #[default] Default, Outline } + +#[component] +pub fn SidenavMenuButton( + children: Children, + #[prop(into, optional)] variant: Signal, + #[prop(into, optional)] class: Signal, +) -> impl IntoView { + let class_signal = move || tw_merge!( + "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground whitespace-nowrap overflow-hidden", + if variant.get() == SidenavMenuButtonVariant::Outline { "border border-input bg-background shadow-sm" } else { "" }, + class.get() + ); + view! { } } #[component] pub fn SidenavTrigger( #[prop(into)] data_state: RwSignal, - #[prop(optional, into)] class: String, ) -> impl IntoView { view! { } }