fix: selected property

circular-o · Aug 9, 2023 · 6c0b253 · 6c0b253
1 parent 5aa755e
commit 6c0b253
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/src/components/navbar-item/navbar-item.component.ts b/src/components/navbar-item/navbar-item.component.ts
@@ -55,7 +55,7 @@ export default class ONavbarItem extends LibraryBaseElement {
     }
   }
 
-  private subitems: ONavbarItem[] = [];
+  public subitems: ONavbarItem[] = [];
   private currentSubItemSelected = 0;
 
   // public functions

diff --git a/src/components/navbar/navbar.component.ts b/src/components/navbar/navbar.component.ts
@@ -33,6 +33,10 @@ import type { Mode, SelectEvent } from './navbar.types.js';
  * @csspart header - The component's header wrapper.
  * @csspart body - The component's body wrapper.
  *
+ * @property selected - string - sets the pre-selected item
+ * @property noHamburger - boolean
+ * @property mode - "open" | "collapsed" | "hover"
+ *
  * @cssproperty --o-navbar-light-background-color
  * @cssproperty --o-navbar-light-hamburger-background-color
  * @cssproperty --o-navbar-light-hamburger-background-color-hover
@@ -63,12 +67,25 @@ export default class ONavbar extends LibraryBaseElement {
   // update handlers
   @watch('selected')
   updateSelected() {
-    const element = this.items.find(e => e.id === this.selected || e.text === this.selected);
-    if (element) {
-      element.click();
+    for (const item of this.items) {
+      const element = this.recursiveFindItem(item);
+      if (element) {
+        element.handleClick();
+      }
     }
   }
 
+  private recursiveFindItem(item: ONavbarItem): ONavbarItem | null {
+    if (item.id === this.selected || item.text === this.selected) return item;
+
+    for (const i of item.subitems) {
+      const found = this.recursiveFindItem(i);
+      if (found) return found;
+    }
+
+    return null;
+  }
+
   // event handlers
   private handleHamburgerClick = () => {
     // this.open = !this.open;
@@ -98,6 +115,10 @@ export default class ONavbar extends LibraryBaseElement {
           }
         }
       });
+
+      if (this.selected) {
+        this.updateSelected();
+      }
     }
   };
 
@@ -137,13 +158,11 @@ export default class ONavbar extends LibraryBaseElement {
         <header part="header">
           <slot name="logo"><o-icon class="logo" src="/assets/images/circular-logo-light.svg"></o-icon></slot>
           <o-button variant="text" circle size="small" @click="${this.handleHamburgerClick}">
-            <slot name="logo-small"
-              ><o-icon
-                src="/assets/images/circular-icon.svg"
-                style="font-size: var(--o-font-size-x-large)"
-                class="hover"
-              ></o-icon>
-            </slot>
+            <span class="hover">
+              <slot name="logo-small"
+                ><o-icon src="/assets/images/circular-icon.svg" style="font-size: var(--o-font-size-x-large)"></o-icon>
+              </slot>
+            </span>
             <o-icon library="material" name="menu" style="font-size: var(--o-font-size-large)" class="open"></o-icon>
             <o-icon
               library="material"