Rework the sidebar collapsing mechanism (#101)

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/base/root.css

@@ -62,7 +62,7 @@ body.sidebar-resizing {
 }
 
 body.sidebar-collapsed .page-layout.with-sidebar {
-  grid-template-columns: 0 var(--sidebar-resizer-width) minmax(0, 1fr);
+  grid-template-columns: 0 0 minmax(0, 1fr);
 }
 
 body.sidebar-collapsed .layout-sidebar {
@@ -71,8 +71,7 @@ body.sidebar-collapsed .layout-sidebar {
 }
 
 body.sidebar-collapsed .layout-sidebar-resizer {
-  border-left: var(--border-width) solid var(--color-border);
-  justify-self: start;
+  display: none;
 }
 
 body.sidebar-collapsed .page-layout.with-sidebar > main.container {

app/assets/stylesheets/components/sidebar.css

@@ -14,36 +14,56 @@
   justify-content: center;
 }
 
-.sidebar-collapse-button {
+.topics-table th.topic-title .sidebar-burger-button,
+.topic-title-with-star .sidebar-burger-button {
+  display: none;
+  margin-right: var(--spacing-2);
+}
+
+.sidebar-toggle-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-2) var(--spacing-3);
+  position: sticky;
+  top: var(--nav-height);
+  z-index: 10;
+  background: var(--color-bg-sidebar);
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.sidebar-burger-button {
   border: none;
   background: var(--color-bg-card);
   color: var(--color-text-secondary);
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   border-radius: 999px;
   box-shadow: var(--shadow-sm);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-size: 14px;
   transition: transform var(--transition-fast), background-color var(--transition-fast);
   z-index: 1;
 }
 
-.sidebar-collapse-button:hover {
+.sidebar-burger-button:hover {
   background: var(--color-bg-hover);
   transform: scale(1.05);
 }
 
+
+@media (max-width: 900px) {
+  .sidebar-toggle-bar {
+    display: none;
+  }
+}
+
 @media (max-width: 720px) {
   .layout-sidebar-resizer {
     width: 18px;
   }
-
-  .sidebar-collapse-button {
-    width: 48px;
-    height: 48px;
-  }
 }
 
 @media (max-width: 900px) {

app/assets/stylesheets/components/topics.css

@@ -86,6 +86,10 @@
   font-size: var(--font-size-base);
 }
 
+body.sidebar-collapsed .topics-table th.topic-title .sidebar-burger-button {
+  display: inline-flex;
+}
+
 .topics-table {
   & table {
     width: 100%;

app/assets/stylesheets/layouts/topic-view.css

@@ -13,6 +13,10 @@
   margin-top: var(--spacing-4);
 }
 
+body.sidebar-collapsed .topic-title-with-star .sidebar-burger-button {
+  display: inline-flex;
+}
+
 .topic-title-section {
   margin-bottom: var(--spacing-5);
 

app/views/layouts/application.html.slim

@@ -127,10 +127,11 @@ html data-theme="light"
     - if content_for?(:sidebar)
       .page-layout.with-sidebar data-sidebar-target="layout"
         .layout-sidebar#layout-sidebar data-sidebar-target="sidebar" data-action="click->sidebar#closeOnNavigate"
+          .sidebar-toggle-bar
+            button.sidebar-burger-button type="button" aria-label="Toggle sidebar" data-action="click->sidebar#toggle"
+              i.fa-solid.fa-bars aria-hidden="true"
           = yield :sidebar
         .layout-sidebar-resizer data-sidebar-target="resizer" role="separator" aria-orientation="vertical" aria-label="Resize sidebar" data-action="mousedown->sidebar#startResize touchstart->sidebar#startResize"
-          button.sidebar-collapse-button type="button" aria-label="Toggle sidebar" data-action="click->sidebar#toggle" data-sidebar-target="toggleButton"
-            span data-sidebar-target="toggleIcon" ◀
         .layout-sidebar-overlay data-sidebar-target="overlay" data-action="click->sidebar#closeMobile"
         main.container
           - flash.each do |type, message|

app/views/topics/index.html.slim

@@ -6,7 +6,10 @@
     table
       thead
         tr
-          th.topic-title Topic
+          th.topic-title
+            button.sidebar-burger-button type="button" aria-label="Expand sidebar" data-action="click->sidebar#toggle"
+              i.fa-solid.fa-bars aria-hidden="true"
+            | Topic
           th.activity-header Activity
           th.participants-header Participants
       tbody#topics

app/views/topics/show.html.slim

@@ -166,6 +166,8 @@
 .topic-header
   .topic-title-section
     .topic-title-with-star
+      button.sidebar-burger-button type="button" aria-label="Expand sidebar" data-action="click->sidebar#toggle"
+        i.fa-solid.fa-bars aria-hidden="true"
       - if user_signed_in?
         = render "star_button", topic: @topic, starred: @is_starred
       h1 = @topic.title