Add NavigationSection component and refactor settings sidebar navigation grouping

- inactive sections are dimmed. This is correct behavior. Should be propely wrapped in div, allowing hover control so that whole section ,when hovered, has opacity restored.

├── apps
│   └── editor
│       └── src
│           └── views
│               └── settings
│                   └── frontend
│                       ├── Home
│                       │   └── Home.tsx
│                       └── Settings.tsx
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── settings
                        ├── NavigationItemGroup
                        │   ├── NavigationItemGroup.module.scss
                        │   ├── NavigationItemGroup.tsx
                        │   └── index.ts
                        ├── NavigationItemSection
                        │   ├── NavigationItemSection.module.scss
                        │   ├── NavigationItemSection.tsx
                        │   └── index.ts
                        └── NavigationSection
                            ├── NavigationSection.module.scss
                            ├── NavigationSection.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/views/settings/frontend/Home/Home.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { Layout as UiLayout } from '@ui/components/editor/settings/Layout'
+import { NavigationSection as UiNavigationSection } from '@ui/components/editor/settings/NavigationSection'
 import { NavigationItemSection as UiNavigationItemSection } from '@ui/components/editor/settings/NavigationItemSection'
 import { NavigationItemGroup as UiNavigationItemGroup } from '@ui/components/editor/settings/NavigationItemGroup'
 import { ApiConfigurationsSection } from './sections/ApiConfigurationsSection'
@@ -353,47 +354,50 @@ export const Home: React.FC<Props> = (props) => {
       <UiLayout
         ref={scroll_container_ref}
         title={t('sections.settings')}
-        sidebar={NAV_ITEMS_CONFIG.map((item, i) => {
-          let current_parent: NavItem | null = null
-          for (let j = i; j >= 0; j--) {
+        sidebar={(() => {
+          const sections: {
+            parent: NavConfigItem
+            groups: NavConfigItem[]
+          }[] = []
+
+          for (const item of NAV_ITEMS_CONFIG) {
             if (
-              NAV_ITEMS_CONFIG[j].id.startsWith('section:') &&
-              !NAV_ITEMS_CONFIG[j].id.includes(':group:')
+              item.id.startsWith('section:') &&
+              !item.id.includes(':group:')
             ) {
-              current_parent = NAV_ITEMS_CONFIG[j].id
-              break
+              sections.push({ parent: item, groups: [] })
+            } else if (sections.length > 0) {
+              sections[sections.length - 1].groups.push(item)
             }
           }
-          const is_parent_active =
-            current_parent === active_nav_item_id ||
-            current_parent === active_parent_id
 
-          if (item.id.includes(':group:')) {
+          return sections.map((section, i) => {
+            const is_section_active =
+              section.parent.id === active_nav_item_id ||
+              section.parent.id === active_parent_id
+
             return (
-              <UiNavigationItemGroup
-                key={i}
-                href={`#${item.id}`}
-                label={t(item.label)}
-                is_active={item.id == active_nav_item_id}
-                is_parent_active={is_parent_active}
-                has_warning={get_has_warning(item.id)}
-                on_click={(e) => handle_nav_click(e, item.id)}
-                is_last={!NAV_ITEMS_CONFIG[i + 1]?.id.includes(':group:')}
-              />
+              <UiNavigationSection key={i} is_active={is_section_active}>
+                <UiNavigationItemSection
+                  label={t(section.parent.label)}
+                  is_active={is_section_active}
+                  has_warning={get_has_warning(section.parent.id)}
+                />
+                {section.groups.map((group, j) => (
+                  <UiNavigationItemGroup
+                    key={j}
+                    href={`#${group.id}`}
+                    label={t(group.label)}
+                    is_active={group.id === active_nav_item_id}
+                    has_warning={get_has_warning(group.id)}
+                    on_click={(e) => handle_nav_click(e, group.id)}
+                    is_last={j === section.groups.length - 1}
+                  />
+                ))}
+              </UiNavigationSection>
             )
-          }
-
-          return (
-            <UiNavigationItemSection
-              key={i}
-              label={t(item.label)}
-              is_active={
-                item.id == active_nav_item_id || item.id == active_parent_id
-              }
-              has_warning={get_has_warning(item.id)}
-            />
-          )
-        })}
+          })
+        })()}
       >
         <GeneralSection
           ref={(el) => set_section_ref('section:general', el)}

packages/ui/src/components/editor/settings/NavigationItemGroup/NavigationItemGroup.module.scss

@@ -8,15 +8,12 @@
   color: var(--vscode-foreground);
   text-decoration: none;
   cursor: pointer;
-  transition:
-    background-color var(--transition-duration-150),
-    opacity var(--transition-duration-250);
+  transition: background-color var(--transition-duration-150);
 
   font-size: 13px;
   height: 26px;
   padding-left: 20px;
   position: relative;
-  opacity: var(--dimmed-opacity);
 
   &:hover {
     background-color: var(--cwc-bg-tertiary);
@@ -34,13 +31,8 @@
     opacity: 0.2;
   }
 
-  &--parent-active {
-    opacity: 1;
-  }
-
   &--active {
     background-color: var(--cwc-bg-secondary);
-    opacity: 1;
 
     &:hover {
       background-color: var(--cwc-bg-secondary);

packages/ui/src/components/editor/settings/NavigationItemGroup/NavigationItemGroup.tsx

@@ -6,7 +6,6 @@ type Props = {
   href: string
   on_click: (e: React.MouseEvent<HTMLAnchorElement>) => void
   is_active: boolean
-  is_parent_active?: boolean
   has_warning?: boolean
   is_last?: boolean
 }
@@ -16,7 +15,6 @@ export const NavigationItemGroup: React.FC<Props> = (props) => {
     <a
       href={props.href}
       className={cn(styles.container, {
-        [styles['container--parent-active']]: props.is_parent_active,
         [styles['container--active']]: props.is_active,
         [styles['container--last']]: props.is_last
       })}

packages/ui/src/components/editor/settings/NavigationItemSection/NavigationItemSection.module.scss

@@ -8,12 +8,7 @@
   color: var(--vscode-textLink-foreground);
   height: 32px;
   transition: background-color 0.1s;
-  opacity: var(--dimmed-opacity);
   font-weight: 500;
-
-  &--active {
-    opacity: 1;
-  }
 }
 
 .label {

packages/ui/src/components/editor/settings/NavigationSection/NavigationSection.module.scss

@@ -0,0 +1,14 @@
+.container {
+  opacity: var(--dimmed-opacity);
+  transition: opacity var(--transition-duration-250);
+  display: flex;
+  flex-direction: column;
+
+  &--active {
+    opacity: 1;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}

packages/ui/src/components/editor/settings/NavigationSection/NavigationSection.tsx

@@ -0,0 +1,19 @@
+import cn from 'classnames'
+import styles from './NavigationSection.module.scss'
+
+type Props = {
+  children: React.ReactNode
+  is_active?: boolean
+}
+
+export const NavigationSection: React.FC<Props> = (props) => {
+  return (
+    <div
+      className={cn(styles.container, {
+        [styles['container--active']]: props.is_active
+      })}
+    >
+      {props.children}
+    </div>
+  )
+}

packages/ui/src/components/editor/settings/NavigationSection/index.ts

@@ -0,0 +1 @@
+export * from './NavigationSection'