feat: mobile menu open feature

Added mobile menu feature, adjusted styles. Added storybook of component(next link box)
juunie-roh · Dec 15, 2023 · ba1d86a · ba1d86a
1 parent 4e12252
commit ba1d86a
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.2",
     "@t3-oss/env-nextjs": "^0.7.1",
     "next": "14.0.3",

diff --git a/src/components/NextLinkBox.stories.tsx b/src/components/NextLinkBox.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NextLinkBox } from './NextLinkBox';
+
+const meta = {
+  title: 'Example/NextLinkBox',
+  component: NextLinkBox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof NextLinkBox>;
+
+export default meta;
+type Story = StoryObj<typeof NextLinkBox>;
+
+export const NextLinkBoxWithProps = {
+  args: {
+    href: '#',
+    title: 'Example Title',
+    description: 'Example Description',
+  },
+} satisfies Story;
diff --git a/src/templates/Main.stories.tsx b/src/templates/Main.stories.tsx
@@ -33,7 +33,7 @@ export const MainWithString = {
 export const MainWithHomeLink: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('link', {
+    const loginButton = canvas.getByRole('link', {
       name: /Juun/i,
     });
 

diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -1,7 +1,9 @@
+import { Dialog } from '@headlessui/react';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { type ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 
 import { AppConfig } from '@/utils/AppConfig';
 
@@ -18,6 +20,7 @@ const menuData = [
 
 const Main = (props: IMainProps) => {
   const router = useRouter();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
     <div className="min-h-screen w-full px-1 text-gray-700 antialiased">
@@ -26,12 +29,12 @@ const Main = (props: IMainProps) => {
       <div className="mx-auto">
         <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 px-8 py-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:px-12 lg:py-8">
           <div className="flex items-baseline gap-4">
-            <h1 className="font-antonio text-xl font-bold text-gray-900 dark:text-gray-100 lg:text-3xl">
+            <h1 className="font-antonio text-2xl font-bold text-gray-900 dark:text-gray-100 lg:text-3xl">
               <Link href="/">{AppConfig.title}</Link>
             </h1>
             <nav>
               {/* Active Links on Header Menu */}
-              <ul className="flex gap-1 lg:gap-2 lg:text-lg">
+              <ul className="hidden gap-1 sm:flex lg:gap-2 lg:text-lg">
                 {menuData.map((menu) => {
                   return (
                     <li
@@ -50,7 +53,7 @@ const Main = (props: IMainProps) => {
             </nav>
           </div>
           <a
-            className="pointer-events-auto flex place-items-center gap-2 p-0 lg:p-2 lg:text-lg"
+            className="pointer-events-auto hidden place-items-center gap-2 p-0 sm:flex lg:p-2 lg:text-lg"
             href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -65,6 +68,71 @@ const Main = (props: IMainProps) => {
               priority
             />
           </a>
+          <button
+            type="button"
+            className="flex sm:hidden"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+          <Dialog
+            as="div"
+            className="sm:hidden"
+            open={mobileMenuOpen}
+            onClose={setMobileMenuOpen}
+          >
+            <div className="fixed inset-0 z-10">
+              <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto from-zinc-200 px-8 py-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+                <div className="flex items-center justify-between">
+                  <h1 className="font-antonio text-2xl font-bold text-gray-900 dark:text-gray-100">
+                    <Link href="/">{AppConfig.title}</Link>
+                  </h1>
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-700 dark:text-gray-400"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    <span className="sr-only">Close main menu</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="mt-6 flow-root">
+                  <div className="-my-6 divide-y divide-gray-500/10">
+                    <div className="space-y-2 py-4">
+                      {menuData.map((menu) => {
+                        return (
+                          <Link
+                            href={menu.path}
+                            className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
+                            key={menu.id}
+                          >
+                            {menu.name}
+                          </Link>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+                <a
+                  className="pointer-events-auto absolute bottom-4 -mx-8 block w-full place-items-center gap-2 overflow-hidden p-0 text-center"
+                  href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  By{' '}
+                  <Image
+                    src="/vercel.svg"
+                    alt="Vercel Logo"
+                    className="inline-block dark:invert"
+                    width={100}
+                    height={24}
+                    priority
+                  />
+                </a>
+              </Dialog.Panel>
+            </div>
+          </Dialog>
         </header>
         <main className="flex min-h-screen flex-col p-8 pt-32 lg:p-12 lg:pt-48">
           {props.children}

diff --git a/tsconfig.json b/tsconfig.json
@@ -46,5 +46,11 @@
     }
   },
   "exclude": ["./out/**/*", "./node_modules/**/*"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".storybook/*.ts"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".storybook/*.ts"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1562,6 +1562,18 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@headlessui/react@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
+  integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
+  dependencies:
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
+  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
+
 "@hookform/resolvers@^3.3.2":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.2.tgz#5c40f06fe8137390b071d961c66d27ee8f76f3bc"
@@ -5599,7 +5611,7 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==