menu toggle icon 표출

src/@core/layouts/components/menu/vertical-menu/VerticalMenuHeader.js

@@ -1,21 +1,27 @@
 // ** React Imports
-import { useEffect } from 'react'
-import { NavLink } from 'react-router-dom'
+import { useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
 
 // ** Third Party Components
-import { Disc, X, Circle } from 'react-feather'
+import { Disc, X, Circle } from 'react-feather';
 
 // ** Config
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 const VerticalMenuHeader = props => {
   // ** Props
-  const { menuCollapsed, setMenuCollapsed, setMenuVisibility, setGroupOpen, menuHover } = props
+  const {
+    menuCollapsed,
+    setMenuCollapsed,
+    setMenuVisibility,
+    setGroupOpen,
+    menuHover
+  } = props;
 
   // ** Reset open group
   useEffect(() => {
-    if (!menuHover && menuCollapsed) setGroupOpen([])
-  }, [menuHover, menuCollapsed])
+    if (!menuHover && menuCollapsed) setGroupOpen([]);
+  }, [menuHover, menuCollapsed]);
 
   // ** Menu toggler component
   const Toggler = () => {
@@ -27,7 +33,7 @@ const VerticalMenuHeader = props => {
           className='text-primary toggle-icon d-none d-xl-block'
           onClick={() => setMenuCollapsed(true)}
         />
-      )
+      );
     } else {
       return (
         <Circle
@@ -36,15 +42,15 @@ const VerticalMenuHeader = props => {
           className='text-primary toggle-icon d-none d-xl-block'
           onClick={() => setMenuCollapsed(false)}
         />
-      )
+      );
     }
-  }
+  };
 
   return (
     <div className='navbar-header'>
       <ul className='nav navbar-nav flex-row'>
         <li className='nav-item mr-auto'>
-          <NavLink to='/' className='navbar-brand'>
+          <NavLink to='/' className='navbar-brand' style={{ marginRight: 0 }}>
             <span className='brand-logo'>
               <img src={themeConfig.app.appLogoImage} alt='logo' />
             </span>
@@ -54,12 +60,16 @@ const VerticalMenuHeader = props => {
         <li className='nav-item nav-toggle'>
           <div className='nav-link modern-nav-toggle cursor-pointer'>
             <Toggler />
-            <X onClick={() => setMenuVisibility(false)} className='toggle-icon icon-x d-block d-xl-none' size={20} />
+            <X
+              onClick={() => setMenuVisibility(false)}
+              className='toggle-icon icon-x d-block d-xl-none'
+              size={20}
+            />
           </div>
         </li>
       </ul>
     </div>
-  )
-}
+  );
+};
 
-export default VerticalMenuHeader
+export default VerticalMenuHeader;