50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
import { Color } from "utils/Color";
|
|
|
|
import styles from "./Header.module.css";
|
|
|
|
export function Header() {
|
|
return (
|
|
<>
|
|
<div className={styles.wrapper}>
|
|
<h1>CS 2022</h1>
|
|
<nav className={styles.menu}>
|
|
<ul>
|
|
<li>
|
|
<Link href="/blog/hello-world">
|
|
<a>Go to</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div className={styles.sideBar}>
|
|
<h1 className={styles.menuHeader}>Sections</h1>
|
|
<button className={styles.closeMenu}>⭢</button>
|
|
<hr />
|
|
<nav className={styles.navbarMenu}>
|
|
<ol>
|
|
<ListItem link="/">Demographics</ListItem>
|
|
<ListItem link="/">Academics</ListItem>
|
|
<ListItem link="/">Co-op</ListItem>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const ListItem: React.FC<{ link: string; children: string }> = ({
|
|
link,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<h2 className={styles.listItem}>
|
|
<Link href={link}>
|
|
<li>{children}</li>
|
|
</Link>
|
|
</h2>
|
|
);
|
|
};
|