Merge pull request #2747 from nextcloud/enh/noid/full-width

make the sidebare full-width on small screens
nextcloud-libraries · Jun 10, 2022 · f4ff0ba · f4ff0ba
2 parents 34f1e9d + cd98e1d
commit f4ff0ba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git 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;
+ }
+}
+
 </style>
diff --git 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);