From 00f23c485d33860d1a12c6493c681bd7d57cceb3 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Fri, 13 Oct 2023 10:59:19 -0400
Subject: [PATCH] update layout stuff

---
 docs/pages/components/layout.md           |  8 ++++++++
 src/components/layout/layout.component.ts | 17 ++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/pages/components/layout.md b/docs/pages/components/layout.md
index f2277dfbb..a20678971 100644
--- a/docs/pages/components/layout.md
+++ b/docs/pages/components/layout.md
@@ -29,6 +29,14 @@ Reasons why you may want to disable sticky:
 1. For `aside` / `menu` or blog sites sometimes this space is used for ads based on how far down a user scrolls.
 1. For `banner`, `header`, `sub-header` it can cause a lot of clutter on the screen and you may only want to show certain elements are the user scrolls.
 
+## Toggle navigation
+
+Toggling navigation can be done in a number of ways.
+
+1. `<wa-layout><button data-navigation-toggle></button></wa-layout>` - The button with `data-navigation-toggle` must be inside the `<wa-layout>` component.
+1. `<wa-layout nav-state="open"></wa-layout>` -
+1. `document.querySelector("button").addEventListener("click", () => document.querySelector("wa-layout").toggleNavigation())`
+
 ```html:preview
 <style>
   wa-layout::part(header) {
diff --git a/src/components/layout/layout.component.ts b/src/components/layout/layout.component.ts
index d96fa79d0..e3a8741ff 100644
--- a/src/components/layout/layout.component.ts
+++ b/src/components/layout/layout.component.ts
@@ -7,6 +7,7 @@ import WaDrawer from '../drawer/drawer.component.js';
 import WaVisuallyHidden from '../visually-hidden/visually-hidden.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import { live } from 'lit/directives/live.js';
 
 /**
  * @summary
@@ -71,6 +72,11 @@ export default class WaLayout extends WebAwesomeElement {
    */
   @property({ attribute: 'view', reflect: true }) view: 'mobile' | 'desktop' = 'mobile';
 
+  /**
+   * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
+   */
+  @property({ attribute: 'nav-open', reflect: true, type: Boolean  }) navOpen = false;
+
   /**
    * At what "px" to hide the "menu" slot and collapse into a hamburger button
    */
@@ -172,23 +178,21 @@ export default class WaLayout extends WebAwesomeElement {
    * Shows the mobile navigation drawer
    */
   showNavigation() {
-    this.navigationDrawer?.show();
+    this.navOpen = true
   }
 
   /**
    * Hides the mobile navigation drawer
    */
   hideNavigation() {
-    this.navigationDrawer?.hide();
+    this.navOpen = false
   }
 
   /**
    * Toggles the mobile navigation drawer
    */
   toggleNavigation() {
-    if (this.navigationDrawer) {
-      this.navigationDrawer.open = !this.navigationDrawer.open;
-    }
+    this.navOpen = !this.navOpen
   }
 
   render() {
@@ -259,6 +263,9 @@ export default class WaLayout extends WebAwesomeElement {
       <wa-drawer
         placement=${this.navigationPlacement}
         part="drawer"
+        ?open=${live(this.navOpen)}
+        @wa-after-show=${() => this.navOpen = this.navigationDrawer.open}
+        @wa-after-hide=${() => this.navOpen = this.navigationDrawer.open}
         exportparts="
           panel:drawer__panel
           base:drawer__base