code quality and css update

- simplified navbar styling
- more readable code structure

source/src/components/Navbar.tsx

@@ -1,7 +1,6 @@
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 import ReactTooltip from "react-tooltip"
-import { isMobile } from "react-device-detect"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
@@ -36,8 +35,7 @@ const StyledContainer = styled.div`
 	margin: 0 auto;
 	align-items: center;
 	display: flex;
-	height: 2rem;
+	height: 4rem;
-	padding: 1rem;
 
 	/* account for 20px scrollbar width */
 	@media only screen and (min-width: calc(${theming.size
@@ -51,53 +49,70 @@ const StyledContainer = styled.div`
 `
 
 const StyledNavLinks = styled.div`
+	display: flex;
+	height: 100%;
+
 	@media only screen and (max-width: ${theming.size.screen_size1}) {
 		display: none;
 	}
 `
 
 const StyledImg = styled.img`
-	height: 2rem;
+	height: 2.5rem;
+
+	display: block;
 	margin: 1rem;
 `
 
-const StyledLink = styled(Link)`
+const StyledLink = styled.div`
 	${theming.styles.navbarButtonStyle}
-	margin: 0 0.2rem 0 0.2rem;
 `
 
+const SearchButton = () => {
+	return (
+		<>
+			<div style={{ height: "100%" }}>
+				<Link
+					data-tip
+					data-for="search"
+					to={`${process.env.PUBLIC_URL}/search`}
+				>
+					<StyledLink>
+						<FontAwesomeIcon icon={faSearch} />
+					</StyledLink>
+				</Link>
+			</div>
+			<ReactTooltip id="search" type="dark" effect="solid">
+				<span>Search</span>
+			</ReactTooltip>
+		</>
+	)
+}
+
 const Navbar = () => {
 	return (
 		<StyledNav>
 			<StyledContainer>
+				{/* icon */}
+
 				<Link to="/">
 					<StyledImg src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"} />
 				</Link>
 
+				{/* nav links */}
+
 				<StyledNavLinks>
 					{NavbarData.map((item, index) => (
-						<StyledLink key={index} to={item.path}>
+						<Link key={index} to={item.path}>
-							{item.title}
+							<StyledLink>{item.title}</StyledLink>
-						</StyledLink>
+						</Link>
 					))}
 				</StyledNavLinks>
 
+				{/* right buttons */}
+
 				<ThemeToggleButton />
-
+				<SearchButton />
-				<StyledLink
-					data-tip
-					data-for="search"
-					to={`${process.env.PUBLIC_URL}/search`}
-				>
-					<FontAwesomeIcon icon={faSearch} />
-				</StyledLink>
-
-				{!isMobile && (
-					<ReactTooltip id="search" type="dark" effect="solid">
-						<span>Search</span>
-					</ReactTooltip>
-				)}
-
 				<Sidebar />
 			</StyledContainer>
 			<ReadProgress />

source/src/components/Sidebar.tsx

@@ -21,17 +21,20 @@ const CommonSidebarToggleButtonStyle = css`
 	}
 `
 
-const StyledToggleSidebarButton = styled.div`
+const SidebarOpenButton = styled.div`
 	${CommonSidebarToggleButtonStyle}
 `
 
-const StyledToggleSidebarButton2 = styled.div`
+const SidebarCloseButton = styled.div`
 	${CommonSidebarToggleButtonStyle}
-	border-radius: 0;
-	margin: auto;
 	width: 90%;
-	height: 2rem;
+	height: 4rem;
 	font-size: 1.1rem;
+
+	svg {
+		margin-top: 0.2rem;
+		margin-right: 0.5rem;
+	}
 `
 
 const StyledOverlay = styled.div<{ isSidebarOpen: boolean }>`
@@ -89,24 +92,25 @@ const Sidebar = () => {
 		<>
 			<StyledOverlay isSidebarOpen={isSidebarOpen} onClick={toggleSidebar} />
 
-			<StyledToggleSidebarButton
+			<SidebarOpenButton data-tip data-for="sidebar" onClick={toggleSidebar}>
-				data-tip
-				data-for="sidebar"
-				onClick={toggleSidebar}
-			>
 				<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
 				{!isMobile && (
 					<ReactTooltip id="sidebar" type="dark" effect="solid">
 						<span>open sidebar</span>
 					</ReactTooltip>
 				)}
-			</StyledToggleSidebarButton>
+			</SidebarOpenButton>
 
 			<SidebarNav isSidebarOpen={isSidebarOpen}>
 				<SidebarWrap>
-					<StyledToggleSidebarButton2 onClick={toggleSidebar}>
+					{/* close sidebar button */}
-						<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon> Close
+
-					</StyledToggleSidebarButton2>
+					<SidebarCloseButton onClick={toggleSidebar}>
+						<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>Close
+					</SidebarCloseButton>
+
+					{/* sidebar items */}
+
 					{NavbarData.map((item: Item, index) => {
 						return <SubMenu item={item} key={index} />
 					})}

source/src/components/SubMenu.tsx

@@ -23,7 +23,7 @@ const SidebarLink = styled(Link)`
 `
 
 const SidebarLabel = styled.span`
-	margin-left: 16px;
+	margin-left: 1rem;
 `
 
 interface Props {

source/src/styles/theming.ts

@@ -61,13 +61,26 @@ const theming = {
 			}
 		`,
 		navbarButtonStyle: css`
-			cursor: pointer; /* so it can be applies to divs too */
+			/* style */
-			font-size: 1rem;
+
-			border-radius: 0.5rem;
+			display: flex;
-			float: left;
+			cursor: pointer;
-			padding: 14px 16px;
+			align-items: center;
+			justify-content: center;
+
+			/* size */
+
+			height: 100%;
+			min-width: 3rem;
+			margin: 0;
+			padding: 0 1rem 0 1rem;
+
+			/* text */
+
 			text-decoration: none;
-			transition: transform 0.1s linear;
+
+			/* color */
+
 			color: ${(props) =>
 				theme(props.theme.currentTheme, {
 					light: "black",
@@ -79,10 +92,13 @@ const theming = {
 					dark: "#202225",
 				})};
 
+			/* animation */
+
+			transition: transform 0.1s linear;
 			&:hover {
 				background-color: ${(props) =>
 					theme(props.theme.currentTheme, {
-						light: "lightgrey",
+						light: "#EEEEEE",
 						dark: "#36393F",
 					})};
 			}