Skip to content

Commit

Permalink
Merge pull request #170 from Marukome0743/pr170
Browse files Browse the repository at this point in the history 
✨feat: update navbar with daisyui
  • Loading branch information
@Marukome0743
Marukome0743 authored Mar 8, 2024
2 parents d2eb87f + c977ed6 commit 1b2cf40
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 150 deletions.
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const inter = Sawarabi_Gothic({
})

export const metadata: Metadata = {
title: 'OpenUp ラボ滝沢',
title: 'OPENUP ラボ滝沢',
description: '地域に寄り添った社会課題解決コミュニティ',
}

Expand Down
Binary file modified bun.lockb
View file
Binary file not shown.
164 changes: 50 additions & 114 deletions components/navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,58 @@
'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 {
Bars3CenterLeftIcon,
EnvelopeIcon,
NewspaperIcon,
QuestionMarkCircleIcon,
UserGroupIcon,
} from '@heroicons/react/24/outline'
import Link from 'next/link'
import { useState } from 'react'

export function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const siteTitle = 'OPENUP ラボ滝沢'

const navItems = [
{ name: '最新情報', href: '/info', icon: NewspaperIcon },
{ name: 'ラボ滝沢とは？', href: '/about', icon: QuestionMarkCircleIcon },
{ name: 'メンバー', href: '/member', icon: UserGroupIcon },
{ name: 'お問い合わせ', href: '/contact', icon: EnvelopeIcon },
]

export function Navbar() {
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 className="navbar bg-base-100">
<div className="navbar-start">
<Link href="/" className="btn btn-ghost text-xl">
{siteTitle}
</Link>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">
{navItems.map((item) => (
<li key={item.name}>
<Link href={item.href}>
<item.icon className="h-5 w-5" />
{item.name}
</Link>
</li>
))}
</ul>
</div>
<div className="navbar-end">
<div className="dropdown dropdown-end">
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
<Bars3CenterLeftIcon className="h-7 w-7" />
</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
<ul className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
{navItems.map((item) => (
<li key={item.name}>
<Link href={item.href}>
<item.icon className="h-5 w-5" />
{item.name}
</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>
</>
</li>
))}
</ul>
</div>
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"lint": "bunx @biomejs/biome check --apply ."
},
"dependencies": {
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.1",
"next": "canary",
"react": "canary",
Expand All @@ -24,6 +23,7 @@
"@types/node": "^20.11.25",
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"daisyui": "^4.7.2",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"typescript": "^5.4.2"
Expand Down
11 changes: 3 additions & 8 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import daisyui from 'daisyui'
import type { Config } from 'tailwindcss'

const config: Config = {
Expand All @@ -6,14 +7,8 @@ const config: Config = {
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
extend: {},
},
plugins: [],
plugins: [daisyui],
}
export default config
60 changes: 34 additions & 26 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
# bun ./bun.lockb --hash: 25D090FBF0B96FC7-bc2d2ccb6bc05721-19FDEA26BC18C850-ff83a385f6b8e8de
# bun ./bun.lockb --hash: 25360589F5827100-b593c8c482bc023f-8F04990E8128EAC8-76df5342d83a8d1e


"@alloc/quick-lru@^5.2.0":
Expand Down Expand Up @@ -98,14 +98,6 @@
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"
Expand Down Expand Up @@ -244,18 +236,6 @@
"@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"
Expand Down Expand Up @@ -497,7 +477,7 @@ chokidar@^3.5.3:
optionalDependencies:
fsevents "~2.3.2"

[email protected], client-only@^0.0.1:
[email protected]:
version "0.0.1"
resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
Expand Down Expand Up @@ -540,6 +520,14 @@ cross-spawn@^7.0.0:
shebang-command "^2.0.0"
which "^2.0.1"

css-selector-tokenizer@^0.8:
version "0.8.0"
resolved "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz"
integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
dependencies:
cssesc "^3.0.0"
fastparse "^1.1.2"

cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
Expand All @@ -550,6 +538,21 @@ csstype@^3.0.2:
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==

culori@^3:
version "3.3.0"
resolved "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz"
integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==

daisyui@^4.7.2:
version "4.7.2"
resolved "https://registry.npmjs.org/daisyui/-/daisyui-4.7.2.tgz"
integrity sha512-9UCss12Zmyk/22u+JbkVrHHxOzFOyY17HuqP5LeswI4hclbj6qbjJTovdj2zRy8cCH6/n6Wh0lTLjriGnyGh0g==
dependencies:
css-selector-tokenizer "^0.8"
culori "^3"
picocolors "^1"
postcss-js "^4"

deep-equal@^2.0.5:
version "2.2.3"
resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz"
Expand Down Expand Up @@ -670,6 +673,11 @@ fast-glob@^3.3.0:
merge2 "^1.3.0"
micromatch "^4.0.4"

fastparse@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz"
integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==

fastq@^1.6.0:
version "1.17.1"
resolved "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz"
Expand Down Expand Up @@ -1141,7 +1149,7 @@ path-scurry@^1.10.1:
lru-cache "^9.1.1 || ^10.0.0"
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"

picocolors@^1.0.0:
picocolors@^1:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
Expand Down Expand Up @@ -1193,7 +1201,7 @@ postcss-import@^15.1.0:
read-cache "^1.0.0"
resolve "^1.1.7"

postcss-js@^4.0.1:
postcss-js@^4, postcss-js@^4.0.1:
version "4.0.1"
resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz"
integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
Expand Down Expand Up @@ -1242,12 +1250,12 @@ 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", "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:
"[email protected]", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@^18.0.0, react@^18.2.0, react@canary:
version "18.3.0-canary-0066e0b68-20240306"
resolved "https://registry.npmjs.org/react/-/react-18.3.0-canary-0066e0b68-20240306.tgz"
integrity sha512-N20oEKUx9SRGiFcsKEFnrzeRN3P1b/OeHgJQeEIRJ3RHDlBZEAQSlsYv87r3rjzuvg9aXJQtqnZHADdozOttAw==

"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:
react-dom@^18.0.0, react-dom@^18.2.0, react-dom@canary:
version "18.3.0-canary-0066e0b68-20240306"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0-canary-0066e0b68-20240306.tgz"
integrity sha512-oQfHfDcZjRpbRn8Lv+AGBySFxnC7DXp5QxxfQ9kkbEu4w2vdggZ+nJhmvlLB7KOn1917Mr50/Faslg3fhKnibg==
Expand Down

0 comments on commit 1b2cf40

Please sign in to comment.