menuToggle in progress #4

ukorvl · Jul 6, 2023 · fb20209 · fb20209
1 parent ac75713
commit fb20209
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 86 deletions.
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -19,13 +19,6 @@ export default function Contact() {
       <Button size="lg">Submit</Button>
       <Button size="sm">Submit</Button>
       <Button variant="alternate">Submit</Button>
-      <Button outline>Submit</Button>
-      <Button
-        variant="alternate"
-        outline
-      >
-        Submit
-      </Button>
     </div>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,7 +17,7 @@ const bodyCn = clsx(
   'text-white',
   'flex',
   'flex-col',
-  'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-alternate via-alternate to-black',
+  'bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-black via-alternate to-black',
 );
 
 const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24', 'min-h-screen');

diff --git a/components/AppearOnScreen/AppearOnScreen.tsx b/components/AppearOnScreen/AppearOnScreen.tsx
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -18,8 +18,6 @@ type ButtonSize = 'sm' | 'md' | 'lg';
 type ButtonOwnProps = {
   /** @default 'default' */
   variant?: ButtonVariant;
-  /** @default false */
-  outline?: boolean;
   /** @default 'md' */
   size?: ButtonSize;
 };
@@ -30,11 +28,6 @@ type ButtonOwnProps = {
 type ButtonProps = ButtonOwnProps &
   Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'>;
 
-const buttonVariantMap: Record<ButtonVariant, string> = {
-  default: '',
-  alternate: '',
-};
-
 const buttonSizeMap: Record<ButtonSize, string> = {
   sm: 'px-2 py-1 rounded-md text-sm',
   md: 'px-4 py-2 rounded-lg',
@@ -52,35 +45,29 @@ const baseButtonCn = clsx(
   'select-none',
   'focus:ring-4',
   'focus:outline-none',
+  'focus:ring-white',
 );
 
 const buttonDefaultCn = clsx(
-  'bg-gradient-to-br from-accent0 to-accent2',
-  'focus:ring-accent2',
-  'hover:from-accent1 hover:to-accent3',
+  'bg-gradient-to-br from-accent1 to-accent3',
+  'hover:from-accent0 hover:to-accent2',
 );
 
-const buttonAlternateCn = clsx('');
+const buttonAlternateCn = clsx('hover:bg-transparent-white', 'focus:bg-transparent-white');
 
-const buttonOutlineCn = clsx('');
+const buttonVariantMap: Record<ButtonVariant, string> = {
+  default: buttonDefaultCn,
+  alternate: buttonAlternateCn,
+};
 
 /**
  * @returns React component.
  */
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {variant = 'default', size = 'md', className, outline = false, children, ...restProps},
+  {variant = 'default', size = 'md', className, children, ...restProps},
   ref,
 ) {
-  const cn = twMerge(
-    clsx(
-      baseButtonCn,
-      buttonVariantMap[variant],
-      buttonSizeMap[size],
-      variant === 'default' ? buttonDefaultCn : buttonAlternateCn,
-      outline && buttonOutlineCn,
-    ),
-    className,
-  );
+  const cn = twMerge(clsx(baseButtonCn, buttonVariantMap[variant], buttonSizeMap[size]), className);
 
   return (
     <button

diff --git a/components/Menu/MenuToggle.tsx b/components/Menu/MenuToggle.tsx
@@ -1,28 +1,45 @@
 'use client';
 
-import {Variants, motion} from 'framer-motion';
-import {forwardRef, useContext} from 'react';
-import {MenuContext} from './MenuContext';
+import {SVGMotionProps, Variants, motion} from 'framer-motion';
+import {forwardRef, memo, useContext} from 'react';
 import clsx from 'clsx';
 import {twMerge} from 'tailwind-merge';
+import {MenuContext} from './MenuContext';
+import Button from '../Button/Button';
 
 /**
  * Props.
  */
 type MenuToggleProps = {
   onToggle?: () => void;
-  size?: number;
   className?: string;
 };
 
-const btnCn = clsx('absolute', 'top-16', 'right-16');
+const containerCn = clsx('absolute', 'top-16', 'right-16', 'z-10');
+const btnCn = clsx('rounded-full w-24 h-24');
+
+const variants: Variants = {
+  visible: {opacity: 1},
+  hidden: {opacity: 0},
+};
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const Path = ({variants}: SVGMotionProps<SVGPathElement>) => (
+  <motion.path
+    fill="transparent"
+    strokeWidth="4"
+    stroke="hsl(0, 0%, 18%)"
+    strokeLinecap="round"
+    variants={variants}
+  />
+);
 
 /**
  * @param {MenuToggleProps} props Props.
  * @returns React component.
  */
 const MenuToggle = forwardRef<HTMLButtonElement, MenuToggleProps>(function MenuToggle(
-  {onToggle, size = 72, className},
+  {onToggle, className},
   ref,
 ) {
   const {setIsOpen, isOpen} = useContext(MenuContext);
@@ -33,14 +50,41 @@ const MenuToggle = forwardRef<HTMLButtonElement, MenuToggleProps>(function MenuT
   };
 
   return (
-    <button
-      onClick={onClick}
-      className={twMerge(btnCn, className)}
-      ref={ref}
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{once: true}}
+      transition={{duration: 0.5, delay: 0.3}}
+      variants={variants}
+      className={containerCn}
     >
-      vfvfvf
-    </button>
+      <Button
+        onClick={onClick}
+        className={twMerge(btnCn, className)}
+        ref={ref}
+        variant="alternate"
+      >
+        <svg
+          width="23"
+          height="23"
+          viewBox="0 0 23 23"
+        >
+          <Path
+            variants={{
+              closed: {d: 'M 2 2.5 L 20 2.5'},
+              open: {d: 'M 3 16.5 L 17 2.5'},
+            }}
+          />
+          <Path
+            variants={{
+              closed: {d: 'M 2 16.346 L 20 16.346'},
+              open: {d: 'M 3 2.5 L 17 16.346'},
+            }}
+          />
+        </svg>
+      </Button>
+    </motion.div>
   );
 });
 
-export default MenuToggle;
+export default memo(MenuToggle);
diff --git a/tailwind/colors.js b/tailwind/colors.js
@@ -1,6 +1,7 @@
 /** @type {Record<string, string>} */
 module.exports = {
   'white': '#fefefe',
+  'transparent-white': 'rgba(255,255,255,0.5)',
   'black': '#111111',
   'primary': '#4f5bac',
   'alternate': '#110728',