Added WIP Menu

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

@@ -0,0 +1,121 @@
+@layer components {
+  .area {
+    --area-bg: transparent;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    background: var(--area-bg);
+
+    @media screen and (--bp-tablet-down) {
+      border-bottom: var(--size-1) solid var(--color-palette-gunmetal);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .area_1 {
+    position: relative;
+    grid-area: area_1;
+  }
+
+  .area_2 {
+    position: relative;
+    grid-area: area_2;
+  }
+
+  .area_3 {
+    position: relative;
+    grid-area: area_3;
+  }
+
+  .area_4 {
+    position: relative;
+    grid-area: area_4;
+  }
+
+  .area_5 {
+    position: relative;
+    grid-area: area_5;
+  }
+
+  .hasBGImg {
+    position: relative;
+
+    &:hover {
+      & .bgImg {
+        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
+      }
+    }
+  }
+
+  .bgImg {
+    --area-bg-animation-keyframe: none;
+    --area-bg--animation-duration: 0s;
+    --area-bg--animation-timing: linear;
+    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
+
+    position: absolute;
+    z-index: -1;
+
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+    filter: var(--area-bg-filter);
+
+    @media screen and (--bp-tablet-down) {
+      display: none;
+    }
+  }
+
+  @media screen and (--bp-desktop) {
+    .chainbreaker {
+      --area-animation-keyframe: var(--kf-color-bleed);
+      --area-animation-duration: var(--img-colorbleed-duration);
+      --area-animation-timing: var(--img-colorbleed-timing);
+
+      & .bgImg {
+        z-index: -2;
+      }
+
+      &.hasBGImg {
+        --divider-color: transparent;
+        --title-color: transparent;
+        --subtitle-color: transparent;
+        --subtitle-transition: all 0.3s ease-in-out;
+        --title-transition: color 0.3s ease-in-out;
+
+        &::before {
+          content: "";
+
+          position: absolute;
+          z-index: -1;
+
+          width: 100%;
+          height: 100%;
+
+          opacity: 0;
+          background: alpharize(var(--grid-bg), 0.66);
+        }
+
+        &:hover {
+          --divider-color: var(--color-tertiary);
+          --title-color: var(--color-tertiary);
+          --subtitle-color: var(--color-tertiary);
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import MenuItem from '@/components/Page/Menu//MenuItem/';
+import { useCurrentPath } from '@/hooks/useCurrentPath';
+
+import styles from './MenuArea.module.css';
+
+import { NavigationItem } from '@/lib/types/navigation';
+
+interface MenuAreaProps {
+  item: NavigationItem;
+}
+
+const MenuArea = React.memo(({ item }: MenuAreaProps) => {
+  const hasBGImg = !!item.background;
+  const { isCurrentPath } = useCurrentPath();
+
+  const areaClasses = React.useMemo(() => {
+    return [
+      styles.area,
+      styles[item.gridPosition],
+      styles[item.variant],
+      isCurrentPath(item.path) ? styles.current : '',
+      item.background ? styles.hasBGImg : null,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [item.background, isCurrentPath]);
+
+  return (
+    <section className={areaClasses}>
+      {hasBGImg && (
+        <img
+          className={styles.bgImg}
+          src={item.background}
+          alt={`Background Image for ${item.name}`}
+        />
+      )}
+      <MenuItem item={item} />
+    </section>
+  );
+});
+
+MenuArea.displayName = 'MenuArea';
+
+export default MenuArea;