Better organized sidebar nav

Author: bendera

astro.config.mjs

@@ -85,40 +85,68 @@ export default defineConfig({
             { label: "Checkbox", link: "components/checkbox" },
             { label: "CheckboxGroup", link: "components/checkbox-group" },
             { label: "Collapsible", link: "components/collapsible" },
-            { label: "ContextMenu", link: "components/context-menu" },
             {
-              label: "ContextMenuItem",
-              link: "components/context-menu-item",
+              label: "ContextMenu",
+              items: [
+                { label: "ContextMenu", link: "components/context-menu" },
+                {
+                  label: "ContextMenuItem",
+                  link: "components/context-menu-item",
+                },
+              ],
             },
             { label: "Divider", link: "components/divider" },
             { label: "FormContainer", link: "components/form-container" },
             { label: "FormGroup", link: "components/form-group" },
             { label: "FormHelper", link: "components/form-helper" },
             { label: "Icon", link: "components/icon" },
             { label: "Label", link: "components/label" },
-            { label: "MultiSelect", link: "components/multi-select" },
             { label: "Option", link: "components/option" },
             { label: "ProgressRing", link: "components/progress-ring" },
             { label: "Radio", link: "components/radio" },
             { label: "RadioGroup", link: "components/radio-group" },
             { label: "Scrollable", link: "components/scrollable" },
-            { label: "SingleSelect", link: "components/single-select" },
+            {
+              label: "Select",
+              items: [
+                { label: "SingleSelect", link: "components/single-select" },
+                { label: "MultiSelect", link: "components/multi-select" },
+              ],
+            },
             { label: "SplitLayout", link: "components/split-layout" },
-            { label: "TabHeader", link: "components/tab-header" },
-            { label: "TabPanel", link: "components/tab-panel" },
-            { label: "Table", link: "components/table" },
-            { label: "TableBody", link: "components/table-body" },
-            { label: "TableCell", link: "components/table-cell" },
-            { label: "TableHeader", link: "components/table-header" },
-            { label: "TableHeaderCell", link: "components/table-header-cell" },
-            { label: "TableRow", link: "components/table-row" },
-            { label: "Tabs", link: "components/tabs" },
+            {
+              label: "Table",
+              items: [
+                { label: "Table", link: "components/table" },
+                { label: "TableBody", link: "components/table-body" },
+                { label: "TableCell", link: "components/table-cell" },
+                { label: "TableHeader", link: "components/table-header" },
+                {
+                  label: "TableHeaderCell",
+                  link: "components/table-header-cell",
+                },
+                { label: "TableRow", link: "components/table-row" },
+              ],
+            },
+            {
+              label: "Tabs",
+              items: [
+                { label: "Tabs", link: "components/tabs" },
+                { label: "TabHeader", link: "components/tab-header" },
+                { label: "TabPanel", link: "components/tab-panel" },
+              ],
+            },
             { label: "Textarea", link: "components/textarea" },
             { label: "Textfield", link: "components/textfield" },
             { label: "ToolbarButton", link: "components/toolbar-button" },
             { label: "ToolbarContainer", link: "components/toolbar-container" },
-            { label: "TreeItem", link: "components/tree-item" },
-            { label: "Tree", link: "components/tree" },
+            {
+              label: "Tree",
+              items: [
+                { label: "Tree", link: "components/tree" },
+                { label: "TreeItem", link: "components/tree-item" },
+              ],
+            },
           ],
           collapsed: true,
         },
@@ -131,24 +159,36 @@ export default defineConfig({
             { label: "Checkbox", link: "components/checkbox/api" },
             { label: "CheckboxGroup", link: "components/checkbox-group/api" },
             { label: "Collapsible", link: "components/collapsible/api" },
-            { label: "ContextMenu", link: "components/context-menu/api" },
             {
-              label: "ContextMenuItem",
-              link: "components/context-menu-item/api",
+              label: "ContextMenu",
+              items: [
+                { label: "ContextMenu", link: "components/context-menu/api" },
+                {
+                  label: "ContextMenuItem",
+                  link: "components/context-menu-item/api",
+                },
+              ],
+              collapsed: false,
             },
             { label: "Divider", link: "components/divider/api" },
             { label: "FormContainer", link: "components/form-container/api" },
             { label: "FormGroup", link: "components/form-group/api" },
             { label: "FormHelper", link: "components/form-helper/api" },
             { label: "Icon", link: "components/icon/api" },
             { label: "Label", link: "components/label/api" },
-            { label: "MultiSelect", link: "components/multi-select/api" },
             { label: "Option", link: "components/option/api" },
             { label: "ProgressRing", link: "components/progress-ring/api" },
             { label: "Radio", link: "components/radio/api" },
             { label: "RadioGroup", link: "components/radio-group/api" },
             { label: "Scrollable", link: "components/scrollable/api" },
-            { label: "SingleSelect", link: "components/single-select/api" },
+            {
+              label: "Select",
+              items: [
+                { label: "SingleSelect", link: "components/single-select/api" },
+                { label: "MultiSelect", link: "components/multi-select/api" },
+              ],
+              collapsed: false,
+            },
             { label: "SplitLayout", link: "components/split-layout/api" },
             { label: "TabHeader", link: "components/tab-header/api" },
             { label: "TabPanel", link: "components/tab-panel/api" },
@@ -169,8 +209,13 @@ export default defineConfig({
               label: "ToolbarContainer",
               link: "components/toolbar-container/api",
             },
-            { label: "TreeItem", link: "components/tree-item/api" },
-            { label: "Tree", link: "components/tree/api" },
+            {
+              label: "Tree",
+              items: [
+                { label: "Tree", link: "components/tree/api" },
+                { label: "TreeItem", link: "components/tree-item/api" },
+              ],
+            },
           ],
           collapsed: true,
         },

src/styles/custom.css

@@ -75,3 +75,19 @@
 .api-details .na {
   opacity: 0.5;
 }
+
+.sidebar-pane li li .large {
+  /* font-size: var(--sl-text-sm); */
+  /* font-weight: 400; */
+}
+
+.sidebar-pane li li .group-label .large {
+  font-size: var(--sl-text-l);
+  font-weight: 400;
+}
+
+@media (min-width: 50rem) {
+  .sidebar-pane li li .group-label .large {
+    font-size: var(--sl-text-sm);
+  }
+}