add top menu bg #4

ukorvl · Jul 30, 2023 · b62bd37 · b62bd37
1 parent b8837ad
commit b62bd37
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 21 deletions.
diff --git a/components/Menu/MenuItem.tsx b/components/Menu/MenuItem.tsx
@@ -29,7 +29,7 @@ const variants = {
   },
 };
 
-const itemCn = clsx('text-4xl', 'm-2', 'text-center');
+const itemCn = clsx('text-5xl', 'm-2', 'text-center');
 
 /**
  * @param {MenuItemProps} props Props.

diff --git a/components/Menu/MenuList.tsx b/components/Menu/MenuList.tsx
@@ -6,6 +6,7 @@ import useScroll from '@/lib/shared/useScroll';
 import useWindowDimensions from '@/lib/shared/useWindowDimensions';
 import {MenuContext} from './MenuContext';
 import {MenuPosition} from './MenuPosition';
+import menuButtonSize from './menuButtonSize';
 
 /**
  * Props.
@@ -17,22 +18,25 @@ type MenuListProps = {
 const navVariants = {
   // eslint-disable-next-line jsdoc/require-jsdoc
   open: ({height, position}: {height: number; position: MenuPosition}) => ({
-    clipPath: `circle(${height * 2 + 200}px at 95% ${position.top}px)`,
+    clipPath: `circle(${height * 2 + 200}px at calc(100% - ${position.right}px) ${position.top}px)`,
     transition: {
       type: 'spring',
       stiffness: 20,
       restDelta: 2,
     },
   }),
-  closed: {
-    clipPath: 'circle(30px at 95% 5%)',
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  closed: ({position}: {height: number; position: MenuPosition}) => ({
+    clipPath: `circle(0px at calc(100% - ${position.right + menuButtonSize}px) ${
+      position.top + menuButtonSize
+    }px)`,
     transition: {
       delay: 0.5,
       type: 'spring',
       stiffness: 400,
       damping: 40,
     },
-  },
+  }),
 };
 
 const navCn = clsx(
@@ -42,7 +46,7 @@ const navCn = clsx(
   'w-full',
   'h-full',
   'z-10',
-  'bg-alternate',
+  'bg-gradient-to-bl from-accent0 to-alternate',
   'flex',
   'flex-col',
   'items-center',

diff --git a/components/Menu/MenuPosition.ts b/components/Menu/MenuPosition.ts
@@ -1,6 +1,9 @@
-import {CSSProperties} from 'react';
-
 /**
  * Position of menu using style position props.
  */
-export type MenuPosition = Pick<CSSProperties, 'top' | 'bottom' | 'left' | 'right'>;
+export type MenuPosition = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
diff --git a/components/Menu/MenuToggle.tsx b/components/Menu/MenuToggle.tsx
@@ -5,6 +5,7 @@ import {forwardRef, memo, useContext} from 'react';
 import clsx from 'clsx';
 import {twMerge} from 'tailwind-merge';
 import {MenuContext} from './MenuContext';
+import menuButtonSize from './menuButtonSize';
 import Button from '../Button/Button';
 
 /**
@@ -48,6 +49,7 @@ const MenuToggle = forwardRef<HTMLButtonElement, MenuToggleProps>(function MenuT
     setIsOpen(!isOpen);
     onToggle && onToggle();
   };
+  const svgElSize = menuButtonSize / 2;
 
   return (
     <m.div
@@ -65,11 +67,12 @@ const MenuToggle = forwardRef<HTMLButtonElement, MenuToggleProps>(function MenuT
         className={twMerge(btnCn, className)}
         ref={ref}
         variant="alternate"
+        style={{width: menuButtonSize, height: menuButtonSize}}
       >
         <svg
-          width="23"
-          height="23"
-          viewBox="0 0 23 23"
+          width={svgElSize}
+          height={svgElSize}
+          viewBox={`0 0 ${svgElSize} ${svgElSize}`}
         >
           <Path
             variants={{

diff --git a/components/Menu/menuButtonSize.ts b/components/Menu/menuButtonSize.ts
@@ -0,0 +1,3 @@
+const menuButtonSize = 80;
+
+export default menuButtonSize;
diff --git a/components/TopMenu/TopMenu.tsx b/components/TopMenu/TopMenu.tsx
@@ -4,7 +4,7 @@ import {m} from 'framer-motion';
 import {menuItemsConfig, socialLinksConfig} from './topMenuCongif';
 import Menu from '../Menu/Menu';
 
-const itemsVariants = {
+const variants = {
   open: {
     transition: {staggerChildren: 0.07, delayChildren: 0.2},
   },
@@ -13,15 +13,11 @@ const itemsVariants = {
   },
 };
 
-const socialLinksVariants = itemsVariants;
-
 const linkCn = clsx('animated-link');
-
 const socialLiksListCn = clsx('flex', 'gap-8', 'mt-auto', 'mb-16');
-
 const socialLinkMenuItem = clsx('text-xs');
-
-const itemsListCn = clsx('mt-48');
+const itemsListCn = clsx('mt-16');
+const homeMenuItem = clsx('mb-40', 'text-xl');
 
 /**
  * @returns React component.
@@ -35,9 +31,17 @@ export default function TopMenu() {
       <Menu.Toggle />
       <Menu.List>
         <m.ul
-          variants={itemsVariants}
+          variants={variants}
           className={itemsListCn}
         >
+          <Menu.Item className={homeMenuItem}>
+            <Link
+              href="/"
+              className={linkCn}
+            >
+              SALSAVIVA
+            </Link>
+          </Menu.Item>
           {menuItemsConfig.map(({href, text}, idx) => (
             <Menu.Item key={idx}>
               <Link
@@ -50,7 +54,7 @@ export default function TopMenu() {
           ))}
         </m.ul>
         <m.ul
-          variants={socialLinksVariants}
+          variants={variants}
           className={socialLiksListCn}
         >
           {socialLinksConfig.map(({href, text}, idx) => (