baseline

web/css/layout/app-aside-icon-bar.css

@@ -0,0 +1,60 @@
+aside.aside-icon-bar {
+  display: none;
+}
+
+aside.aside-icon-bar ul {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0;
+}
+
+aside.aside-icon-bar li {
+  margin: 0;
+  padding: 0;
+}
+aside.aside-icon-bar li a,
+aside.aside-icon-bar li button {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 20px;
+  text-align: center;
+  color: var(--app-muted-color);
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+  border-left: 3px solid transparent;
+  display: block;
+  width: 100%;
+  cursor: pointer;
+}
+aside.aside-icon-bar li a:hover, aside.aside-icon-bar li a.active, aside.aside-icon-bar li button:hover, aside.aside-icon-bar li button.active {
+    border-left: 3px solid var(--app-primary);
+    color: var(--app-contrast);
+    background: var(--app-accordion-border-color);
+}
+
+aside.aside-icon-bar nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - var(--app-spacing));
+}
+
+/* aside.aside-icon-bar ul.aside-icon-group li:first-child {
+  margin-bottom: 1rem;
+} */
+
+@media (min-width: 768px) {
+  aside.aside-icon-bar {
+    border-right: 1px solid var(--app-border);
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 11;
+    padding-top: var(--app-spacing);
+  }
+  .is-sidebar-collapsed aside.aside-icon-bar {
+    border-right: 0;
+  }
+}