Fix: Layout menu mobile

guillotinaweb · Mar 3, 2024 · dbb68c6 · dbb68c6
1 parent 7df3300
commit dbb68c6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+0.28.1
+------
+- Fix: Layout menu mobile
+
+0.28.0
+------
+- Feat: Update to typescript
+
 0.27.0
 ------
 - Feat: Add label to input list

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.28.0",
+  "version": "0.28.1",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"

diff --git a/src/guillo-gmi/components/layout.tsx b/src/guillo-gmi/components/layout.tsx
@@ -1,12 +1,15 @@
+import { useState } from 'react'
 import { Auth } from '../lib/auth'
 import { Icon } from './ui/icon'
+import { classnames } from '../lib/helpers'
 
 interface Props {
   children: React.ReactNode
   onLogout: () => void
   auth: Auth
 }
 export function Layout({ children, onLogout, auth }: Props) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
   const doLogout = () => {
     auth.logout()
     onLogout()
@@ -16,24 +19,32 @@ export function Layout({ children, onLogout, auth }: Props) {
     <>
       <header>
         <nav className="navbar" role="navigation" aria-label="main navigation">
-          <div className="navbar-brand">
+          <div className="navbar-brand" style={{ alignItems: 'center' }}>
             <a className="navbar-item" href="/">
               <img src="/logo.svg" alt="Guillotina logo" height="80" />
             </a>
-            <a
+            <div
               id="burger"
               role="button"
-              className="navbar-burger burger"
+              className={classnames([
+                'navbar-burger',
+                'burger',
+                isMenuOpen && 'is-active',
+              ])}
               aria-label="menu"
               aria-expanded="false"
               data-target="navbarmenu"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
             >
               <span aria-hidden="true"></span>
               <span aria-hidden="true"></span>
               <span aria-hidden="true"></span>
-            </a>
+            </div>
           </div>
-          <div id="navbarmenu" className="navbar-menu">
+          <div
+            id="navbarmenu"
+            className={classnames(['navbar-menu', isMenuOpen && 'is-active'])}
+          >
             <div className="navbar-start"></div>
             <div className="navbar-end">
               <div className="navbar-item">