Skip to content

Commit

Permalink
#24 fix: header navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
chraebsli authored Feb 18, 2024
1 parent b46e90e commit 0f85db6
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 27 deletions.
19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"react-icons": "^4.4.0",
"react-router-dom": "^6.12.0",
"react-scripts": "^5.0.1",
"react-scroll": "^1.9.0",
"sass": "^1.54.9",
"typescript": "^4.8.3"
},
Expand Down
56 changes: 42 additions & 14 deletions src/components/common/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import { LanguageSwitcher } from "./LanguageSwitcher";
import { useTranslation } from "react-i18next";
import { Image } from "./Text";
import { Sections } from "../../type/page";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { Link } from "react-scroll";

const sections = [
{key: "welcome", href: `#${Sections.Welcome}`},
{key: "about", href: `#${Sections.About}`},
{key: "experience", href: `#${Sections.Experience}`},
{key: "skills", href: `#${Sections.Skills}`},
{key: "stats", href: `#${Sections.Stats}`},
{key: "social", href: `#${Sections.Social}`},
{key: Sections.About},
{key: Sections.Experience},
{key: Sections.Skills},
{key: Sections.Stats},
{key: Sections.Social},
];

type Props = {
Expand All @@ -22,14 +24,16 @@ type Props = {
export default function Header({toggleTheme, checked}: Props) {
const {t} = useTranslation("components");
return (
<AppBar position="fixed" enableColorOnDark>
<AppBar position="fixed" enableColorOnDark variant="outlined">
<Container>
<Navbar collapseOnSelect expand="md" bg="none" variant="dark">
<Navbar.Brand href="#">
<Image src="/assets/logo-white-transparent.svg" alt="logo" width={50} height={50} />
<Typography component="span" variant="h6" sx={{marginLeft: "1rem"}}>
{t("header.title")}
</Typography>
<Navbar.Brand>
<NavLink href="root">
<Image src="/assets/logo-white-transparent.svg" alt="logo" width={50} height={50} />
<Typography component="span" variant="h6" sx={{marginLeft: "1rem"}}>
{t("header.title")}
</Typography>
</NavLink>
</Navbar.Brand>

<Navbar.Toggle aria-controls="header-nav" />
Expand All @@ -38,9 +42,9 @@ export default function Header({toggleTheme, checked}: Props) {
<Nav className="me-auto" />
<Nav>
{sections.map(page => (
<Nav.Link key={page.key} href={page.href}>
<NavLink href={page.key} key={page.key}>
{t(`header.links.${page.key}`)}
</Nav.Link>
</NavLink>
))}
</Nav>
<Stack direction="row" sx={{alignItems: "center", justifyContent: "start"}}>
Expand All @@ -53,3 +57,27 @@ export default function Header({toggleTheme, checked}: Props) {
</AppBar>
);
}

type NavLinkProps = {
href: string;
children?: React.ReactNode;
}

function NavLink({children, href}: NavLinkProps) {
return (
<Typography variant="h6" sx={{margin: "0 .2rem", color: "text.disabled"}}>
<Link
activeClass="active"
to={href}
spy={true}
smooth={true}
offset={-250}
duration={500}
style={{cursor: "pointer", textDecoration: "none"}}
activeStyle={{color: "white"}}
>
{children}
</Link>
</Typography>
);
}
2 changes: 2 additions & 0 deletions src/components/common/Section.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import { Card } from "@mui/material";
import { Line } from "./Text";

type Props = {
name: string,
Expand All @@ -10,6 +11,7 @@ export default function Section({name, noCard, children}: Props) {
return (
<section id={name}>
{noCard ? children : <Card sx={{padding: "2rem"}}>{children}</Card>}
<Line top={5} bottom={5} />
</section>
);
}
10 changes: 9 additions & 1 deletion src/components/experience/Timeline.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import { default as MuiTimeline } from "@mui/lab/Timeline";
import { useMediaQuery, useTheme } from "@mui/material";
import { timelineOppositeContentClasses } from "@mui/lab";

type Props = {
children: React.ReactNode;
}
export default function Timeline({children}: Props) {
const theme = useTheme();
const desktop = useMediaQuery(theme.breakpoints.up("md"));

return (
<MuiTimeline position="alternate">
<MuiTimeline
position={desktop ? "alternate" : "right"}
sx={desktop ? undefined : {[`& .${timelineOppositeContentClasses.root}`]: {flex: 0.2}}}
>
{children}
</MuiTimeline>
);
Expand Down
3 changes: 0 additions & 3 deletions src/components/skills/Progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ export default function Progress({text, icon, progress}: Props) {
<Box sx={{width: "100%", mr: 0}}>
<LinearProgress variant="determinate" value={progress} sx={{p: ".5rem"}} />
</Box>
<Box sx={{minWidth: "2rem"}}>
<Typography>{progress}% </Typography>
</Box>
</Stack>
</Box>
);
Expand Down
8 changes: 6 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { SpeedInsights } from "@vercel/speed-insights/react";
import Header from "./components/common/Header";
import Footer from "./components/common/Footer";
import ScrollToTop from "./components/common/ScrollToTop";
import { Line } from "./components/common/Text";

// layouts
import Welcome from "./layouts/Welcome";
Expand All @@ -30,13 +29,19 @@ const light = createTheme({
mode: "light",
primary: {main: "#507cff"},
secondary: {main: "#ffffff"},
text: {
disabled: "#ffffff8c",
},
},
});
const dark = createTheme({
palette: {
mode: "dark",
primary: {main: "#507cff"},
secondary: {main: "#ffffff"},
text: {
disabled: "#ffffff8c",
},
},
});

Expand Down Expand Up @@ -96,7 +101,6 @@ function App() {
{sections.map((section, index) => (
<React.Fragment key={index}>
{section}
{index !== sections.length - 1 && <Line top={5} bottom={5} />}
</React.Fragment>
))}
</RoutingWrapper>
Expand Down
6 changes: 3 additions & 3 deletions src/layouts/Experience.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import Section from "../components/common/Section";
import { Sections } from "../type/page";
import WorkIcon from "@mui/icons-material/Work";
import { default as TimelineC } from "../components/experience/Timeline";
import Timeline from "../components/experience/Timeline";
import TimelineItem from "../components/experience/TimelineItem";
import { TimelineItem as TimelineItemType } from "@type/timeline";

Expand Down Expand Up @@ -40,11 +40,11 @@ export default function Experience() {
<Typography>
{t(`${Sections.Experience}.description`)}
</Typography>
<TimelineC>
<Timeline>
{timelineItems.map((item, i) => (
<TimelineItem key={i} item={item} />
))}
</TimelineC>
</Timeline>
</Section>
);
}
5 changes: 1 addition & 4 deletions src/styles/main.sass
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

html
scroll-padding-top: 6em
scroll-behavior: auto !important

body
position: relative
Expand All @@ -20,10 +21,6 @@ main
padding-left: .5rem
padding-right: .5rem

/* ********************************************* swiper ********************************************* */
.swiper-slide
max-width: 25rem

/* ********************************************* footer ********************************************* */
footer
a
Expand Down

0 comments on commit 0f85db6

Please sign in to comment.