working on nav group / nav-items

docs/pages/components/nav-group.md

@@ -7,7 +7,36 @@ layout: component
 
 ```html:preview
 <wa-nav-group>
-  <wa-nav-item>Nav Item</wa-nav-item>
+  <wa-nav-item href="#">
+    <wa-icon name="search" slot="prefix"></wa-icon>
+    Search
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="bell" slot="prefix"></wa-icon>
+    Notifications
+  </wa-nav-item>
+
+  <wa-divider></wa-divider>
+
+  <wa-nav-group expandable>
+    <div slot="label" style="display: flex; align-items: center; gap: 8px;">
+      <wa-icon name="credit-card"></wa-icon>
+      Payments
+    </div>
+
+    <wa-nav-item href="#" active>
+      Transactions
+    </wa-nav-item>
+
+    <wa-nav-item href="#">
+      Invoices
+    </wa-nav-item>
+
+    <wa-nav-item href="#">
+      Disputed Charges
+    </wa-nav-item>
+  </wa-nav-group>
 </wa-nav-group>
 ```
 
@@ -19,4 +48,4 @@ TODO
 
 ### Second Example
 
-TODO
+TODO

src/components/nav-group/nav-group.component.ts

@@ -2,6 +2,9 @@ import { html } from 'lit';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import styles from './nav-group.styles.js';
 import type { CSSResultGroup } from 'lit';
+import { when } from 'lit/directives/when.js';
+import { property } from 'lit/decorators.js';
+import WaDetails from '../details/details.component.js';
 
 /**
  * @summary Short summary of the component's intended use.
@@ -10,16 +13,36 @@ import type { CSSResultGroup } from 'lit';
  * @since 3.0
  *
  * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
  */
 export default class WaNavGroup extends WebAwesomeElement {
   static styles: CSSResultGroup = styles;
 
+  static dependencies = {
+    'wa-details': WaDetails
+  }
+
+  /**
+   * The label to display either as the summary for <wa-details> or above the <wa-nav-items>
+   */
+  @property({ reflect: true }) label = ""
+  @property({ reflect: true, type: Boolean }) expandable: boolean = false
+
   render() {
-  return html`<div class="base" part="base" role="list">
-    <slot></slot>
-  </div>`;
+    return html`<div class="base" part="base" role="list">
+      ${when(this.expandable,
+        () => html`
+          <wa-details>
+            <div slot="summary">
+              <slot name="label">
+                ${this.label}
+              </slot>
+            </div>
+
+            <slot></slot>
+          </wa-details>
+        `,
+        () => html`<slot></slot>`
+      )}
+    </div>`;
   }
 }

src/components/nav-item/nav-item.styles.ts

@@ -10,6 +10,12 @@ export default css`
     width: auto;
     cursor: pointer;
     list-style-type: none;
+
+  }
+
+  .base {
+    /* when we change to "display: list-item" apparently it sets box-sizing to content-box... */
+    box-sizing: border-box;
   }
 
   .control {
@@ -32,6 +38,7 @@ export default css`
     line-height: var(--wa-font-height-compact);
     padding: var(--wa-space-square-s);
     border-radius: var(--wa-corners-1x);
+
   }
 
   .control::-moz-focus-inner {