CSS: Collapse sidebar when window is narrow

Author: ato

ui/resources/static/assets/Global.css

@@ -104,12 +104,13 @@ body > nav {
     background-color: var(--color-sidebar-background);
     padding: 0;
     border-right: 1px solid var(--color-light-grey);
+    white-space: nowrap;
 }
 
 /* brand link */
 body > nav > header a { 
     background-color: #011f85;
-    width: 179px;
+    width: calc(var(--sidebar-width) - 1px);
     border-right: 1px solid darkblue;
     height: 40px;
     display: block;
@@ -163,6 +164,36 @@ body > nav ul > li > a > .icon {
     margin-right: 8px;
 }
 
+/*
+ * Collapse sidebar and only show icons when window is narrow
+ */
+@media (max-width: 700px) {
+    body > nav {
+        width: 32px !important;
+        transition: width 0.3s;
+    }
+    body > nav .icon {
+        flex-shrink: 0;
+    }
+
+    body > nav ul > li > a {
+        padding-left: 4px !important;
+    }
+
+    body > nav .hide-when-sidebar-collapsed {
+        display: none;
+    }
+
+    body > nav ul > li > a {
+        overflow: clip;
+    }
+
+    body > main {
+        padding-left: calc(32px + var(--margin-width)) !important;
+        transition: padding-left 0.3s;
+    }
+}
+
 /*
  * Main
  */
@@ -198,7 +229,7 @@ body > main > header, main > form > header {
 
     height: var(--header-height);
     padding: 0 15px;
-    margin-left: 180px;
+    margin-left: var(--sidebar-width);
     box-sizing: border-box;
 }
 

ui/resources/templates/_layout.html

@@ -73,18 +73,18 @@
             <i class="icon forum"></i> Social</a></li>
     </ul>
 
-    <ul>
+    <ul class="hide-when-sidebar-collapsed">
         <li sec:authorize="hasAuthority('PRIV_VIEW_GATHER_QUEUE')"><a th:href="@{/queue}" th:classappend="${activeItem == 'Gather Queue'}? 'active'">Gather Queue</a>
         <li><a th:href="@{/statistics}">Statistics</a>
         <li sec:authorize="hasRole('stduser')"><a th:href="@{/agencies}">Agencies</a>
         <li sec:authorize="hasRole('stduser')"><a href="https://webrecorder.archive.org.au/">Webrecorder</a>
     </ul>
 
     <!-- Gather option administration -->
-    <ul sec:authorize="hasRole('stduser')">
+    <ul sec:authorize="hasRole('stduser')" class="hide-when-sidebar-collapsed">
         <li><a th:href="@{/settings}">System Settings</a>
     </ul>
-    <ul>
+    <ul class="hide-when-sidebar-collapsed">
         <li><a class="disabled">User: <th:block sec:authentication="name">jsmith</th:block></a></li>
         <li sec:authorize="hasAuthority('IS_MASQUERADING')" style="padding-left: 1rem; color: #999">
             Acting as: <span th:text="${@userService.effectiveRole}"></span>