Added Header Component

src/components/Page/Header/Header.module.css

@@ -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;
+  }
+}

src/components/Page/Header/index.tsx

@@ -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>
+  );
+}