diff --git a/src/containers/MenuItem.js b/src/containers/MenuItem.js index 5f5f038..5fd9e2a 100644 --- a/src/containers/MenuItem.js +++ b/src/containers/MenuItem.js @@ -1,28 +1,33 @@ import React, { useState } from 'react'; - const MenuItem = ({ label, icon, onClick, isActive, children, link }) => { const [isOpen, setIsOpen] = useState(false); - const handleClick = () => { + const handleParentClick = (e) => { if (children) { + e.stopPropagation(); setIsOpen(!isOpen); - } else { + } + }; + + const handleChildClick = (e) => { + if (!children) { + e.stopPropagation(); onClick(); } }; return ( - -
  • -
    - {icon} -

    {label}

    -
    -
    - {isOpen && children} -
    -
  • +
    +
  • +
    + {icon} +

    {label}

    +
    +
    + {isOpen && children} +
    +
  • ); }; diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js index 19840dd..0a91fa0 100644 --- a/src/containers/TheSidebar.js +++ b/src/containers/TheSidebar.js @@ -24,8 +24,6 @@ import "../scss/sidebar.scss"; const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => { const [currentElement, setCurrentElement] = useState(window.location.hash.substring(2)); - const [openSubmenu, setOpenSubmenu] = useState(null); - const itemClicked = (link) => { if (isMobile) { @@ -34,13 +32,7 @@ const TheSidebar = ({ showSidebar, setShowSidebar, isMobile }) => { setCurrentElement(link); } - const toggleSubmenu = (submenu) => { - if (openSubmenu === submenu) { - setOpenSubmenu(null); - } else { - setOpenSubmenu(submenu); - } - } + const menuItems = [ { label: 'Groups', icon: , link: '#' },