Add: Navigation bar

assets/gui/css/alas-mobile.css

@@ -15,13 +15,17 @@
     margin: 0
 }
 
+#pywebio-scope-navigator {
+    display: none;
+}
+
 *[style*="container-args-row"],
 *[style*="container-large.args"] {
     grid-template-columns: 1fr 8rem !important;
 }
 
 #pywebio-scope-_groups {
-    grid-template-columns: 0fr 1fr 0fr;
+    grid-template-columns: 0fr 1fr;
 }
 
 #pywebio-scope-overview {

assets/gui/css/alas.css

@@ -73,6 +73,18 @@ footer {
     margin: 0;
 }
 
+.btn-navigator {
+    border-radius: 0;
+    margin: 0 !important;
+    width: 100%;
+    text-align: left;
+    transition: color 0s ease-in-out;
+}
+
+.btn-navigator:hover {
+    font-weight: bold;
+}
+
 .toastify-center,
 .toastify-right,
 .toastify-left {
@@ -275,6 +287,7 @@ button.btn.dropdown-toggle {
 }
 
 #pywebio-scope-_groups {
+    height: 100%;
     display: grid;
     grid-auto-flow: column;
 
@@ -298,6 +311,16 @@ button.btn.dropdown-toggle {
     margin: .2rem .25rem .1rem .25rem !important;
 }
 
+#pywebio-scope-groups {
+    overflow-y: auto;
+}
+
+#pywebio-scope-navigator {
+    margin: .5rem 1rem .5rem;
+    height: min-content;
+    max-width: 15rem;
+}
+
 #pywebio-scope-overview {
     height: 100%;
     overflow: auto;

assets/gui/css/dark-alas.css

@@ -24,6 +24,14 @@
     border: 1px solid #202225;
 }
 
+.btn-navigator {
+    background-color: #2f3136;
+}
+
+.btn-navigator:hover {
+    color: #7a77bb;
+}
+
 .hr-group {
     background-color: #40444b !important;
 }
@@ -83,6 +91,11 @@ textarea {
     border-right: 1px solid #21262d;
 }
 
+#pywebio-scope-navigator {
+    border: 1px solid #21262d;
+    color: #c9d1d9;
+}
+
 #pywebio-scope-scheduler-bar,
 #pywebio-scope-log-bar,
 #pywebio-scope-running,

assets/gui/css/light-alas.css

@@ -21,10 +21,18 @@
     color: white;
 }
 
-.btn-scheduler-off:hover {
+.btn-off:hover {
     color: white;
 }
 
+.btn-navigator {
+    background-color: white;
+}
+
+.btn-navigator:hover {
+    color: #4e4c97;
+}
+
 .hr-group {
     background-color: #eaecef !important;
 }
@@ -84,6 +92,10 @@ textarea {
     background-color: white;
 }
 
+#pywebio-scope-navigator {
+    border: 1px solid lightgrey;
+}
+
 #pywebio-scope-scheduler-bar,
 #pywebio-scope-log-bar,
 #pywebio-scope-running,