UI improvements - optimized for small screens, drawer now works properly, disabled scrolling when modal dialog is appeared.

This commit is contained in:
2023-11-21 18:15:25 +01:00
parent aa2c71af77
commit d7e33e4342
8 changed files with 140 additions and 11 deletions
+8 -3
View File
@@ -12,6 +12,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
let (user, set_user) = create_signal(User::default());
let editor = DialogOpener::new();
let pw_changer = DialogOpener::new();
let drawer = use_context::<MenuOpener>().expect("No drawer opener");
view! {
<div class="layout-wrapper layout-content-navbar">
@@ -20,7 +21,8 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
<div class="app-brand demo">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"
on:click = move |_| drawer.toggle()>
<i class="bx bx-chevron-left bx-sm align-middle"></i>
</a>
<img src="/rezervovator_l.svg" width="180"/>
@@ -30,7 +32,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<ul class="menu-inner py-1">
//<!-- Dashboard -->
<li class="menu-item">
<a href="/admin" class="menu-link">
<a href="/admin" class="menu-link" on:click=move |_| drawer.close()>
<i class="menu-icon tf-icons bx bx-home-circle"></i>
<div data-i18n="Analytics">{trl("Dashboard")}</div>
</a>
@@ -63,7 +65,9 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)" on:click={
move |_| {drawer.toggle();}
}>
<i class="bx bx-menu bx-sm"></i>
</a>
</div>
@@ -109,6 +113,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
</div>
</div>
</div>
<div class="layout-overlay layout-menu-toggle"></div>
</div>
}
}