refactor: move llogic for handling the nav opening / closing out of styleguide.js

Author: bolt-bot

packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js

@@ -12,15 +12,26 @@ class Header extends BaseComponent {
   constructor(self) {
     self = super(self);
     this.useShadow = false;
+    this.toggleNav = this.toggleNav.bind(this);
     return self;
   }
 
   _stateChanged(state) {}
 
+  toggleNav() {
+    const navTarget = this.querySelector('.pl-js-nav-target');
+    navTarget.classList.toggle('pl-is-active'); // @todo: refactor to have this add based on the component's state
+  }
+
   render() {
     return (
       <header class="pl-c-header" role="banner">
-        <button class="pl-c-header__nav-toggle pl-js-nav-trigger">Menu</button>
+        <button
+          class="pl-c-header__nav-toggle pl-js-nav-trigger"
+          onClick={this.toggleNav}
+        >
+          Menu
+        </button>
         <nav
           class="pl-c-nav pl-js-nav-target pl-js-nav-container"
           role="navigation"

packages/uikit-workshop/src/scripts/components/styleguide.js

@@ -55,11 +55,6 @@ import { urlHandler, DataSaver, patternName } from '../utils';
     }
   });
 
-  // Nav menu button on small screens
-  $('.pl-js-nav-trigger').on('click', function(e) {
-    e.preventDefault();
-    $('.pl-js-nav-target').toggleClass('pl-is-active');
-  });
 
   // Accordion dropdown
   $('.pl-js-acc-handle').on('click', function(e) {