From befbd70453aad32657686c8a3ddf2250fe1a5490 Mon Sep 17 00:00:00 2001 From: szaimen Date: Thu, 9 Jun 2022 16:03:22 +0200 Subject: [PATCH 1/2] make the sidebare full-width on small screens Signed-off-by: szaimen --- src/components/AppSidebar/AppSidebar.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue index c562dc6e74..49d463ba82 100644 --- a/src/components/AppSidebar/AppSidebar.vue +++ b/src/components/AppSidebar/AppSidebar.vue @@ -847,6 +847,13 @@ $top-buttons-spacing: 6px; } } +// Make the sidebar full-width on small screens +@media only screen and (max-width: math.div($breakpoint-mobile, 2)) { + .app-sidebar { + width: 100vw; + } +} + .slide-right-leave-active, .slide-right-enter-active { transition-duration: var(--animation-quick); From cd98e1dedd3f265ab6555041f198f59a470b5b27 Mon Sep 17 00:00:00 2001 From: szaimen Date: Fri, 10 Jun 2022 11:49:48 +0200 Subject: [PATCH 2/2] hide appnavigation behind appsidebar on small screens Signed-off-by: szaimen --- src/components/AppNavigation/AppNavigation.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 1cf3b667a1..2ea312a47b 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -188,4 +188,11 @@ export default { } } +// Put the toggle behind appsidebar on small screens +@media only screen and (max-width: math.div($breakpoint-mobile, 2)) { + .app-navigation { + z-index: 1400; + } +} +