[16] Add dropdown menu

.gitignore

@@ -39,3 +39,4 @@ tsconfig.tsbuildinfo
 
 # Storybook build files
 storybook-static/
+!/.junie/guidelines.md

app/layout.tsx

@@ -1,5 +1,6 @@
 import '../source/00-config/index.css';
 
+import DropdownMenu from '@/source/03-components/Menu/DropdownMenu/DropdownMenu';
 import { JSX, PropsWithChildren } from 'react';
 import sourceSansPro from '../source/01-global/fonts/source-sans';
 import '../source/01-global/index.css';
@@ -8,7 +9,6 @@ import Header from '../source/02-layouts/Header/Header';
 import SiteContainer from '../source/02-layouts/SiteContainer/SiteContainer';
 import BackToTop from '../source/03-components/BackToTop/BackToTop';
 import Menu from '../source/03-components/Menu/Menu';
-import ResponsiveMenu from '../source/03-components/Menu/ResponsiveMenu/ResponsiveMenu';
 import footerStyles from '../source/03-components/Menu/menu-footer.module.css';
 import SiteName from '../source/03-components/SiteName/SiteName';
 import Skiplink from '../source/03-components/Skiplink/Skiplink';
@@ -22,13 +22,15 @@ function RootLayout({ children }: PropsWithChildren): JSX.Element {
         <SiteContainer>
           <Header>
             <SiteName siteName="NextJS Starter" />
-            <ResponsiveMenu
+            <DropdownMenu
               items={[
                 {
+                  id: 'home',
                   title: 'Home',
                   url: '/',
                 },
                 {
+                  id: 'about',
                   title: 'About',
                   url: '/about',
                 },
@@ -41,10 +43,12 @@ function RootLayout({ children }: PropsWithChildren): JSX.Element {
             <Menu
               items={[
                 {
+                  id: 'home',
                   title: 'Home',
                   url: '/',
                 },
                 {
+                  id: 'about',
                   title: 'About',
                   url: '/about',
                 },

source/00-config/vars/colors.css

@@ -39,11 +39,14 @@
   --ui-accent-light: var(--brand-blue-light);
   --ui-background: var(--grayscale-gray-3);
   --ui-background-dark: var(--grayscale-gray-6);
+  --ui-background-darker: var(--grayscale-gray-7);
   --ui-background-light: var(--grayscale-gray-1);
   --ui-border: var(--grayscale-gray-3);
   --ui-border-dark: var(--grayscale-gray-6);
   --ui-border-light: var(--grayscale-gray-1);
   --ui-focus: var(--brand-blue-light);
   --ui-text-dark: var(--grayscale-gray-5);
+  --ui-text-darker: var(--grayscale-gray-7);
   --ui-text-light: var(--grayscale-gray-3);
+  --ui-text-lighter: var(--grayscale-gray-1);
 }

source/03-components/Menu/DropdownMenu/DropdownContext.tsx

@@ -0,0 +1,6 @@
+import { Context, createContext } from 'react';
+
+const DropdownContext: Context<Record<string | number, boolean>> =
+  createContext({});
+
+export default DropdownContext;