Added Header Component
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
import { MenuProvider } from '@/contexts/MenuContext';
|
||||
import PageHeader from '@/components/Page/Header';
|
||||
|
||||
export default function SiteLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return <main>{children}</main>;
|
||||
return (
|
||||
<MenuProvider>
|
||||
<PageHeader />
|
||||
<main>{children}</main>
|
||||
</MenuProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.content {
|
||||
.wrapper {
|
||||
@mixin responsive-wrapper;
|
||||
}
|
||||
@@ -1,12 +1,11 @@
|
||||
import styles from './page.module.css';
|
||||
import { MenuProvider } from '@/contexts/MenuContext';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<MenuProvider>
|
||||
<div className={styles.wrapper}>
|
||||
<p>
|
||||
DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
|
||||
</p>
|
||||
</MenuProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,12 +69,11 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${blaka.variable} ${iosevkaSlab.variable} ${iosevkaMono.variable}`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
93
src/components/Page/Header/Header.module.css
Normal file
93
src/components/Page/Header/Header.module.css
Normal file
@@ -0,0 +1,93 @@
|
||||
.header {
|
||||
@mixin py var(--spacing-tight);
|
||||
|
||||
width: var(--dim-full);
|
||||
color: var(--color-text-inverse);
|
||||
background-color: var(--color-surface-inverse);
|
||||
}
|
||||
|
||||
.inner {
|
||||
@mixin responsive-wrapper;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-cozy);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-mono);
|
||||
animation:
|
||||
logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite,
|
||||
logo-glitch 15s linear infinite;
|
||||
animation-delay: 0s, 3s;
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, 0);
|
||||
|
||||
color: var(--color-secondary);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pagename {
|
||||
font-family: var(--font-mono);
|
||||
|
||||
& .bracket {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.menutoggle {
|
||||
@mixin ml auto;
|
||||
|
||||
& button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
transition: color 0.2s ease-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-pulse {
|
||||
0% { opacity: 1; }
|
||||
25% { opacity: 0.66; }
|
||||
50% { opacity: 0.33; }
|
||||
75% { opacity: 0.66; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes logo-glitch {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
2% {
|
||||
transform: translate(-2px, -2px);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
4% {
|
||||
transform: translate(0, 0);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
35
src/components/Page/Header/index.tsx
Normal file
35
src/components/Page/Header/index.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useMenu } from '@/contexts/MenuContext';
|
||||
import styles from './Header.module.css';
|
||||
|
||||
export default function Header() {
|
||||
const { isMenuOpen, toggleMenu } = useMenu();
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<div className={styles.inner}>
|
||||
<div className={styles.logo}>
|
||||
<Link href="/">◬</Link>
|
||||
</div>
|
||||
<div className={styles.pagename}>
|
||||
<span>
|
||||
dave <span className={styles.bracket}>[</span>dmg
|
||||
<span className={styles.bracket}>]</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.menutoggle}>
|
||||
<button
|
||||
onClick={() => toggleMenu()}
|
||||
aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
|
||||
aria-expanded={isMenuOpen}
|
||||
aria-controls="main-menu"
|
||||
>
|
||||
{isMenuOpen ? '[×]' : '[⚍]'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
@define-mixin responsive-wrapper $vspacing: 0 $hspacing: var(--spacing-comfortable) {
|
||||
@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy) {
|
||||
@mixin mx auto;
|
||||
|
||||
max-width: clamp(60ch, 90vw, 90ch);
|
||||
padding: $vspacing $hspacing;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--typo-size-responsive);
|
||||
}
|
||||
@@ -85,7 +85,7 @@
|
||||
--color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
|
||||
|
||||
/* == Secondary Colors == */
|
||||
--color-secondary: var(--color-palette-electric-blue);
|
||||
--color-secondary: var(--color-palette-olive-drab);
|
||||
--color-secondary-surface: oklch(from var(--color-secondary) calc(l + 0.1) c h);
|
||||
--color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user