Added WIP Menu

src/components/Page/Menu/MenuTitle/MenuTitle.module.css

@@ -0,0 +1,63 @@
+@layer components {
+  .heading {
+    position: relative;
+
+    &:has(+ ul) {
+      @mixin my var(--spacing-comfortable);
+    }
+  }
+
+  .mainlink {
+    position: relative;
+
+    border: none;
+
+    font-family: var(--title-font);
+    font-size: var(--title-font-size);
+    font-weight: var(--title-font-weight);
+    line-height: var(--title-line-height);
+    color: var(--title-color);
+    text-transform: var(--title-transform);
+    letter-spacing: var(--title-spacing);
+
+    background: transparent;
+
+    transition: var(--title-transition);
+
+    &.current {
+      padding: var(--spacing-snug) var(--spacing-tight);
+      color: var(--title-current-fg);
+      animation: var(--kf-text-glitch) 5s infinite;
+
+      &::before {
+        content: "⟩";
+      }
+    }
+
+    &:not(.current) {
+      --pointer-left-symbol: "▶";
+      --pointer-right-symbol: "◀";
+      --pointer-distance: 1em;
+
+      @mixin anim-txt-pointer_focus;
+      @mixin px var(--spacing-tight);
+
+      &:focus {
+        color: var(--title-focus-fg);
+        outline: none;
+      }
+
+      &:not(:focus) {
+        --pointer-left-symbol: "{";
+        --pointer-right-symbol: "}";
+        --pointer-distance: 0.5em;
+
+        @mixin anim-txt-pointer;
+
+        &:hover {
+          --title-color: var(--color-primary);
+        }
+      }
+    }
+  }
+}

src/components/Page/Menu/MenuTitle/index.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+import styles from './MenuTitle.module.css';
+
+import { useCurrentPath } from '@/hooks/useCurrentPath';
+
+interface MenuTitleProps {
+  name: string;
+  path: string;
+  variant: string;
+}
+
+export default function MenuTitle({ name, path, variant }: MenuTitleProps) {
+  const { isCurrentPath } = useCurrentPath();
+  return (
+    <h2 className={`${styles.heading} ${styles[`${variant}`]}`}>
+      <Link
+        className={`${styles.mainlink} ${isCurrentPath(path) ? styles.current : ''}`}
+        href={path}
+      >
+        {name}
+      </Link>
+    </h2>
+  );
+}