add social links to top menu #4

.env

@@ -11,5 +11,5 @@ TELEGRAM_ADDRESS="https://t.me/SV_Yerevan"
 CONTACT_EMAIL="sv.yerevan@gmail.com"
 CONTACT_PHONE="+374 431 085 88"
 
-LOCATION_GOOGLE_MAPS_LINK="https://www.google.com/maps/place/SalsaViva+Social+Dance+School/@40.189783,44.5222658,17z/data=!3m1!4b1!4m6!3m5!1s0x406abda9a2d5a441:0x6a2fd39de89a2d4f!8m2!3d40.1897789!4d44.5248407!16s%2Fg%2F11rkp1t8xs?entry=ttu"
+LOCATION_GOOGLE_MAPS_LINK="https://shorturl.at/gsuK5"
 LOCATION_ADDRESS_TEXT=" 41, 4 Abovyan St, Yerevan 0009"

app/globals.css

@@ -1,3 +1,31 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .animated-link {
+    position: relative;
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .animated-link:after {
+    display: block;
+    content: "";
+    background-color: theme(colors.white);
+    height: 1px;
+    width: 0;
+    left: 0;
+    position: absolute;
+    -webkit-transition: width 0.3s ease-in;
+    transition: width 0.3s ease-in;
+  }
+
+  .animated-link:hover:after {
+    width: 100%;
+  }
+
+  .animated-link:focus:after {
+    width: 100%;
+  }
+}

app/layout.tsx

@@ -13,13 +13,14 @@ const bodyCn = clsx(
   robotoMono.variable,
   kumbhSans.variable,
   'antialiased',
-  'min-h-screen',
   'font-sans',
   'text-white',
-  '',
+  'bg-alternate',
+  'flex',
+  'flex-col',
 );
 
-const mainCn = clsx('flex', 'fkex-col', 'items-center', 'justify-center', 'p-24');
+const mainCn = clsx('flex', 'flex-col', 'items-center', 'justify-center', 'p-24', 'min-h-screen');
 
 /**
  * @param {{children}} props Props.

components/Footer/Footer.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx';
 import Icons from './Icons';
 import Location from './Location';
+import Mail from './Mail';
+import Phone from './Phone';
 
-const footerCn = clsx('container', 'columns-3', 'xs:columns-1');
+const footerCn = clsx('container', 'columns-4', 'xs:columns-1', 'mt-auto', 'pb-12');
 
 /**
  * @returns React component.
@@ -11,6 +13,8 @@ export default function Footer() {
   return (
     <footer className={footerCn}>
       <Icons />
+      <Mail />
+      <Phone />
       <Location />
     </footer>
   );

components/Footer/Icons.tsx

@@ -26,13 +26,13 @@ const iconsConfig: IconConfig[] = [
   },
   {
     icon: ['fab', 'instagram'],
-    href: WHATSAPP_ADDRESS,
+    href: INSTAGRAM_ADDRESS,
     size: '2x',
     target: '_blank',
   },
   {
     icon: ['fab', 'whatsapp'],
-    href: INSTAGRAM_ADDRESS,
+    href: WHATSAPP_ADDRESS,
     size: '2x',
     target: '_blank',
   },

components/Footer/Location.tsx

@@ -7,6 +7,7 @@ import envConfig from '@/lib/env/envConfig';
 const {LOCATION_ADDRESS_TEXT, LOCATION_GOOGLE_MAPS_LINK} = envConfig;
 
 const containerCn = clsx('flex', 'justify-center', 'flex-nowrap', 'gap-4');
+const addressCn = clsx('animated-link');
 
 /**
  * @returns React component.
@@ -22,7 +23,7 @@ function Location() {
           size="2xl"
           icon={['fas', 'location-dot']}
         />
-        <address>{LOCATION_ADDRESS_TEXT}</address>
+        <address className={addressCn}>{LOCATION_ADDRESS_TEXT}</address>
       </Link>
     </div>
   );

components/Footer/Mail.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import {memo} from 'react';
+import envConfig from '@/lib/env/envConfig';
+
+const {CONTACT_EMAIL} = envConfig;
+
+const anchorCn = clsx('animated-link');
+
+/**
+ * @returns React component.
+ */
+function Mail() {
+  return (
+    <a
+      className={anchorCn}
+      href={`mailto:${CONTACT_EMAIL}`}
+    >
+      {CONTACT_EMAIL}
+    </a>
+  );
+}
+
+export default memo(Mail);

components/Footer/Phone.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import {memo} from 'react';
+import envConfig from '@/lib/env/envConfig';
+
+const {CONTACT_PHONE} = envConfig;
+
+const telCn = clsx('animated-link', 'tracking-wider');
+
+/**
+ * @returns React component.
+ */
+function Phone() {
+  return (
+    <a
+      className={telCn}
+      href={`tel:${CONTACT_PHONE}`}
+    >
+      {CONTACT_PHONE}
+    </a>
+  );
+}
+
+export default memo(Phone);

components/Menu/MenuToggle.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import {Variants, motion} from 'framer-motion';
-import {forwardRef} from 'react';
+import {forwardRef, useContext} from 'react';
+import {MenuContext} from './MenuContext';
+import clsx from 'clsx';
+import {twMerge} from 'tailwind-merge';
 
 /**
  * Props.
@@ -12,6 +15,8 @@ type MenuToggleProps = {
   className?: string;
 };
 
+const btnCn = clsx('absolute', 'top-16', 'right-16');
+
 /**
  * @param {MenuToggleProps} props Props.
  * @returns React component.
@@ -20,16 +25,20 @@ const MenuToggle = forwardRef<HTMLButtonElement, MenuToggleProps>(function MenuT
   {onToggle, size = 72, className},
   ref,
 ) {
+  const {setIsOpen, isOpen} = useContext(MenuContext);
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const onClick = () => {
+    setIsOpen(!isOpen);
+    onToggle && onToggle();
+  };
+
   return (
     <button
-      onClick={onToggle}
+      onClick={onClick}
+      className={twMerge(btnCn, className)}
       ref={ref}
     >
-      <svg
-        width={size}
-        height="23"
-        viewBox="0 0 23 23"
-      ></svg>
+      vfvfvf
     </button>
   );
 });

components/Menu/SocialLinksList.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import {memo} from 'react';
+import envConfig from '@/lib/env/envConfig';
+
+const {FACEBOOK_ADDRESS, INSTAGRAM_ADDRESS, TELEGRAM_ADDRESS} = envConfig;
+
+const linksConfig = [
+  {
+    title: 'Facebook',
+    href: FACEBOOK_ADDRESS,
+  },
+  {
+    title: 'Instagram',
+    href: INSTAGRAM_ADDRESS,
+  },
+  {
+    title: 'Telegram',
+    href: TELEGRAM_ADDRESS,
+  },
+] as const;
+
+const linkCn = 'animated-link';
+
+/**
+ * @returns React component.
+ */
+function SocialLinksList() {
+  return (
+    <div>
+      {linksConfig.map(({title, href}) => (
+        <Link
+          key={title}
+          href={href}
+          target="_blank"
+          className={linkCn}
+        >
+          {title.toUpperCase()}
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default memo(SocialLinksList);

tailwind/colors.js

@@ -1,7 +1,7 @@
 /** @type {Record<string, string>} */
 module.exports = {
   'white': '#fefefe',
-  'black': '#110728',
+  'black': '#000000',
   'primary': '#4f5bac',
   'alternate': '#110728',
   'accent0': '#9e2077',

tailwind/letterSpacing.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss/defaultTheme').letterSpacing} */
 module.exports = {
+  wider: '.25em',
   widest: '.9em',
 };