Skip to content

Commit f4df9e1

Browse files
TheBasicBitTheBasicBit
committed
Co-authored-by: CodeDoctor <[email protected]>
1 parent 849d8e2 commit f4df9e1

File tree

15 files changed

+98
-41
lines changed

15 files changed

+98
-41
lines changed

‎.vscode/settings.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"explorer.fileNesting.enabled": true,
3+
"explorer.fileNesting.patterns": {
4+
"*.tsx": "${capture}.module.scss"
5+
}
6+
}

‎components/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ type ButtonProps = PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElemen
55
variant: 'primary' | 'secondary'
66
}>
77

8-
export default function Button({variant, ...props}: ButtonProps) {
8+
export default function Button({variant, className, ...props}: ButtonProps) {
99
return (
10-
<button className={classes.btn} {...props} />
10+
<button className={classes.btn + ' ' + className} {...props} />
1111
)
1212
}

‎components/Icon.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { PropsWithChildren } from 'react'
2+
import classes from '../styles/Icon.module.scss';
3+
4+
type IconProps = PropsWithChildren<React.ButtonHTMLAttributes<HTMLSpanElement>>;
5+
6+
export default function Icon({className, ...props}: IconProps) {
7+
return (
8+
<span className={`material-symbols-outlined ${classes.icon} ${className ?? ''}`} {...props} />
9+
)
10+
}

‎components/Navbar.tsx

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,41 @@
1-
import Link from 'next/link';
2-
import { useRouter } from 'next/router';
3-
import React, { PropsWithChildren } from 'react'
4-
import classes from '../styles/Navbar.module.scss';
1+
import Link from "next/link";
2+
import { useRouter } from "next/router";
3+
import React, { PropsWithChildren } from "react";
4+
import classes from "../styles/Navbar.module.scss";
5+
import Icon from "./Icon";
56

6-
type NavbarProps = PropsWithChildren<React.ButtonHTMLAttributes<HTMLDivElement> & {
7-
items: { name: string, href: string }[]
8-
}>;
7+
type NavbarProps = PropsWithChildren<
8+
React.ButtonHTMLAttributes<HTMLDivElement> & {
9+
items: { name: string; href: string }[];
10+
}
11+
>;
912

1013
export default function Navbar({ items, ...props }: NavbarProps) {
11-
const router = useRouter();
12-
const current = router.pathname;
13-
return (
14-
<div className={classes.navbar} {...props}>
15-
<div className={classes.navbarHeader}>
16-
<div>
17-
Toggle
18-
</div>
19-
<div>
20-
Title
21-
</div>
22-
</div>
23-
<ul className={classes.navbarItems}>
24-
{items.map(item => (
25-
<li key={item.name}>
26-
<Link href={item.href} passHref>
27-
<a className={classes.navbarLink + " " + (current === item.href ? classes.navbarCurrentLink : '')}>{item.name}</a>
28-
</Link>
29-
</li>
30-
))}
31-
</ul>
14+
const router = useRouter();
15+
const current = router.pathname;
16+
return (
17+
<div className={classes.navbar} {...props}>
18+
<div className={classes.navbarHeader}>
19+
<Icon className={classes.navbarMenu}>menu</Icon>
20+
<div>
21+
Title
3222
</div>
33-
)
34-
}
23+
</div>
24+
<ul className={classes.navbarItems}>
25+
{items.map((item) => (
26+
<li key={item.name}>
27+
<Link href={item.href} passHref>
28+
<a
29+
className={classes.navbarLink + " " + (current === item.href
30+
? classes.navbarCurrentLink
31+
: "")}
32+
>
33+
{item.name}
34+
</a>
35+
</Link>
36+
</li>
37+
))}
38+
</ul>
39+
</div>
40+
);
41+
}

‎layout/HomeNavbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import Navbar from '../components/Navbar'
33

44

5-
export default function HomeNavBar() {
5+
export default function HomeNavbar() {
66
return (
77
<Navbar items={[{
88
name: 'Home',

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"material-symbols": "^0.2.13",
1213
"next": "12.3.1",
1314
"react": "18.2.0",
1415
"react-dom": "18.2.0"

‎pages/about.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import type { NextPage } from 'next'
22
import Head from 'next/head'
33
import Image from 'next/image'
44
import Button from '../components/Button'
5-
import Navbar from '../components/Navbar'
6-
import HomeNavBar from '../layout/HomeNavBar'
5+
import HomeNavbar from '../layout/HomeNavbar'
76
import styles from '../styles/Home.module.css'
87

9-
const Home: NextPage = () => {
8+
const About: NextPage = () => {
109
return (
1110
<div>
1211
<Head>
@@ -15,7 +14,7 @@ const Home: NextPage = () => {
1514
<link rel="icon" href="/favicon.ico" />
1615
</Head>
1716

18-
<HomeNavBar />
17+
<HomeNavbar />
1918
<main className={styles.main}>
2019
<h1 className={styles.title}>
2120
Welcome to <a href="https://nextjs.org">Next.js!</a>
@@ -74,4 +73,4 @@ const Home: NextPage = () => {
7473
)
7574
}
7675

77-
export default Home
76+
export default About

‎pages/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Head from 'next/head'
33
import Image from 'next/image'
44
import Button from '../components/Button'
55
import Navbar from '../components/Navbar'
6-
import HomeNavBar from '../layout/HomeNavBar'
6+
import HomeNavbar from '../layout/HomeNavbar'
77
import styles from '../styles/Home.module.css'
88

99
const Home: NextPage = () => {
@@ -15,7 +15,7 @@ const Home: NextPage = () => {
1515
<link rel="icon" href="/favicon.ico" />
1616
</Head>
1717

18-
<HomeNavBar />
18+
<HomeNavbar />
1919
<main className={styles.main}>
2020
<h1 className={styles.title}>
2121
Welcome to <a href="https://nextjs.org">Next.js!</a>

‎public/logo.svg

Lines changed: 10 additions & 0 deletions
Loading

‎styles/Button.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $button-color: (
44
"primary": colors.$primary,
55
"secondary": transparent
66
);
7+
78
.btn {
89
padding: 0.5rem 4rem;
910
border-radius: 0.8rem;
@@ -20,5 +21,4 @@ $button-color: (
2021
background: colors.$primary;
2122
color: colors.$text;
2223
}
23-
2424
}

‎styles/Icon.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.icon {
2+
user-select: none;
3+
}

‎styles/Navbar.module.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "colors";
2+
@use "media";
23

34
.navbar {
45
background: colors.$panel;
@@ -29,4 +30,14 @@
2930
text-decoration: none;
3031
border-bottom: 0.1rem solid colors.$primary;
3132
padding-bottom: 0;
33+
}
34+
35+
.navbarMenu {
36+
display: none;
37+
}
38+
39+
@media only screen and (max-width: media.$mobile-breakpoint) {
40+
.navbarMenu {
41+
display: inherit;
42+
}
3243
}

‎styles/_media.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$mobile-breakpoint: 600px;

‎styles/globals.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "colors";
22
@use "fonts";
3+
@use 'material-symbols';
34

45
html,
56
body {

‎yarn.lock

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1991,6 +1991,13 @@ __metadata:
19911991
languageName: node
19921992
linkType: hard
19931993

1994+
"material-symbols@npm:^0.2.13":
1995+
version: 0.2.13
1996+
resolution: "material-symbols@npm:0.2.13"
1997+
checksum: 3a22d9a71a444debe8125ad7a5f9e4860aacbaa29e7e7786509f91a3f8ba9e78363a0e984b7ac3943707c665848ea26cccd768c0a863e815e8f6b0a69f693cf9
1998+
languageName: node
1999+
linkType: hard
2000+
19942001
"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
19952002
version: 1.4.1
19962003
resolution: "merge2@npm:1.4.1"
@@ -2486,6 +2493,7 @@ __metadata:
24862493
"@types/react-dom": 18.0.6
24872494
eslint: 8.24.0
24882495
eslint-config-next: 12.3.1
2496+
material-symbols: ^0.2.13
24892497
next: 12.3.1
24902498
react: 18.2.0
24912499
react-dom: 18.2.0

0 commit comments

Comments
 (0)