✨feat: add navbar

OpenUp-LabTakizawa · Mar 3, 2024 · 4e395d4 · 4e395d4
1 parent 19191d8
commit 4e395d4
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 14 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Navbar } from '@/components/navbar'
 import type { Metadata } from 'next'
 import { Sawarabi_Gothic } from 'next/font/google'
 import type React from 'react'
@@ -20,7 +21,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ja">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/app/page.test.tsx b/app/page.test.tsx
@@ -6,15 +6,14 @@ render(<Home />)
 
 test('p test', () => {
   const p = document.querySelectorAll('p')
-  expect(p[0]?.innerText).toEqual('Get started by editing\u00A0app/page.tsx')
-  expect(p[1]?.innerText).toEqual(
+  expect(p[0]?.innerText).toEqual(
     'Find in-depth information about Next.js features and API.',
   )
-  expect(p[2]?.innerText).toEqual(
+  expect(p[1]?.innerText).toEqual(
     'Learn about Next.js in an interactive course with\u00A0quizzes!',
   )
-  expect(p[3]?.innerText).toEqual('Explore starter templates for Next.js.')
-  expect(p[4]?.innerText).toEqual(
+  expect(p[2]?.innerText).toEqual('Explore starter templates for Next.js.')
+  expect(p[3]?.innerText).toEqual(
     'Instantly deploy your Next.js site to a shareable URL with Vercel.',
   )
 })

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,10 +4,6 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
           <a
             className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import favicon from '@/public/favicon.png'
+import { Dialog } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <>
+      <nav
+        className="mx-auto flex max-w-2xl items-center justify-between p-6 lg:px-8"
+        aria-label="Global"
+      >
+        <div className="flex lg:flex-1">
+          <Link href="/" className="-m-1.5 p-1.5">
+            <span className="sr-only">Your Company</span>
+            <Image className="h-8 w-auto" src={favicon} alt="" />
+          </Link>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Product
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Features
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Marketplace
+          </Link>
+          <Link
+            href="/"
+            className="text-sm font-semibold leading-6 text-gray-900"
+          >
+            Company
+          </Link>
+        </div>
+      </nav>
+      <Dialog
+        as="div"
+        className="lg: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 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                alt=""
+              />
+            </Link>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close 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-6">
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Product
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Features
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Marketplace
+                </Link>
+                <Link
+                  href="/"
+                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Company
+                </Link>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </>
+  )
+}
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "lint": "bunx @biomejs/biome check --apply ."
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
     "next": "canary",
     "react": "canary",
     "react-dom": "canary"

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/yarn.lock b/yarn.lock
@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 9EB599FA85C6D145-d71d77ba54ab93e8-4FAC13CB4CE394F8-d4efc82b78786ec3
+# bun ./bun.lockb --hash: 233EEA1FDBF62BC5-5001897882730150-F28EA4C821854D37-c56aed757db660a8
 
 
 "@alloc/quick-lru@^5.2.0":
@@ -98,6 +98,19 @@
   dependencies:
     happy-dom "^13.6.2"
 
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
+"@heroicons/react@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz"
+  integrity sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
@@ -231,6 +244,18 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.1.3.tgz"
+  integrity sha512-YCzcbF/Ws/uZ0q3Z6fagH+JVhx4JLvbSflgldMgLsuvB8aXjZLLb3HvrEVxY480F9wFlBiXlvQxOyXb5ENPrNA==
+  dependencies:
+    "@tanstack/virtual-core" "3.1.3"
+
+"@tanstack/[email protected]":
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.3.tgz"
+  integrity sha512-Y5B4EYyv1j9V8LzeAoOVeTg0LI7Fo5InYKgAjkY1Pu9GjtUwX/EKxNcU7ng3sKr99WEf+bPTcktAeybyMOYo+g==
+
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz"
@@ -472,7 +497,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -1224,14 +1249,14 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-"[email protected]", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@^18.0.0, react@^18.2.0, react@canary:
+"[email protected]", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@^16 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, react@canary:
   version "18.3.0-canary-2f8f77602-20240229"
   resolved "https://registry.npmjs.org/react/-/react-18.3.0-canary-2f8f77602-20240229.tgz"
   integrity sha512-UTV7PJKz9UY5MZNH8TI44ftSjzibBzXBfI0/u09Rx+bIif7N7djKks0mPy26z1J2jNSsOtn45qcRGailzUCqww==
   dependencies:
     loose-envify "^1.1.0"
 
-react-dom@^18.0.0, react-dom@^18.2.0, react-dom@canary:
+"react-dom@^16 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, react-dom@canary:
   version "18.3.0-canary-2f8f77602-20240229"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0-canary-2f8f77602-20240229.tgz"
   integrity sha512-uDX0koU0haiks+XZ7F0CTHT+0jx3WiKp9QVshRcFdO9ojF2aAnjJY6PUrRy4oHXEXUkI+frhqIh31V82zFtPhg==