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 { Link } from "react-router-dom"
|
||||||
import styled from "styled-components"
|
import styled from "styled-components"
|
||||||
|
|
||||||
import Sidebar from "../Sidebar"
|
|
||||||
import Buttons from "./Buttons"
|
import Buttons from "./Buttons"
|
||||||
import Nav from "./Nav"
|
|
||||||
import ReadProgress from "./ReadProgress"
|
import ReadProgress from "./ReadProgress"
|
||||||
|
|
||||||
const StyledHeader = styled.header`
|
const StyledHeader = styled.header`
|
||||||
|
|
@ -54,9 +52,7 @@ const Header: FC = () => {
|
||||||
alt="logo"
|
alt="logo"
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
<Nav />
|
|
||||||
<Buttons />
|
<Buttons />
|
||||||
<Sidebar />
|
|
||||||
</Container>
|
</Container>
|
||||||
<ReadProgress />
|
<ReadProgress />
|
||||||
</StyledHeader>
|
</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