pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

changed class componenets to functional components and cleaned code

Browse source
This commit is contained in:
Kim, Jimin 2021-12-14 22:43:30 +09:00
parent c631c16711
commit 49fd2b2900
8 changed files with 200 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

90
source/src/components/Navbar.tsx
View file

@ -1,17 +1,17 @@
import React from "react"
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"
import styled from "styled-components"
import ReactTooltip from "react-tooltip"
import { Link } from "react-router-dom"
import { isMobile } from "react-device-detect"
import ThemeToggleButton from "./ThemeToggleButton"
import Sidebar from "./Sidebar"
import theming from "../theming"
import NavbarData from "../data/NavbarData"
import Sidebar from "./Sidebar"
import ThemeToggleButton from "./ThemeToggleButton"
const StyledNav = styled.nav`
/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
z-index: 9999;
@ -65,44 +65,44 @@ const StyledLink = styled(Link)`
margin: 0 0.2rem 0 0.2rem;
`
export default class Navbar extends React.Component {
render() {
return (
<StyledNav>
<StyledContainer>
<Link to="/">
<StyledImg
src={
process.env.PUBLIC_URL + "/icon/icon_circle.svg"
}
/>
</Link>
<StyledNavLinks>
{NavbarData.map((item, index) => (
<StyledLink key={index} to={item.path}>
{item.title}
</StyledLink>
))}
</StyledNavLinks>
const Navbar = () => {
return (
<StyledNav>
<StyledContainer>
<Link to="/">
<StyledImg
src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
/>
</Link>
<ThemeToggleButton />
<StyledNavLinks>
{NavbarData.map((item, index) => (
<StyledLink key={index} to={item.path}>
{item.title}
</StyledLink>
))}
</StyledNavLinks>
<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>
)}
<ThemeToggleButton />
<Sidebar />
</StyledContainer>
</StyledNav>
)
}
<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>
</StyledNav>
)
}
export default Navbar