diff --git a/components/Header.module.css b/components/Header.module.css new file mode 100644 index 0000000..7eaa59c --- /dev/null +++ b/components/Header.module.css @@ -0,0 +1,45 @@ +.wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16); +} + +.menu > ul { + list-style: none; + display: flex; + gap: calc(10rem / 16); +} + + +.menu > ul > li > a { + padding: calc(10rem / 16); + background-color: var(--secondary-background); + color: var(--label); + border-radius: calc(50rem / 16); +} + +.sideBar { + position: fixed; + width: 20vw; + background: var(--secondary-background); + padding: 100px; + height: 100vh; + right: 0; + top: 0; + margin: 0; + list-style: decimal-leading-zero; + z-index: 100; + color: var(--secondary-heading); +} + +.closeMenu { + background: var(--primary-heading); + margin: 10px; + padding: 10px; + border-radius: 10px; + font-size: 92px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..291f72c --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,49 @@ +import Link from "next/link"; +import React from "react"; +import { Color } from "utils/Color"; + +import styles from "./Header.module.css"; + +export function Header() { + return ( + <> +