Add group labels to sidebar (#547)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Cody Baker <[email protected]>

src/main/main.ts

@@ -231,11 +231,14 @@ function initialize() {
 
     if (globals.mainWindow) return // Do not re-initialize if the main window is already declared
 
+    const minHeight = 800;
+    const minWidth = 1280;
+
     const windowOptions = {
-      minWidth: 1121,
-      minHeight: 735,
-      width: 1121,
-      height: 735,
+      minWidth,
+      minHeight,
+      width: minWidth,
+      height: minHeight,
       center: true,
       show: false,
       icon,

src/renderer/assets/css/nav.css

@@ -107,19 +107,41 @@ a[data-toggle="collapse"] {
     padding-bottom: 0px;
 }
 
+#main-nav .sidebar-header img {
+    cursor: pointer;
+}
+
 #main-nav .sidebar-body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow-y: hidden;
+    margin-top: 15px;
     flex-grow: 1;
+    border-top: 1px solid #8f8f8f;
+}
+
+#main-nav .sidebar-body > *:last-child {
+    background: var(--color-sidebar);
+    padding: 3px;
+    padding-top: 8px;
+    border-top: 1px solid #8f8f8f;
 }
 
-#main-nav ul.components {
+#main-nav .sidebar-body > *:last-child h4 {
+    margin-top: 0px !important;
+}
+
+#main-nav .sidebar-body li {
     list-style: none;
+}
+
+#main-nav ul {
     padding-right: 10px;
     padding-left: 3px;
     margin-right: 0;
-    margin-top: 10px;
+    margin-bottom: 0;
+    overflow-y: auto;
 }
 
 #main-nav ul p {

src/renderer/src/pages.js

@@ -37,6 +37,8 @@ dashboard.logo = logo;
 dashboard.name = "NWB GUIDE";
 dashboard.renderNameInSidebar = false;
 
+const resourcesGroup = "Resources";
+
 const overviewIcon = `
 <svg
     style="margin-right: 30px; margin-bottom: -5px"
@@ -100,10 +102,12 @@ const pages = {
     "/": new GettingStartedPage({
         label: "Home",
         icon: overviewIcon,
+        hidden: true,
     }),
     conversion: new GuidedHomePage({
         label: "Conversions",
         icon: guidedIcon,
+        group: "Workflows",
         pages: {
             start: new GuidedStartPage({
                 label: "Start",
@@ -176,26 +180,32 @@ const pages = {
     inspect: new InspectPage({
         label: "Inspect",
         icon: inspectIcon,
+        group: "Workflows",
     }),
     preview: new PreviewPage({
         label: "Neurosift",
         icon: neurosiftIcon,
+        group: "Workflows",
     }),
     uploads: new UploadsPage({
         label: "Uploads",
         icon: uploadIcon,
+        group: "Workflows",
     }),
     tutorial: new TutorialPage({
         label: "Tutorial",
         icon: tutorialIcon,
+        group: resourcesGroup,
     }),
     docs: new DocumentationPage({
         label: "Documentation",
         icon: documentationIcon,
+        group: resourcesGroup,
     }),
     contact: new ContactPage({
         label: "Contact Us",
         icon: contactIcon,
+        group: resourcesGroup,
     }),
     settings: new SettingsPage({
         label: "Settings",

src/renderer/src/stories/sidebar.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import useGlobalStyles from "./utils/useGlobalStyles.js";
+import { header } from "./forms/utils";
 
 const componentCSS = ``; // These are not active until the component is using shadow DOM
 
@@ -71,7 +72,7 @@ export class Sidebar extends LitElement {
         // Actually click the item
         let selectedItem = this.#selected
             ? (this.shadowRoot ?? this).querySelector(`ul[data-id='${this.#selected}']`)
-            : (this.shadowRoot ?? this).querySelector("ul").children[0];
+            : (this.shadowRoot ?? this).querySelector("ul").querySelector("a");
         if (this.initialize && selectedItem) selectedItem.click();
         else if (this.#selected) this.selectItem(this.#selected); // Visually select the item
 
@@ -138,7 +139,14 @@ export class Sidebar extends LitElement {
           <div class="sidebar-header">
               ${
                   logoNoName
-                      ? html` <img id="button-soda-big-icon" class="nav-center-logo-image" src="${this.logo}" /> `
+                      ? html`
+                            <img
+                                id="button-soda-big-icon"
+                                class="nav-center-logo-image"
+                                src="${this.logo}"
+                                @click=${() => this.select("/")}
+                            />
+                        `
                       : ""
               }
                 ${hasName ? html`<h1 style="margin-bottom: 0;">${this.name}</h1>` : ""}
@@ -162,26 +170,54 @@ export class Sidebar extends LitElement {
                     ul.classList.add("components");
 
                     const groups = {};
+
                     Object.entries(this.pages).forEach(([id, page]) => {
                         const info = page.info ?? {};
                         const label = info.label ?? id;
                         const icon = info.icon ?? "";
+
+                        if (info.hidden) return;
+
                         const a = document.createElement("a");
                         a.setAttribute("data-id", id);
                         a.href = "#";
-                        a.innerHTML = `${icon} ${label} `;
+                        a.innerHTML = `${icon} ${label}`;
                         a.onclick = () => this.#onClick(id);
 
                         const li = document.createElement("li");
                         li.append(a);
 
+                        if (info.hidden) {
+                            li.style.display = "none";
+                        }
+
                         const parent = info.group
                             ? groups[info.group] ?? (groups[info.group] = document.createElement("div"))
                             : ul;
-                        parent.append(a);
+                        parent.append(li);
                     });
 
-                    return [ul, ...Object.values(groups)];
+                    const bottomGroup = groups["bottom"];
+                    delete groups["bottom"];
+
+                    for (let key in groups) {
+                        const group = groups[key];
+                        const title = document.createElement("h4");
+                        Object.assign(title.style, {
+                            color: "gray",
+                            fontSize: "14px",
+                            padding: "15px 0px 7px 10px",
+                            borderBottom: "1px solid #ccc",
+                            margin: 0,
+                            marginBottom: "10px",
+                        });
+                        title.innerHTML = header(key);
+                        group.prepend(title);
+                    }
+
+                    ul.append(...Object.values(groups));
+
+                    return [ul, bottomGroup];
                 })()}
             </div>
             <div>