feat: add About dropdown menu for desktop and mobile

martapanc · Jul 23, 2023 · 8ccd871 · 8ccd871
1 parent f6918e0
commit 8ccd871
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/src/app/(public)/about/free-time/page.tsx b/src/app/(public)/about/free-time/page.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const metadata = {
+  title: 'About my Free Time | MartaCodes.it',
+  description: 'About page',
+};
+
+const AboutFreeTimePage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section className='dark:bg-dark bg-white'>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>Free Time</h1>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default AboutFreeTimePage;
diff --git a/src/app/(public)/about/page.tsx → src/app/(public)/about/work/page.tsx b/src/app/(public)/about/page.tsx → src/app/(public)/about/work/page.tsx
@@ -14,7 +14,7 @@ import { schoolsQuery } from '@/queries/schools';
 import { shortTextQuery } from '@/queries/short-texts';
 import { skillQuery } from '@/queries/skills';
 
-import { sanityClient } from '../../../../sanity/lib/client';
+import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Job } from '@/types/Job';
 import { Language } from '@/types/Language';
@@ -25,7 +25,7 @@ import { Skill } from '@/types/Skill';
 import { SkillIcon } from '@/types/SkillIcon';
 
 export const metadata = {
-  title: 'About | MartaCodes.it',
+  title: 'About my Work | MartaCodes.it',
   description: 'About page',
 };
 
@@ -71,7 +71,7 @@ const AboutPage = async () => {
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>About</h1>
+          <h1 className='mb-5'>Work</h1>
 
           {softwareDevelopment && (
             <div>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,10 +1,14 @@
 'use client';
 
+import { MenuItem } from '@mui/material';
+import { Menu } from '@mui/material';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import Headroom from 'react-headroom';
+import { AiFillCaretDown, AiFillCaretUp } from 'react-icons/ai';
 
 import { useOnKeyDown } from '@/hooks/useOnKeyDown';
 
@@ -14,7 +18,6 @@ import UnstyledLink from '@/components/links/UnstyledLink';
 import { MobileMenu } from '@/components/molecules/MobileMenu/MobileMenu';
 
 export const links = [
-  { href: '/about', label: 'About' },
   { href: '/projects', label: 'Projects' },
   { href: '/cv', label: 'CV' },
   { href: '/uses', label: 'Uses' },
@@ -25,6 +28,15 @@ export default function Header() {
   const { theme } = useTheme();
   const [isOpen, setIsOpen] = useState(false);
 
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   const pathname = usePathname();
 
   useEffect(() => {
@@ -62,6 +74,36 @@ export default function Header() {
             </UnstyledLink>
 
             <ul className='hidden items-center justify-between space-x-6 text-lg md:flex'>
+              <li>
+                <span
+                  className='animated-underline-2 dark:animated-underline flex items-center rounded-sm font-medium text-slate-950 dark:text-blue-50'
+                  aria-controls={open ? 'basic-menu' : undefined}
+                  aria-haspopup='true'
+                  aria-expanded={open ? 'true' : undefined}
+                  onClick={handleClick}
+                >
+                  About
+                  {!open && <AiFillCaretDown className='ms-1.5' />}
+                  {open && <AiFillCaretUp className='ms-1.5' />}
+                </span>
+                <Menu
+                  id='basic-menu'
+                  anchorEl={anchorEl}
+                  open={open}
+                  onClose={handleClose}
+                  MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                  }}
+                >
+                  <MenuItem onClick={handleClose}>
+                    <Link href='/about/work'>👔 Work</Link>
+                  </MenuItem>
+                  <MenuItem onClick={handleClose}>
+                    <Link href='/about/free-time'>🪁 Free Time</Link>
+                  </MenuItem>
+                </Menu>
+              </li>
+
               {links.map(({ href, label }) => (
                 <li key={`${href}${label}`}>
                   <UnstyledLink

diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/src/components/molecules/MobileMenu/MobileMenu.tsx
@@ -13,6 +13,11 @@ export interface MobileMenuProps {
 }
 
 export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
+  const mobileLinks = [
+    { href: '/about/work', label: 'About - Work' },
+    { href: '/about/free-time', label: 'About - Free Time' },
+    ...links,
+  ];
   const navigationVariants = {
     hidden: { opacity: 0, x: -50 },
     visible: (custom: number) => ({
@@ -38,7 +43,7 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
             }}
           >
             <ul className='align-center flex h-full flex-col justify-center gap-4 text-center'>
-              {links.map(({ href, label }, i) => (
+              {mobileLinks.map(({ href, label }, i) => (
                 <NavigationItem
                   key={href}
                   href={href}