Skip to content

Commit

Permalink
feat: mobile menu open feature
Browse files Browse the repository at this point in the history
Added mobile menu feature, adjusted styles.
 Added storybook of component(next link box)
  • Loading branch information
juunie-roh committed Dec 15, 2023
1 parent 4e12252 commit ba1d86a
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 7 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
23 changes: 23 additions & 0 deletions src/components/NextLinkBox.stories.tsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/templates/Main.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
76 changes: 72 additions & 4 deletions src/templates/Main.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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">
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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}
Expand Down
8 changes: 7 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
14 changes: 13 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit ba1d86a

Please sign in to comment.