Sidebar mobile improvement
The sidebar vanished on a too small display. Button to reopen and close are rendered
This commit is contained in:
@@ -84,9 +84,46 @@ pub struct SidebarShellProps {
|
||||
/// ```
|
||||
#[component(SidebarShell)]
|
||||
fn sidebar_shell(props: &SidebarShellProps) -> Html {
|
||||
let route = use_route::<Route>();
|
||||
let mobile_sidebar_open = use_state(|| false);
|
||||
|
||||
// Close mobile sidebar automatically on any route transition
|
||||
{
|
||||
let mobile_sidebar_open = mobile_sidebar_open.clone();
|
||||
use_effect_with(route, move |_| {
|
||||
mobile_sidebar_open.set(false);
|
||||
|| ()
|
||||
});
|
||||
}
|
||||
|
||||
let on_open = {
|
||||
let mobile_sidebar_open = mobile_sidebar_open.clone();
|
||||
Callback::from(move |_: MouseEvent| mobile_sidebar_open.set(true))
|
||||
};
|
||||
|
||||
let on_close = {
|
||||
let mobile_sidebar_open = mobile_sidebar_open.clone();
|
||||
Callback::from(move |_: ()| mobile_sidebar_open.set(false))
|
||||
};
|
||||
|
||||
let on_close_click = {
|
||||
let on_close = on_close.clone();
|
||||
Callback::from(move |_: MouseEvent| on_close.emit(()))
|
||||
};
|
||||
|
||||
html! {
|
||||
<div class="layout">
|
||||
<sidebar::Sidebar/>
|
||||
<button class="mobile-menu-toggle" onclick={on_open}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="4" x2="20" y1="12" y2="12"/>
|
||||
<line x1="4" x2="20" y1="6" y2="6"/>
|
||||
<line x1="4" x2="20" y1="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class={if *mobile_sidebar_open { "sidebar-overlay open" } else { "sidebar-overlay" }} onclick={on_close_click}></div>
|
||||
|
||||
<sidebar::Sidebar is_open={*mobile_sidebar_open} on_close={on_close} />
|
||||
<main class="content">
|
||||
{ for props.children.iter() }
|
||||
</main>
|
||||
|
||||
@@ -337,8 +337,16 @@ pub fn users_menu() -> Html {
|
||||
/// # Logout Functionality
|
||||
/// The "Logout" button sends a GET request to `/api/logout`, clears the user's session,
|
||||
/// and then redirects the user to the login page (`crate::Route::Login`).
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct SidebarComponentProps {
|
||||
#[prop_or_default]
|
||||
pub is_open: bool,
|
||||
#[prop_or_default]
|
||||
pub on_close: Callback<()>,
|
||||
}
|
||||
|
||||
#[component(Sidebar)]
|
||||
pub fn sidebar() -> Html {
|
||||
pub fn sidebar(props: &SidebarComponentProps) -> Html {
|
||||
let is_admin = use_state(|| None::<bool>);
|
||||
let navigator = use_navigator().expect("Sidebar must be used within a Router");
|
||||
|
||||
@@ -382,56 +390,78 @@ pub fn sidebar() -> Html {
|
||||
None => html! { <div class="sidebar-loading">{ "Lade..." }</div> },
|
||||
|
||||
// Non-admin: render a condensed user sidebar (no diagnostics, limited links)
|
||||
Some(false) => html! {
|
||||
<SidebarStateProvider>
|
||||
<nav class="sidebar user">
|
||||
<ul>
|
||||
<Link<crate::Route> to={crate::Route::Home} classes="home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</Link<crate::Route>>
|
||||
<TicketMenu/>
|
||||
<li class="logout-item">
|
||||
<button
|
||||
class="logout-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Abmelden" }
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</SidebarStateProvider>
|
||||
Some(false) => {
|
||||
let on_close = props.on_close.clone();
|
||||
html! {
|
||||
<SidebarStateProvider>
|
||||
<nav class={if props.is_open { "sidebar user open" } else { "sidebar user" }}>
|
||||
<ul>
|
||||
<li class="sidebar-header">
|
||||
<Link<crate::Route> to={crate::Route::Home} classes="home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</Link<crate::Route>>
|
||||
<button class="sidebar-close" onclick={move |_| on_close.emit(())}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<TicketMenu/>
|
||||
<li class="logout-item">
|
||||
<button
|
||||
class="logout-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Abmelden" }
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</SidebarStateProvider>
|
||||
}
|
||||
},
|
||||
|
||||
// Admin: full sidebar wrapped in provider so submenu state persists
|
||||
Some(true) => html! {
|
||||
<SidebarStateProvider>
|
||||
<nav class="sidebar admin">
|
||||
<ul>
|
||||
<Link<crate::Route> to={crate::Route::Home} classes="home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</Link<crate::Route>>
|
||||
<TicketMenu/>
|
||||
<UsersMenu/>
|
||||
<Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
|
||||
<Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
|
||||
<li class="logout-item">
|
||||
<button
|
||||
class="logout-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Abmelden" }
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</SidebarStateProvider>
|
||||
Some(true) => {
|
||||
let on_close = props.on_close.clone();
|
||||
html! {
|
||||
<SidebarStateProvider>
|
||||
<nav class={if props.is_open { "sidebar admin open" } else { "sidebar admin" }}>
|
||||
<ul>
|
||||
<li class="sidebar-header">
|
||||
<Link<crate::Route> to={crate::Route::Home} classes="home">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="home-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</Link<crate::Route>>
|
||||
<button class="sidebar-close" onclick={move |_| on_close.emit(())}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<TicketMenu/>
|
||||
<UsersMenu/>
|
||||
<Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
|
||||
<Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
|
||||
<li class="logout-item">
|
||||
<button
|
||||
class="logout-button"
|
||||
onclick={on_logout.clone()}
|
||||
>
|
||||
{ "Abmelden" }
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</SidebarStateProvider>
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,9 +49,50 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.home {
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
.home {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease-in-out;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-svg {
|
||||
@@ -64,3 +105,70 @@
|
||||
&.user { width: 220px; background: darken($color-sidebar, 6%); }
|
||||
}
|
||||
|
||||
// Floating mobile menu toggle button
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 998;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
background-color: var(--color-container);
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: var(--color-text);
|
||||
transition: stroke 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay backdrop that dims the screen and allows dismissals on mobile
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
&.open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user