panel: Make menu collapsible

This commit makes the top menu collapsible on all pages.

internal/dis/component/server/assets/src/base/index.css

@@ -1,147 +1,7 @@
-body {
-    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-header,
-main,
-footer {
-    margin: 2em;
-}
-
-nav.tabs-menu {
-    float: left;
-    min-width: 10em;
-    margin: 5px;
-}
-
-nav.top-menu, nav.breadcrumbs {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    border-bottom: 1px solid black;
-}
-
-nav.pure-menu :has(img.logo) {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 0;
-}
-nav.pure-menu img.logo {
-    height: 2.5em;
-    width: 2.5em;
-}
-
-nav.breadcrumbs {
-    padding-left: 1em;
-    font-size: small;
-}
-
-nav.breadcrumbs a:not(:last-child)::after {
-    cursor: default;
-    content: " > ";
-    color: black;
-}
-nav.breadcrumbs a {
-    text-decoration: none;
-    color: blue !important;
-}
-nav.breadcrumbs a.active {
-    font-weight: bold;
-}
-
-footer {
-    font-size: small;
-    border-top: 1px solid black;
-    padding-top: 1em;
-}
-
-footer a {
-    color: blue !important;
-}
-
-time {
-    font-style: italic;
-}
-
-.padding {
-    padding: 1em;
-}
-
-.overflow {
-    overflow-x: auto;
-}
-
-.overflow table {
-    width: 100%;
-}
-
-.overflow table td,
-.overflow table th {
-    padding: .5em .5em;
-}
-
-div.spacer {
-    clear: both;
-}
-
-.overflow table td:not(:last-child),
-.overflow table th:not(:last-child) {
-    width: 1px;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.overflow table td:last-child,
-.overflow table th:last-child {
-    white-space: nowrap;
-}
-
-.hspace {
-    display: block;
-    height: 1em;
-}
-.pure-form-group {
-    display: inline;
-}
-
-.pure-button-action {
-    background-color: rgb(66, 184, 221) !important;
-}
-
-.pure-button-success {
-    background-color: rgb(28, 184, 65) !important;
-}
-
-.pure-button-danger {
-    background: rgb(202, 60, 60) !important;
-}
-
-.pure-button-warning {
-    background: rgb(223, 117, 20) !important;
-}
-
-.pure-button-xsmall {
-    font-size: 70%;
-}
-
-.pure-button-small {
-    font-size: 85%;
-}
-
-.pure-button-large {
-    font-size: 110%;
-}
-
-.pure-button-xlarge {
-    font-size: 125%;
-}
-
-.pure-select {
-    min-width: 24ch; /* to match <input type="text"> */
-}
-
-.error-message {
-    background-color: pink;
-    border: 1px solid red;
-    padding: 2px;
-    color: red;
-}
+@import url("./parts/pure-buttons.css");
+@import url("./parts/pure-forms.css");
+@import url("./parts/pure-hide.css");
+@import url("./parts/menu.css");
+@import url("./parts/table.css");
+@import url("./parts/theme.css");
+@import url("./parts/utils.css");

internal/dis/component/server/assets/src/base/index.ts

@@ -1,4 +1,5 @@
 import 'purecss/build/pure.css'
 import 'purecss/build/grids-responsive.css'
 
-import './index.css'
+import '~/src/lib/pure-toggle-menu'
+import './index.css'

internal/dis/component/server/assets/src/base/parts/menu.css

@@ -0,0 +1,43 @@
+/* menu, tabs & breadcrumbs */
+
+nav.tabs-menu {
+    float: left;
+    min-width: 10em;
+    margin: 5px;
+}
+
+nav.top-menu, nav.breadcrumbs {
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.pure-menu-heading :has(img.logo) {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+}
+.pure-menu-heading img.logo {
+    height: 2.5em;
+    width: 2.5em;
+}
+
+nav.breadcrumbs {
+    padding-left: 1em;
+    font-size: small;
+
+    border-bottom: 1px solid black;
+    border-top: 1px solid black;
+}
+
+nav.breadcrumbs a:not(:last-child)::after {
+    cursor: default;
+    content: " > ";
+    color: black;
+}
+nav.breadcrumbs a {
+    text-decoration: none;
+    color: blue !important;
+}
+nav.breadcrumbs a.active {
+    font-weight: bold;
+}

internal/dis/component/server/assets/src/base/parts/pure-buttons.css

@@ -0,0 +1,34 @@
+/** additional button sizes */
+.pure-button-xsmall {
+    font-size: 70%;
+}
+
+.pure-button-small {
+    font-size: 85%;
+}
+
+.pure-button-large {
+    font-size: 110%;
+}
+
+.pure-button-xlarge {
+    font-size: 125%;
+}
+
+/** additional buttons colors */
+
+.pure-button-action {
+    background-color: rgb(66, 184, 221) !important;
+}
+
+.pure-button-success {
+    background-color: rgb(28, 184, 65) !important;
+}
+
+.pure-button-danger {
+    background: rgb(202, 60, 60) !important;
+}
+
+.pure-button-warning {
+    background: rgb(223, 117, 20) !important;
+}

internal/dis/component/server/assets/src/base/parts/pure-forms.css

@@ -0,0 +1,7 @@
+.pure-form-group {
+    display: inline;
+}
+
+.pure-select {
+    min-width: 24ch; /* to match <input type="text"> */
+}

internal/dis/component/server/assets/src/base/parts/pure-hide.css

@@ -0,0 +1,21 @@
+
+
+@media (max-width: 47.999em) {
+    .u-md-show {
+        display: none !important;
+    }
+
+    .u-md-hide {
+        display: block;
+    }
+}
+
+@media (min-width: 48em) {
+    .u-md-show {
+        display: block;
+    }
+
+    .u-md-hide {
+        display: none !important;
+    }
+}

internal/dis/component/server/assets/src/base/parts/table.css

@@ -0,0 +1,21 @@
+.overflow table {
+    width: 100%;
+}
+
+.overflow table td,
+.overflow table th {
+    padding: .5em .5em;
+}
+
+
+.overflow table td:not(:last-child),
+.overflow table th:not(:last-child) {
+    width: 1px;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.overflow table td:last-child,
+.overflow table th:last-child {
+    white-space: nowrap;
+}

internal/dis/component/server/assets/src/base/parts/theme.css

@@ -0,0 +1,30 @@
+/** generic theme-style customization */
+
+body {
+    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+header,
+main,
+footer {
+    margin: 2em;
+}
+
+footer {
+    font-size: small;
+    border-top: 1px solid black;
+    padding-top: 1em;
+}
+
+footer a {
+    color: blue !important;
+}
+
+time {
+    font-style: italic;
+}
+

internal/dis/component/server/assets/src/base/parts/utils.css

@@ -0,0 +1,23 @@
+.padding {
+    padding: 1em;
+}
+
+.overflow {
+    overflow-x: auto;
+}
+
+div.spacer {
+    clear: both;
+}
+
+.hspace {
+    display: block;
+    height: 1em;
+}
+
+.error-message {
+    background-color: pink;
+    border: 1px solid red;
+    padding: 2px;
+    color: red;
+}

internal/dis/component/server/assets/src/lib/pure-toggle-menu/index.css

@@ -0,0 +1,55 @@
+/** hide contents of the menu */
+.pure-toggle-menu.closed .pure-toggle-hide {
+    display: none !important;
+}
+
+/** toggle button itself */
+.pure-toggle-menu .toggle {
+    width: 34px;
+    height: 34px;
+    
+    position: relative;
+    float: right;
+
+    /** matching the margin of the parent */
+    top: 1em;
+    right: .5em;
+}
+
+.pure-toggle-menu .toggle .bar {
+    background-color: #582e2e;
+    display: block;
+    width: 20px;
+    height: 2px;
+    border-radius: 100px;
+
+    position: absolute;
+    top: 18px;
+    right: 7px;
+
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.pure-toggle-menu .toggle .bar:first-child {
+    -webkit-transform: translateY(-6px);
+    -moz-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    transform: translateY(-6px);
+}
+
+.pure-toggle-menu .toggle.x .bar {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.pure-toggle-menu .toggle.x .bar:first-child {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}

internal/dis/component/server/assets/src/lib/pure-toggle-menu/index.ts

@@ -0,0 +1,26 @@
+import './index.css';
+
+const WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
+
+document.querySelectorAll('.pure-toggle-menu').forEach((menu) => {
+    const toggle = menu.querySelector('.toggle');
+    if (!toggle) {
+        console.warn("'.pure-toggle-menu' without '.toggle'");
+        return;
+    }
+
+    const toggleMenu = () => {
+        menu.classList.toggle('closed');
+        toggle.classList.toggle('x');
+    };
+
+    toggle.addEventListener('click', (e) => {
+        e.preventDefault();
+        toggleMenu();
+    });
+
+    window.addEventListener(WINDOW_CHANGE_EVENT, () => {
+        if (menu.classList.contains('closed')) return;
+        toggleMenu();
+    });
+});