✨feat: update navbar and add theme selection

OpenUp-LabTakizawa · Mar 9, 2024 · 4f523f6 · 4f523f6
1 parent 74d1c27
commit 4f523f6
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 180 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,27 +1,3 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,7 @@
-import { Navbar } from '@/components/navbar'
 import type { Metadata } from 'next'
-import { Sawarabi_Gothic } from 'next/font/google'
 import type React from 'react'
 import './globals.css'
-
-const inter = Sawarabi_Gothic({
-  subsets: ['latin'],
-  weight: '400',
-})
+import { Navbar } from './navbar'
 
 export const metadata: Metadata = {
   title: 'OPENUP ラボ滝沢',
@@ -21,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ja">
-      <body className={inter.className}>
+      <body>
         <Navbar />
         {children}
       </body>

diff --git a/app/navbar.tsx b/app/navbar.tsx
@@ -0,0 +1,135 @@
+import {
+  Bars3CenterLeftIcon,
+  ChevronDownIcon,
+  EnvelopeIcon,
+  NewspaperIcon,
+  QuestionMarkCircleIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline'
+import Link from 'next/link'
+
+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 },
+]
+
+const themeLists = [
+  { name: 'デフォルト', value: 'light' },
+  { name: 'ダーク', value: 'dark' },
+  { name: 'カップケーキ', value: 'cupcake' },
+  { name: 'マルハナバチ', value: 'bumblebee' },
+  { name: 'エメラルド', value: 'emerald' },
+  { name: 'コーポレート', value: 'corporate' },
+  { name: 'シンセウェイブ', value: 'synthwave' },
+  { name: 'レトロ', value: 'retro' },
+  { name: 'サイバーパンク', value: 'cyberpunk' },
+  { name: 'バレンタイン', value: 'valentine' },
+  { name: 'ハロウィン', value: 'halloween' },
+  { name: 'ガーデン', value: 'garden' },
+  { name: 'フォレスト', value: 'forest' },
+  { name: 'アクア', value: 'aqua' },
+  { name: 'ローファイ', value: 'lofi' },
+  { name: 'パステル', value: 'pastel' },
+  { name: 'ファンタジー', value: 'fantasy' },
+  { name: 'ワイヤーフレーム', value: 'wireframe' },
+  { name: 'ブラック', value: 'black' },
+  { name: 'ラグジュアリー', value: 'luxury' },
+  { name: 'ドラキュラ', value: 'dracula' },
+  { name: 'CMYK', value: 'cmyk' },
+  { name: 'オータム', value: 'autumn' },
+  { name: 'ビジネス', value: 'business' },
+  { name: 'アシッド', value: 'acid' },
+  { name: 'レモネード', value: 'lemonade' },
+  { name: 'ナイト', value: 'night' },
+  { name: 'コーヒー', value: 'coffee' },
+  { name: 'ウィンター', value: 'winter' },
+  { name: 'ディム', value: 'dim' },
+  { name: 'ノール', value: 'nord' },
+  { name: 'サンセット', value: 'sunset' },
+]
+
+export function Navbar() {
+  return (
+    <div className="navbar bg-base-100">
+      <div className="navbar-start">
+        <DropdownMenuForSP />
+        <Link href="/" className="btn btn-ghost text-xl">
+          {siteTitle}
+        </Link>
+      </div>
+      <NavItems />
+      <ThemeLists />
+    </div>
+  )
+}
+
+function DropdownMenuForSP() {
+  return (
+    <div className="dropdown">
+      <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+        <Bars3CenterLeftIcon className="h-7 w-7" />
+      </div>
+      <ul className="menu menu-sm dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow">
+        {navItems.map((item) => (
+          <li key={item.name}>
+            <Link href={item.href}>
+              <item.icon className="h-5 w-5" />
+              {item.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function NavItems() {
+  return (
+    <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>
+  )
+}
+
+function ThemeLists() {
+  return (
+    <div className="navbar-end">
+      <div className="dropdown dropdown-end">
+        <div tabIndex={0} role="button" className="btn m-1">
+          テーマ
+          <ChevronDownIcon className="h-5 w-5" />
+        </div>
+        <ul className="dropdown-content z-[1] w-52 rounded-box bg-base-300 p-2 shadow-2xl">
+          {themeLists.map((item) => (
+            <li key={item.name}>
+              <input
+                type="radio"
+                name="theme-dropdown"
+                className="theme-controller btn btn-sm btn-block btn-ghost justify-start"
+                aria-label={item.name}
+                value={item.value}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/navbar.tsx b/components/navbar.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,13 +2,46 @@ import daisyui from 'daisyui'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
-  content: [
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {},
   },
   plugins: [daisyui],
+  daisyui: {
+    themes: [
+      'light',
+      'dark',
+      'cupcake',
+      'bumblebee',
+      'emerald',
+      'corporate',
+      'synthwave',
+      'retro',
+      'cyberpunk',
+      'valentine',
+      'halloween',
+      'garden',
+      'forest',
+      'aqua',
+      'lofi',
+      'pastel',
+      'fantasy',
+      'wireframe',
+      'black',
+      'luxury',
+      'dracula',
+      'cmyk',
+      'autumn',
+      'business',
+      'acid',
+      'lemonade',
+      'night',
+      'coffee',
+      'winter',
+      'dim',
+      'nord',
+      'sunset',
+    ],
+  },
 }
 export default config