UX: two column dropdown sidebar layout (discourse#21288)

tgxworld · May 1, 2023 · 4cca7de · 4cca7de
1 parent 96a3830
commit 4cca7de
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -711,6 +711,8 @@ body.footer-nav-ipad {
 .menu-panel.slide-in {
   top: var(--header-top);
   box-sizing: border-box;
+  // ensure there's always space to click outside on tiny devices
+  max-width: 90vw;
 
   --100dvh: 100%;
   @supports (height: 100dvh) {

diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
@@ -115,29 +115,6 @@
   }
 }
 
-.sidebar-hamburger-dropdown {
-  .discourse-no-touch & {
-    .sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
-    .sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
-      background: transparent;
-    }
-  }
-
-  .sidebar-footer-wrapper {
-    margin-top: 1em;
-    .sidebar-footer-container {
-      background: var(--secondary);
-      &:before {
-        background: linear-gradient(
-          to bottom,
-          transparent,
-          rgba(var(--secondary-rgb), 1)
-        );
-      }
-    }
-  }
-}
-
 .sidebar-section-form-modal {
   .modal-inner-container {
     width: var(--modal-max-width);

diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -37,6 +37,35 @@
     .sidebar-section-header-wrapper .select-kit .btn:hover {
       background: transparent;
     }
+
+    &.sidebar-section {
+      padding-top: 0.5em;
+      .sidebar-section-header-wrapper {
+        margin: 0 0 var(--d-sidebar-row-vertical-padding);
+        border-bottom: 1px solid var(--primary-low);
+      }
+      ul {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        li {
+          min-width: 0;
+        }
+      }
+    }
+  }
+
+  .sidebar-section-wrapper .sidebar-section-header-caret {
+    display: none;
+  }
+
+  .sidebar-section-header-collapsable {
+    pointer-events: none; // disabling collapsible sections
+  }
+
+  .sidebar-custom-sections .d-icon-globe {
+    left: -0.9em;
+    top: 0.35em;
+    font-size: 0.7em;
   }
 
   .sidebar-section-link-wrapper
@@ -47,11 +76,28 @@
 
   .sidebar-footer-wrapper {
     padding: 0;
+    margin-top: 1em;
     .sidebar-footer-container {
       padding: 0;
+      border: none;
+      background: var(--secondary);
       &:before {
-        top: calc(-100% + 2px);
+        top: -1.5em;
+        background: linear-gradient(
+          to bottom,
+          transparent,
+          rgba(var(--secondary-rgb), 1)
+        );
       }
     }
   }
 }
+
+.sidebar-hamburger-dropdown {
+  .discourse-no-touch & {
+    .sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
+    .sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
+      background: transparent;
+    }
+  }
+}