diff --git a/source/src/components/SubMenu.tsx b/source/src/components/SubMenu.tsx index e63a216..64e7831 100644 --- a/source/src/components/SubMenu.tsx +++ b/source/src/components/SubMenu.tsx @@ -2,7 +2,7 @@ * @file Submenu item for sidebar */ -import { useState } from "react" +import { useCallback, useState } from "react" import { Link } from "react-router-dom" import styled from "styled-components" @@ -26,32 +26,15 @@ const SidebarLabel = styled.span` margin-left: 16px; ` -const DropdownLink = styled(Link)` - background: #414757; - height: 60px; - padding-left: 3rem; - display: flex; - align-items: center; - text-decoration: none; - color: #f5f5f5; - font-size: 18px; - - &:hover { - background: #632ce4; - cursor: pointer; - } -` - interface Props { item: Item } const SubMenu = (props: Props) => { const [isSubNavOpen, setSubNavOpen] = useState(false) - - const handleSidebarLinkClick = () => { - if (props.item.subNav) setSubNavOpen((prev) => !prev) - } + const handleSidebarLinkClick = useCallback(() => { + setSubNavOpen((prev) => !prev) + }, [isSubNavOpen]) return ( <> @@ -60,27 +43,7 @@ const SubMenu = (props: Props) => { {props.item.icon} {props.item.title} -
- {props.item.subNav && isSubNavOpen - ? props.item.iconOpened - : props.item.subNav - ? props.item.iconClosed - : undefined} -
- - {/* not used as of the moment */} - {isSubNavOpen && // check if subNav is open - props.item.subNav && // check if subNav exists in that item - props.item.subNav.map((item, index) => { - // shows all items in subNav - return ( - - {item.icon} - {item.title} - - ) - })} ) } diff --git a/source/src/data/NavbarData.tsx b/source/src/data/NavbarData.tsx index a20f4c9..9cbd534 100644 --- a/source/src/data/NavbarData.tsx +++ b/source/src/data/NavbarData.tsx @@ -8,11 +8,8 @@ import { // item from sidebar data export type Item = { path: string - subNav?: Array icon: JSX.Element title: string - iconOpened?: JSX.Element - iconClosed?: JSX.Element } const NavbarData: Array = [