refactor(blog): remove nav links and sidebar
This commit is contained in:
parent
a4958ae323
commit
c0565c83c0
6 changed files with 0 additions and 280 deletions
|
|
@ -2,9 +2,7 @@ import { type FC } from "react"
|
|||
import { Link } from "react-router-dom"
|
||||
import styled from "styled-components"
|
||||
|
||||
import Sidebar from "../Sidebar"
|
||||
import Buttons from "./Buttons"
|
||||
import Nav from "./Nav"
|
||||
import ReadProgress from "./ReadProgress"
|
||||
|
||||
const StyledHeader = styled.header`
|
||||
|
|
@ -54,9 +52,7 @@ const Header: FC = () => {
|
|||
alt="logo"
|
||||
/>
|
||||
</Link>
|
||||
<Nav />
|
||||
<Buttons />
|
||||
<Sidebar />
|
||||
</Container>
|
||||
<ReadProgress />
|
||||
</StyledHeader>
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
import { type FC } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import styled from "styled-components"
|
||||
|
||||
import NavbarData from "../../data/NavbarData"
|
||||
import HeaderButton from "./HeaderButton"
|
||||
|
||||
const StyledNav = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
@media only screen and (max-width: ${({ theme }) =>
|
||||
theme.theme.maxDisplayWidth.mobile}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const Nav: FC = () => {
|
||||
return (
|
||||
<StyledNav>
|
||||
{NavbarData.map(({ path, title }, index) => {
|
||||
return path.at(0) === "/" ? (
|
||||
<Link key={index} to={path}>
|
||||
<HeaderButton>{title}</HeaderButton>
|
||||
</Link>
|
||||
) : (
|
||||
<a key={index} target="_blank" href={path} rel="noreferrer">
|
||||
<HeaderButton>{title}</HeaderButton>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</StyledNav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Nav
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { useCallback, useState } from "react"
|
||||
import { isMobile } from "react-device-detect"
|
||||
import ReactTooltip from "react-tooltip"
|
||||
import styled from "styled-components"
|
||||
|
||||
import NavbarData from "../../data/NavbarData"
|
||||
import { HeaderButtonCSS } from "../Header/HeaderButton"
|
||||
import SubMenu from "./SubMenu"
|
||||
|
||||
const SidebarOpenButton = styled.div`
|
||||
${HeaderButtonCSS}
|
||||
|
||||
@media only screen and (min-width: ${({ theme }) =>
|
||||
theme.theme.maxDisplayWidth.mobile}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const SidebarCloseButton = styled.div`
|
||||
${HeaderButtonCSS}
|
||||
height: 4rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
svg {
|
||||
margin-top: 0.2rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledOverlay = styled.div<{ isSidebarOpen: boolean }>`
|
||||
display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
transition-property: opacity;
|
||||
background-color: rgba(0, 0, 0, 25%);
|
||||
|
||||
* {
|
||||
overflow: scroll;
|
||||
}
|
||||
`
|
||||
|
||||
const SidebarNav = styled.nav<{ isSidebarOpen: boolean }>`
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
|
||||
transition: 350ms;
|
||||
z-index: 30;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: ${({ theme }) =>
|
||||
theme.theme.component.header.color.background};
|
||||
color: ${({ theme }) => theme.theme.component.header.color.text};
|
||||
`
|
||||
|
||||
const SidebarWrap = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const Sidebar = () => {
|
||||
const [isSidebarOpen, setSidebarOpen] = useState(false)
|
||||
const toggleSidebar = useCallback(() => {
|
||||
setSidebarOpen((prev) => !prev)
|
||||
document.body.style.overflow = isSidebarOpen ? "" : "hidden"
|
||||
}, [isSidebarOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledOverlay
|
||||
isSidebarOpen={isSidebarOpen}
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
|
||||
<SidebarOpenButton
|
||||
data-tip
|
||||
data-for="sidebar"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
|
||||
{!isMobile && (
|
||||
<ReactTooltip id="sidebar" type="dark" effect="solid">
|
||||
<span>open sidebar</span>
|
||||
</ReactTooltip>
|
||||
)}
|
||||
</SidebarOpenButton>
|
||||
|
||||
<SidebarNav isSidebarOpen={isSidebarOpen}>
|
||||
<SidebarWrap>
|
||||
{/* close sidebar button */}
|
||||
|
||||
<SidebarCloseButton onClick={toggleSidebar}>
|
||||
<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>Close
|
||||
</SidebarCloseButton>
|
||||
|
||||
{/* sidebar items */}
|
||||
|
||||
{NavbarData.map((item, index) => {
|
||||
return (
|
||||
<SubMenu
|
||||
onClick={toggleSidebar}
|
||||
item={item}
|
||||
key={index}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</SidebarWrap>
|
||||
</SidebarNav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/**
|
||||
* @file Submenu item for sidebar
|
||||
*/
|
||||
|
||||
import { useCallback, useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import styled, { css } from "styled-components"
|
||||
|
||||
import type { Item } from "../../data/NavbarData"
|
||||
import button from "../../styles/button"
|
||||
|
||||
const sharedStyle = css`
|
||||
${button};
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
justify-content: space-between;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
list-style: none;
|
||||
|
||||
svg {
|
||||
scale: 1.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
`
|
||||
|
||||
const SidebarLink = styled(Link)`
|
||||
${sharedStyle}
|
||||
`
|
||||
|
||||
const SidebarAnchor = styled.a`
|
||||
${sharedStyle}
|
||||
`
|
||||
|
||||
const SidebarLabel = styled.span`
|
||||
margin-left: 1rem;
|
||||
`
|
||||
|
||||
interface Props {
|
||||
item: Item
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const SubMenu = ({ item, onClick }: Props) => {
|
||||
const { path, icon, title } = item
|
||||
const [isSubNavOpen, setSubNavOpen] = useState(false)
|
||||
const handleSidebarLinkClick = useCallback(() => {
|
||||
onClick()
|
||||
setSubNavOpen((prev) => !prev)
|
||||
}, [isSubNavOpen])
|
||||
|
||||
if (path.at(0) == "/") {
|
||||
return (
|
||||
<SidebarLink to={path} onClick={handleSidebarLinkClick}>
|
||||
<div>
|
||||
{icon}
|
||||
<SidebarLabel>{title}</SidebarLabel>
|
||||
</div>
|
||||
</SidebarLink>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarAnchor
|
||||
target="_blank"
|
||||
href={path}
|
||||
onClick={handleSidebarLinkClick}
|
||||
>
|
||||
<div>
|
||||
{icon}
|
||||
<SidebarLabel>{title}</SidebarLabel>
|
||||
</div>
|
||||
</SidebarAnchor>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubMenu
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import Sidebar from "./Sidebar"
|
||||
|
||||
export default Sidebar
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import {
|
||||
faFileLines,
|
||||
faUser,
|
||||
faUserTie,
|
||||
} from "@fortawesome/free-solid-svg-icons"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
|
||||
// item from sidebar data
|
||||
export type Item = {
|
||||
path: string
|
||||
icon: JSX.Element
|
||||
title: string
|
||||
}
|
||||
|
||||
const NavbarData: Item[] = [
|
||||
{
|
||||
title: "About",
|
||||
path: "https://developomp.com",
|
||||
icon: <FontAwesomeIcon icon={faUser} />,
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
path: "https://portfolio.developomp.com",
|
||||
icon: <FontAwesomeIcon icon={faFileLines} />,
|
||||
},
|
||||
{
|
||||
title: "Resume",
|
||||
path: "/resume",
|
||||
icon: <FontAwesomeIcon icon={faUserTie} />,
|
||||
},
|
||||
]
|
||||
|
||||
export default NavbarData
|
||||
Loading…
Add table
Add a link
Reference in a new issue