Collapsable+resizable sidebar. Standard view header component.

frontend/src/assets/base.css

@@ -1,5 +1,5 @@
-/* color palette from <https://github.com/vuejs/theme> */
 :root {
+  /* color palette from <https://github.com/vuejs/theme> */
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -19,33 +19,46 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-dark-3: rgba(180, 180, 180, 0.64);
+
+  /* Horde colors */
+  --color-green: #00bd7e;
+  --color-green-dark: #003825;
+  --color-blue: #3d8de1;
 }
 
-/* semantic color variables for this project */
+/* semantic color and size variables for this project */
 :root {
   --color-background: var(--vt-c-black);
   --color-background-soft: var(--vt-c-black-soft);
   --color-background-mute: var(--vt-c-black-mute);
 
+  --color-background-hover: var(--vt-c-black-mute);
+  --color-background-active: var(--vt-c-black-mute);
+
   --color-border: var(--vt-c-divider-dark-2);
   --color-border-hover: var(--vt-c-divider-dark-1);
 
   --color-heading: var(--vt-c-text-dark-1);
-  --color-text: var(--vt-c-text-dark-2);
 
+  --color-text: var(--vt-c-text-dark-2);
+  --color-text-mute: var(--vt-c-text-dark-3);
+
+  --color-active: var(--color-heading);
+
+  --border-radius: 6px;
   --section-gap: 160px;
 }
 
-/* Horde Colors */
+/* Z-Index hierarchy */
 :root {
-  --color-green: #00bd7e;
-  --color-green-dark: #003825;
-  --color-blue: #3d8de1;
-
-  --border-radius: 6px;
+  --z-index-sidebar: 100;
+  --z-index-alert: 150;
+  --z-index-context-menu: 160;
 }
 
 
+/* Dark theme by default, Light theme via browser settings */
 @media (prefers-color-scheme: light) {
   :root {
     --color-background: var(--vt-c-white);

frontend/src/assets/main.css

@@ -29,4 +29,8 @@ main {
   height: 100vh;
   flex-grow: 1;
   overflow: auto;
+}
+
+.with-sidebar-expanded .when-sidebar-collapsed {
+  display: none;
 }