changed class componenets to functional components and cleaned code

source/src/components/SubMenu.tsx

@@ -1,9 +1,13 @@
-import React from "react"
+/**
+ * @file Submenu item for sidebar
+ */
+
+import { useState } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
 
-import theming from "../theming"
 import { Item } from "../data/NavbarData"
+import theming from "../theming"
 
 const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
@@ -38,60 +42,47 @@ const DropdownLink = styled(Link)`
 	}
 `
 
-interface SubMenuProps {
+interface Props {
 	item: Item
 }
 
-interface SubMenuState {
-	isSubNavOpen: boolean
-}
+const SubMenu = (props: Props) => {
+	const [isSubNavOpen, setSubNavOpen] = useState(false)
 
-export default class SubMenu extends React.Component<
-	SubMenuProps,
-	SubMenuState
-> {
-	constructor(props: SubMenuProps) {
-		super(props)
-		this.state = {
-			isSubNavOpen: false,
-		}
+	const handleSidebarLinkClick = () => {
+		if (props.item.subNav) setSubNavOpen((prev) => !prev)
 	}
 
-	showSubNav = () => this.setState({ isSubNavOpen: !this.state.isSubNavOpen })
+	return (
+		<>
+			<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
+				<div>
+					{props.item.icon}
+					<SidebarLabel>{props.item.title}</SidebarLabel>
+				</div>
+				<div>
+					{props.item.subNav && isSubNavOpen
+						? props.item.iconOpened
+						: props.item.subNav
+						? props.item.iconClosed
+						: null}
+				</div>
+			</SidebarLink>
 
-	render() {
-		return (
-			<>
-				<SidebarLink
-					to={this.props.item.path}
-					onClick={this.props.item.subNav && this.showSubNav}
-				>
-					<div>
-						{this.props.item.icon}
-						<SidebarLabel>{this.props.item.title}</SidebarLabel>
-					</div>
-					<div>
-						{this.props.item.subNav && this.state.isSubNavOpen
-							? this.props.item.iconOpened
-							: this.props.item.subNav
-							? this.props.item.iconClosed
-							: null}
-					</div>
-				</SidebarLink>
-
-				{/* not used as of the moment */}
-				{this.state.isSubNavOpen && // check if subNav is open
-					this.props.item.subNav && // check if subNav exists in that item
-					this.props.item.subNav.map((item, index) => {
-						// shows all items in subNav
-						return (
-							<DropdownLink to={item.path} key={index}>
-								{item.icon}
-								<SidebarLabel>{item.title}</SidebarLabel>
-							</DropdownLink>
-						)
-					})}
-			</>
-		)
-	}
+			{/* 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 (
+						<DropdownLink to={item.path} key={index}>
+							{item.icon}
+							<SidebarLabel>{item.title}</SidebarLabel>
+						</DropdownLink>
+					)
+				})}
+		</>
+	)
 }
+
+export default SubMenu