必須の指摘を修正しました。更新したのは Navbar.tsx です。
修正内容は2点です。 /fertilizer/masters を 施肥計画 のアクティブ判定から除外 運搬計画 のアイコンを FlaskConical から Truck に変更 確認は docker compose exec -T frontend npx tsc --noEmit で通っています。今回のレビューで必須だった重複アクティブはこれで解消しています
This commit is contained in:
akira
@@ -1,213 +1,503 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useRouter, usePathname } from 'next/navigation';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { LogOut, Wheat, MapPin, FileText, Upload, LayoutDashboard, History, Shield, KeyRound, Cloud, Sprout, FlaskConical, Package, NotebookText, PencilLine, Construction, Tractor } from 'lucide-react';
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ChevronDown,
|
||||||
|
Cloud,
|
||||||
|
FileText,
|
||||||
|
History,
|
||||||
|
KeyRound,
|
||||||
|
LayoutDashboard,
|
||||||
|
LogOut,
|
||||||
|
MapPin,
|
||||||
|
Menu,
|
||||||
|
NotebookText,
|
||||||
|
Package,
|
||||||
|
PencilLine,
|
||||||
|
Shield,
|
||||||
|
Sprout,
|
||||||
|
Tractor,
|
||||||
|
Truck,
|
||||||
|
Upload,
|
||||||
|
Construction,
|
||||||
|
Wheat,
|
||||||
|
X,
|
||||||
|
type LucideIcon,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { logout } from '@/lib/api';
|
import { logout } from '@/lib/api';
|
||||||
|
|
||||||
|
type NavItem = {
|
||||||
|
label: string;
|
||||||
|
href: string;
|
||||||
|
icon?: LucideIcon;
|
||||||
|
match?: (pathname: string) => boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NavGroup = {
|
||||||
|
key: string;
|
||||||
|
label: string;
|
||||||
|
type: 'link' | 'group';
|
||||||
|
href?: string;
|
||||||
|
icon?: LucideIcon;
|
||||||
|
items?: NavItem[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const matchesHref = (pathname: string, href: string) =>
|
||||||
|
pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
|
||||||
|
const navGroups: NavGroup[] = [
|
||||||
|
{
|
||||||
|
key: 'home',
|
||||||
|
label: 'ホーム',
|
||||||
|
type: 'link',
|
||||||
|
href: '/dashboard',
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'planning',
|
||||||
|
label: '計画',
|
||||||
|
type: 'group',
|
||||||
|
icon: Wheat,
|
||||||
|
items: [
|
||||||
|
{ label: '作付け計画', href: '/allocation', icon: Wheat },
|
||||||
|
{
|
||||||
|
label: '施肥計画',
|
||||||
|
href: '/fertilizer',
|
||||||
|
icon: Sprout,
|
||||||
|
match: (pathname) =>
|
||||||
|
matchesHref(pathname, '/fertilizer') &&
|
||||||
|
!matchesHref(pathname, '/fertilizer/spreading') &&
|
||||||
|
!matchesHref(pathname, '/fertilizer/masters'),
|
||||||
|
},
|
||||||
|
{ label: '田植え計画', href: '/rice-transplant', icon: Tractor },
|
||||||
|
{ label: '運搬計画', href: '/distribution', icon: Truck },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'records',
|
||||||
|
label: '実績',
|
||||||
|
type: 'group',
|
||||||
|
icon: NotebookText,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: '散布実績',
|
||||||
|
href: '/fertilizer/spreading',
|
||||||
|
icon: PencilLine,
|
||||||
|
},
|
||||||
|
{ label: '畔塗記録', href: '/levee-work', icon: Construction },
|
||||||
|
{ label: '作業記録', href: '/workrecords', icon: NotebookText },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'masters',
|
||||||
|
label: 'マスター',
|
||||||
|
type: 'group',
|
||||||
|
icon: Package,
|
||||||
|
items: [
|
||||||
|
{ label: '圃場管理', href: '/fields', icon: MapPin },
|
||||||
|
{
|
||||||
|
label: '資材マスタ',
|
||||||
|
href: '/materials/masters',
|
||||||
|
icon: Package,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '肥料マスタ',
|
||||||
|
href: '/fertilizer/masters',
|
||||||
|
icon: Sprout,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'support',
|
||||||
|
label: '帳票・連携',
|
||||||
|
type: 'group',
|
||||||
|
icon: FileText,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: '在庫管理',
|
||||||
|
href: '/materials',
|
||||||
|
icon: Package,
|
||||||
|
match: (pathname) =>
|
||||||
|
matchesHref(pathname, '/materials') && !matchesHref(pathname, '/materials/masters'),
|
||||||
|
},
|
||||||
|
{ label: '帳票出力', href: '/reports', icon: FileText },
|
||||||
|
{ label: 'データ取込', href: '/import', icon: Upload },
|
||||||
|
{ label: '気象', href: '/weather', icon: Cloud },
|
||||||
|
{ label: 'メール履歴', href: '/mail/history', icon: History },
|
||||||
|
{ label: 'メールルール', href: '/mail/rules', icon: Shield },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const userActions: NavItem[] = [
|
||||||
|
{ label: 'パスワード変更', href: '/settings/password', icon: KeyRound },
|
||||||
|
];
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const navRef = useRef<HTMLElement>(null);
|
||||||
|
const [openDesktopGroup, setOpenDesktopGroup] = useState<string | null>(null);
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
const [openMobileGroups, setOpenMobileGroups] = useState<string[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handlePointerDown = (event: MouseEvent) => {
|
||||||
|
if (!navRef.current?.contains(event.target as Node)) {
|
||||||
|
setOpenDesktopGroup(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
setOpenDesktopGroup(null);
|
||||||
|
setMobileMenuOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handlePointerDown);
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handlePointerDown);
|
||||||
|
document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOpenDesktopGroup(null);
|
||||||
|
setMobileMenuOpen(false);
|
||||||
|
setOpenMobileGroups((prev) => {
|
||||||
|
const activeKey = getActiveGroupKey(pathname);
|
||||||
|
if (!activeKey) return prev;
|
||||||
|
return prev.includes(activeKey) ? prev : [activeKey];
|
||||||
|
});
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
logout();
|
logout();
|
||||||
};
|
};
|
||||||
|
|
||||||
const isActive = (path: string) => pathname === path;
|
const navigateTo = (href: string) => {
|
||||||
|
setOpenDesktopGroup(null);
|
||||||
|
setMobileMenuOpen(false);
|
||||||
|
router.push(href);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDesktopGroup = (key: string) => {
|
||||||
|
setOpenDesktopGroup((prev) => (prev === key ? null : key));
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMobileGroup = (key: string) => {
|
||||||
|
setOpenMobileGroups((prev) =>
|
||||||
|
prev.includes(key) ? prev.filter((groupKey) => groupKey !== key) : [...prev, key]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMobileMenu = () => {
|
||||||
|
if (!mobileMenuOpen) {
|
||||||
|
const activeKey = getActiveGroupKey(pathname);
|
||||||
|
setOpenMobileGroups(activeKey ? [activeKey] : []);
|
||||||
|
}
|
||||||
|
setMobileMenuOpen((prev) => !prev);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="bg-white shadow-sm border-b border-gray-200">
|
<nav ref={navRef} className="border-b border-gray-200 bg-white shadow-sm">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||||
<div className="flex justify-between h-16">
|
<div className="flex h-16 items-center justify-between">
|
||||||
<div className="flex items-center space-x-8">
|
<div className="flex items-center gap-4 lg:gap-8">
|
||||||
<button onClick={() => router.push('/dashboard')} className="text-xl font-bold text-green-700 hover:text-green-800 transition-colors">
|
<button
|
||||||
|
onClick={() => navigateTo('/dashboard')}
|
||||||
|
className="text-lg font-bold text-green-700 transition-colors hover:text-green-800 sm:text-xl"
|
||||||
|
>
|
||||||
KeinaSystem
|
KeinaSystem
|
||||||
</button>
|
</button>
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<button
|
<div className="hidden items-center gap-2 lg:flex">
|
||||||
onClick={() => router.push('/dashboard')}
|
{navGroups.map((group) =>
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
group.type === 'link' ? (
|
||||||
isActive('/dashboard')
|
<DesktopLinkButton
|
||||||
? 'text-green-700 bg-green-50'
|
key={group.key}
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
group={group}
|
||||||
}`}
|
pathname={pathname}
|
||||||
>
|
onNavigate={navigateTo}
|
||||||
<LayoutDashboard className="h-4 w-4 mr-2" />
|
/>
|
||||||
ホーム
|
) : (
|
||||||
</button>
|
<DesktopGroupButton
|
||||||
<button
|
key={group.key}
|
||||||
onClick={() => router.push('/allocation')}
|
group={group}
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
isOpen={openDesktopGroup === group.key}
|
||||||
isActive('/allocation')
|
pathname={pathname}
|
||||||
? 'text-green-700 bg-green-50'
|
onNavigate={navigateTo}
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
onToggle={toggleDesktopGroup}
|
||||||
}`}
|
/>
|
||||||
>
|
)
|
||||||
<Wheat className="h-4 w-4 mr-2" />
|
)}
|
||||||
作付け計画
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/fields')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/fields') || pathname?.startsWith('/fields/')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<MapPin className="h-4 w-4 mr-2" />
|
|
||||||
圃場管理
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/reports')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/reports') || pathname?.startsWith('/reports/')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FileText className="h-4 w-4 mr-2" />
|
|
||||||
帳票出力
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/import')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/import')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Upload className="h-4 w-4 mr-2" />
|
|
||||||
データ取込
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/mail/history')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/mail/history')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<History className="h-4 w-4 mr-2" />
|
|
||||||
メール履歴
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/mail/rules')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/mail/rules')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Shield className="h-4 w-4 mr-2" />
|
|
||||||
メールルール
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/weather')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
isActive('/weather')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Cloud className="h-4 w-4 mr-2" />
|
|
||||||
気象
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/fertilizer')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/fertilizer') && !pathname?.startsWith('/fertilizer/spreading')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Sprout className="h-4 w-4 mr-2" />
|
|
||||||
施肥計画
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/rice-transplant')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/rice-transplant')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Tractor className="h-4 w-4 mr-2" />
|
|
||||||
田植え計画
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/fertilizer/spreading')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/fertilizer/spreading')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<PencilLine className="h-4 w-4 mr-2" />
|
|
||||||
散布実績
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/distribution')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/distribution')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FlaskConical className="h-4 w-4 mr-2" />
|
|
||||||
運搬計画
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/levee-work')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/levee-work')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Construction className="h-4 w-4 mr-2" />
|
|
||||||
畔塗記録
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/materials')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/materials')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Package className="h-4 w-4 mr-2" />
|
|
||||||
在庫管理
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => router.push('/workrecords')}
|
|
||||||
className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
|
|
||||||
pathname?.startsWith('/workrecords')
|
|
||||||
? 'text-green-700 bg-green-50'
|
|
||||||
: 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<NotebookText className="h-4 w-4 mr-2" />
|
|
||||||
作業記録
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<button
|
<div className="hidden items-center gap-1 lg:flex">
|
||||||
onClick={() => router.push('/settings/password')}
|
{userActions.map((item) => (
|
||||||
className="flex items-center px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
|
<button
|
||||||
title="パスワード変更"
|
key={item.href}
|
||||||
>
|
onClick={() => navigateTo(item.href)}
|
||||||
<KeyRound className="h-4 w-4" />
|
className={`rounded-md px-3 py-2 text-sm transition-colors ${
|
||||||
</button>
|
isItemActive(item, pathname)
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
title={item.label}
|
||||||
|
>
|
||||||
|
{item.icon ? <item.icon className="h-4 w-4" /> : item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
<button
|
<button
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
className="flex items-center rounded-md px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900"
|
||||||
>
|
>
|
||||||
<LogOut className="h-4 w-4 mr-2" />
|
<LogOut className="mr-2 h-4 w-4" />
|
||||||
ログアウト
|
ログアウト
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 lg:hidden">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateTo('/settings/password')}
|
||||||
|
className={`rounded-md p-2 transition-colors ${
|
||||||
|
isItemActive(userActions[0], pathname)
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
title="パスワード変更"
|
||||||
|
>
|
||||||
|
<KeyRound className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={toggleMobileMenu}
|
||||||
|
className="rounded-md p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
aria-expanded={mobileMenuOpen}
|
||||||
|
aria-label="メニューを開く"
|
||||||
|
>
|
||||||
|
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<div className="border-t border-gray-200 py-3 lg:hidden">
|
||||||
|
<div className="space-y-1">
|
||||||
|
{navGroups.map((group) =>
|
||||||
|
group.type === 'link' ? (
|
||||||
|
<MobileLinkButton
|
||||||
|
key={group.key}
|
||||||
|
group={group}
|
||||||
|
pathname={pathname}
|
||||||
|
onNavigate={navigateTo}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<MobileGroupButton
|
||||||
|
key={group.key}
|
||||||
|
group={group}
|
||||||
|
isOpen={openMobileGroups.includes(group.key)}
|
||||||
|
pathname={pathname}
|
||||||
|
onNavigate={navigateTo}
|
||||||
|
onToggle={toggleMobileGroup}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="mt-3 flex w-full items-center rounded-lg px-3 py-3 text-sm text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
>
|
||||||
|
<LogOut className="mr-3 h-4 w-4" />
|
||||||
|
ログアウト
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function DesktopLinkButton({
|
||||||
|
group,
|
||||||
|
pathname,
|
||||||
|
onNavigate,
|
||||||
|
}: {
|
||||||
|
group: NavGroup;
|
||||||
|
pathname: string;
|
||||||
|
onNavigate: (href: string) => void;
|
||||||
|
}) {
|
||||||
|
const active = isGroupActive(group, pathname);
|
||||||
|
const Icon = group.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => group.href && onNavigate(group.href)}
|
||||||
|
className={`flex items-center rounded-md px-3 py-2 text-sm transition-colors ${
|
||||||
|
active ? 'bg-green-50 text-green-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{Icon ? <Icon className="mr-2 h-4 w-4" /> : null}
|
||||||
|
{group.label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DesktopGroupButton({
|
||||||
|
group,
|
||||||
|
isOpen,
|
||||||
|
pathname,
|
||||||
|
onNavigate,
|
||||||
|
onToggle,
|
||||||
|
}: {
|
||||||
|
group: NavGroup;
|
||||||
|
isOpen: boolean;
|
||||||
|
pathname: string;
|
||||||
|
onNavigate: (href: string) => void;
|
||||||
|
onToggle: (key: string) => void;
|
||||||
|
}) {
|
||||||
|
const active = isGroupActive(group, pathname);
|
||||||
|
const Icon = group.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => onToggle(group.key)}
|
||||||
|
className={`flex items-center rounded-md px-3 py-2 text-sm transition-colors ${
|
||||||
|
active || isOpen
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
aria-expanded={isOpen}
|
||||||
|
>
|
||||||
|
{Icon ? <Icon className="mr-2 h-4 w-4" /> : null}
|
||||||
|
{group.label}
|
||||||
|
<ChevronDown className={`ml-2 h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && group.items ? (
|
||||||
|
<div className="absolute left-0 top-full z-20 mt-2 w-64 rounded-xl border border-gray-200 bg-white p-2 shadow-lg">
|
||||||
|
{group.items.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.href}
|
||||||
|
onClick={() => onNavigate(item.href)}
|
||||||
|
className={`flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors ${
|
||||||
|
isItemActive(item, pathname)
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.icon ? <item.icon className="mr-3 h-4 w-4" /> : null}
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileLinkButton({
|
||||||
|
group,
|
||||||
|
pathname,
|
||||||
|
onNavigate,
|
||||||
|
}: {
|
||||||
|
group: NavGroup;
|
||||||
|
pathname: string;
|
||||||
|
onNavigate: (href: string) => void;
|
||||||
|
}) {
|
||||||
|
const active = isGroupActive(group, pathname);
|
||||||
|
const Icon = group.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => group.href && onNavigate(group.href)}
|
||||||
|
className={`flex w-full items-center rounded-lg px-3 py-3 text-left text-sm transition-colors ${
|
||||||
|
active ? 'bg-green-50 text-green-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{Icon ? <Icon className="mr-3 h-4 w-4" /> : null}
|
||||||
|
{group.label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileGroupButton({
|
||||||
|
group,
|
||||||
|
isOpen,
|
||||||
|
pathname,
|
||||||
|
onNavigate,
|
||||||
|
onToggle,
|
||||||
|
}: {
|
||||||
|
group: NavGroup;
|
||||||
|
isOpen: boolean;
|
||||||
|
pathname: string;
|
||||||
|
onNavigate: (href: string) => void;
|
||||||
|
onToggle: (key: string) => void;
|
||||||
|
}) {
|
||||||
|
const active = isGroupActive(group, pathname);
|
||||||
|
const Icon = group.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border border-gray-200">
|
||||||
|
<button
|
||||||
|
onClick={() => onToggle(group.key)}
|
||||||
|
className={`flex w-full items-center justify-between rounded-lg px-3 py-3 text-left text-sm transition-colors ${
|
||||||
|
active || isOpen
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
aria-expanded={isOpen}
|
||||||
|
>
|
||||||
|
<span className="flex items-center">
|
||||||
|
{Icon ? <Icon className="mr-3 h-4 w-4" /> : null}
|
||||||
|
{group.label}
|
||||||
|
</span>
|
||||||
|
<ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && group.items ? (
|
||||||
|
<div className="space-y-1 border-t border-gray-200 px-2 py-2">
|
||||||
|
{group.items.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.href}
|
||||||
|
onClick={() => onNavigate(item.href)}
|
||||||
|
className={`flex w-full items-center rounded-lg px-3 py-2.5 text-left text-sm transition-colors ${
|
||||||
|
isItemActive(item, pathname)
|
||||||
|
? 'bg-green-50 text-green-700'
|
||||||
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.icon ? <item.icon className="mr-3 h-4 w-4" /> : null}
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isGroupActive(group: NavGroup, pathname: string) {
|
||||||
|
if (group.type === 'link') {
|
||||||
|
return group.href ? matchesHref(pathname, group.href) : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return group.items?.some((item) => isItemActive(item, pathname)) ?? false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isItemActive(item: NavItem, pathname: string) {
|
||||||
|
if (item.match) {
|
||||||
|
return item.match(pathname);
|
||||||
|
}
|
||||||
|
return matchesHref(pathname, item.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getActiveGroupKey(pathname: string) {
|
||||||
|
return navGroups.find((group) => isGroupActive(group, pathname))?.key ?? null;
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user