Dropdown and nav menu toggle improvements

Partly addresses issues in #57 * Dropdown menus in the nav menu on mobile now display correctly. * The nav menu no longer requires JavaScript to be enabled to work and uses a pure CSS solution. I may prototype to extend this to other components and see if it’s a pull request the Reactstrap folks would be interested in.
iaincollins · Jan 6, 2018 · edfbfe5 · edfbfe5
1 parent d64b830
commit edfbfe5
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 36 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -28,16 +28,9 @@ export default class extends React.Component {
       isOpen: false,
       modal: false
     }
-    this.toggleNavbar = this.toggleNavbar.bind(this)
     this.toggleModal = this.toggleModal.bind(this)
   }
 
-  toggleNavbar() {
-    this.setState({
-      isOpen: !this.state.isOpen
-    })
-  }
-
   toggleModal(e) {
     if (e) e.preventDefault()
 
@@ -65,34 +58,66 @@ export default class extends React.Component {
               <span className="icon ion-md-home mr-1"></span> {Package.name}
             </NavbarBrand>
           </Link>
-          <NavbarToggler onClick={this.toggleNavbar}/>
-          <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav navbar>
-              <UncontrolledDropdown nav inNavbar>
-                <DropdownToggle nav caret>
-                  Examples
-                </DropdownToggle>
-                <DropdownMenu>
-                  <Link prefetch href="/examples/layout">
-                    <a href="/examples/layout" className="dropdown-item">Layout</a>
-                  </Link>
-                  <Link prefetch href="/examples/styling">
-                    <a href="/examples" className="dropdown-item">Styling</a>
-                  </Link>
-                  <Link prefetch href="/examples/async">
-                    <a href="/examples/async" className="dropdown-item">Async Data</a>
-                  </Link>
-                  <Link prefetch href="/examples/routing">
-                    <a href="/examples/routing" className="dropdown-item">Routing</a>
-                  </Link>
-                  <Link prefetch href="/examples/authentication">
-                    <a href="/examples/authentication" className="dropdown-item">Authentication</a>
-                  </Link>
-                </DropdownMenu>
-              </UncontrolledDropdown>
-            </Nav>
-            <UserMenu session={this.props.session} toggleModal={this.toggleModal}/>
-          </Collapse>
+          <style jsx global>{`
+            /* This is a pure-CSS solution for navbar menu toggles */
+            .menu-toggle-label {
+              font-size: 1.5em;
+              margin: 0 5px 0 0;
+            }
+            #navbar-menu,
+            #navbar-menu-toggle {
+              display: none;
+              clear: both;
+              width: 100%;
+            }
+            #navbar-menu-toggle:checked + #navbar-menu {
+              display: block;
+            }
+            #navbar-menu .dropdown {
+              display: block;
+            }
+            @media (min-width: 768px) {
+              .menu-toggle-label {
+                display: none;
+              }
+              #navbar-menu {
+                display: block;
+              } 
+            }
+          `}</style>
+          <label className="menu-toggle-label" for="navbar-menu-toggle">
+            <span className="con ion-md-menu"></span>
+          </label>
+          <input type="checkbox" id="navbar-menu-toggle"/>
+          <div id="navbar-menu">
+            <Collapse isOpen={true} navbar>
+              <Nav navbar>
+                <UncontrolledDropdown nav inNavbar>
+                  <DropdownToggle nav caret>
+                    Examples
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <Link prefetch href="/examples/layout">
+                      <a href="/examples/layout" className="dropdown-item">Layout</a>
+                    </Link>
+                    <Link prefetch href="/examples/styling">
+                      <a href="/examples" className="dropdown-item">Styling</a>
+                    </Link>
+                    <Link prefetch href="/examples/async">
+                      <a href="/examples/async" className="dropdown-item">Async Data</a>
+                    </Link>
+                    <Link prefetch href="/examples/routing">
+                      <a href="/examples/routing" className="dropdown-item">Routing</a>
+                    </Link>
+                    <Link prefetch href="/examples/authentication">
+                      <a href="/examples/authentication" className="dropdown-item">Authentication</a>
+                    </Link>
+                  </DropdownMenu>
+                </UncontrolledDropdown>
+              </Nav>
+              <UserMenu session={this.props.session} toggleModal={this.toggleModal}/>
+            </Collapse>
+          </div>
         </Navbar>
         <MainBody navmenu={this.props.navmenu} fluid={this.props.fluid} container={this.props.container}>
           {this.props.children}

diff --git a/css/index.scss b/css/index.scss
@@ -27,4 +27,21 @@ pre {
 .navbar .dropdown-item,
 .navbar button {
   font-size: 18px;
+}
+
+/**
+ * This is a fix for Reactstrap 5.0.0-alpha.4 not displaying 
+ * menus correctly.
+ **/
+.navbar .dropdown {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .navbar .dropdown-menu {
+    position: relative !important;
+    display: block !important;
+    transform: none !important;
+    border: 0px;
+  }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-starter",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "A starter Next.js project with email and oAuth authentication",
   "author": "Iain Collins <me@iaincollins.com>",
   "license": "ISC",