子仓库提交
This commit is contained in:
352
src/components/layouts/Navbar.tsx
Normal file
352
src/components/layouts/Navbar.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
'use client';
|
||||
|
||||
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
|
||||
import { Sprout, Map, Clipboard, Package, Brain, Droplets, Settings } from 'lucide-react';
|
||||
import { MessageBell } from './components/MessageBell';
|
||||
import { UserProfile } from './components/UserProfile';
|
||||
import { ThemeToggle } from './ThemeToggle';
|
||||
import { useElementHeight } from '@/hooks/useElementHeight';
|
||||
import { useViewHeight } from '@/hooks/useViewHeight';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
// 注释掉 Accordion 相关导入，因为不再需要二级菜单
|
||||
// import {
|
||||
// Accordion,
|
||||
// AccordionContent,
|
||||
// AccordionItem,
|
||||
// AccordionTrigger,
|
||||
// } from "@/components/ui/accordion";
|
||||
import { useLayoutStore } from '@/stores/useLayoutStore';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
|
||||
interface MenuItem {
|
||||
title: string;
|
||||
url: string;
|
||||
description?: string;
|
||||
icon?: React.ReactNode;
|
||||
items?: MenuItem[];
|
||||
}
|
||||
|
||||
interface Navbar1Props {
|
||||
navbarData: {
|
||||
logo: {
|
||||
url: string;
|
||||
src: string;
|
||||
alt: string;
|
||||
title: string;
|
||||
};
|
||||
menu: MenuItem[];
|
||||
auth: {
|
||||
login: {
|
||||
title: string;
|
||||
url: string;
|
||||
};
|
||||
signup: {
|
||||
title: string;
|
||||
url: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
const Navbar1 = ({ navbarData }: Navbar1Props) => {
|
||||
const logo = navbarData.logo
|
||||
const menu = navbarData.menu
|
||||
const auth = navbarData.auth
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const containerStyle = {
|
||||
maxWidth:"100%",marginLeft:"0px",marginRight:"0px",paddingLeft:"1rem",paddingRight:"0rem"
|
||||
}
|
||||
|
||||
// 检查当前路径是否匹配菜单项
|
||||
const isMenuActive = (url: string) => {
|
||||
// 精确匹配
|
||||
if (pathname === url) return true;
|
||||
// 检查是否是该菜单下的子路径
|
||||
if (pathname.startsWith(url + '/')) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 使用自定义 Hook 计算高度
|
||||
const { elementRef, updateHeight } = useElementHeight({
|
||||
immediate: true, // 立即计算高度
|
||||
onUpdate: (height: number) => {
|
||||
// 更新 Zustand store 中的状态
|
||||
const { setNavigatorHeight } = useLayoutStore.getState();
|
||||
setNavigatorHeight(height);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 监听页面高度变化
|
||||
useViewHeight();
|
||||
|
||||
const handleMessageClick = () => {
|
||||
// 处理消息点击事件，可以跳转到消息中心页面
|
||||
console.log('Navigate to message center');
|
||||
};
|
||||
|
||||
const handleProfileClick = () => {
|
||||
// 处理个人中心点击事件
|
||||
console.log('Navigate to profile page');
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-4" ref={elementRef}>
|
||||
<div className="container" style = {containerStyle}>
|
||||
{/* Desktop Menu */}
|
||||
<nav className="hidden justify-between lg:flex">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Logo */}
|
||||
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3 flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center transition-colors">
|
||||
<Sprout className="w-6 h-6 text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-primary transition-colors" style={{ color: 'var(--primary)' }}>智慧农业生产管理系统</h1>
|
||||
<p className="text-xs text-muted-foreground">Smart Agriculture Management System</p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0" style={{ maxWidth: '70vw' }}>
|
||||
<style jsx>{`
|
||||
div::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
div::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
div::-webkit-scrollbar-thumb {
|
||||
background-color: #d1d5db;
|
||||
border-radius: 3px;
|
||||
}
|
||||
div::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
div {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d1d5db transparent;
|
||||
}
|
||||
.navigation-menu-container {
|
||||
max-width: 70vw;
|
||||
}
|
||||
`}</style>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList className="flex gap-1 min-w-max">
|
||||
{menu.map((item) => renderMenuItem(item, isMenuActive, router))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2" style = {{alignItems:"center"}}>
|
||||
<ThemeToggle />
|
||||
<MessageBell onMessageClick={handleMessageClick} />
|
||||
<UserProfile onProfileClick={handleProfileClick} />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a href={logo.url} className="flex items-center gap-2">
|
||||
<img
|
||||
src={logo.src}
|
||||
className="max-h-8 dark:invert"
|
||||
alt={logo.alt}
|
||||
/>
|
||||
</a>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Menu className="size-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
<a href={logo.url} className="flex items-center gap-2">
|
||||
<img
|
||||
src={logo.src}
|
||||
className="max-h-8 dark:invert"
|
||||
alt={logo.alt}
|
||||
/>
|
||||
</a>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex flex-col gap-6 p-4">
|
||||
{/* 简化移动端菜单，不再使用 Accordion */}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
{menu.map((item) => renderMobileMenuItem(item, isMenuActive, router))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-center">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<MessageBell onMessageClick={handleMessageClick} />
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<UserProfile onProfileClick={handleProfileClick} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
|
||||
// 注释掉二级菜单相关代码，项目不需要二级菜单
|
||||
// if (item.items) {
|
||||
// return (
|
||||
// <NavigationMenuItem key={item.title}>
|
||||
// <NavigationMenuTrigger className="whitespace-nowrap">{item.title}</NavigationMenuTrigger>
|
||||
// <NavigationMenuContent className="bg-popover text-popover-foreground">
|
||||
// {item.items.map((subItem) => (
|
||||
//
|
||||
// <NavigationMenuLink asChild key={subItem.title} className="w-80">
|
||||
// <SubMenuLink item={subItem} />
|
||||
// </NavigationMenuLink>
|
||||
// ))}
|
||||
// </NavigationMenuContent>
|
||||
// </NavigationMenuItem>
|
||||
// );
|
||||
// }
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
router.push(item.url);
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<NavigationMenuLink
|
||||
href={item.url}
|
||||
onClick={handleClick}
|
||||
data-menu-item="true"
|
||||
data-menu-url={item.url}
|
||||
className={`
|
||||
inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium gap-2 whitespace-nowrap relative cursor-pointer
|
||||
${isMenuActive(item.url)
|
||||
? 'bg-primary/10'
|
||||
: 'bg-background hover:bg-muted hover:text-accent-foreground'
|
||||
}
|
||||
[&:not([data-active])]:text-foreground
|
||||
`}
|
||||
>
|
||||
{item.icon && (
|
||||
<span className={`
|
||||
shrink-0
|
||||
${isMenuActive(item.url)
|
||||
? 'text-primary'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
hover:text-primary
|
||||
[&.group-data-[state=open]]:text-muted-foreground
|
||||
`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
<span className={isMenuActive(item.url) ? 'text-primary' : ''}>
|
||||
{item.title}
|
||||
</span>
|
||||
{isMenuActive(item.url) &&<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-600 dark:bg-green-400 rounded-full"></div>}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean, router: any) => {
|
||||
// 注释掉移动端二级菜单相关代码
|
||||
// if (item.items) {
|
||||
// return (
|
||||
// <AccordionItem key={item.title} value={item.title} className="border-b-0">
|
||||
// <AccordionTrigger className="text-md py-0 font-semibold hover:no-underline gap-2">
|
||||
// {item.icon && <span className="shrink-0">{item.icon}</span>}
|
||||
// {item.title}
|
||||
// </AccordionTrigger>
|
||||
// <AccordionContent className="mt-2">
|
||||
// {item.items.map((subItem) => (
|
||||
// <SubMenuLink key={subItem.title} item={subItem} />
|
||||
// ))}
|
||||
// </AccordionContent>
|
||||
// </AccordionItem>
|
||||
// );
|
||||
// }
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
router.push(item.url);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.title}
|
||||
onClick={handleClick}
|
||||
className={`
|
||||
text-md font-semibold flex items-center gap-2 p-2 rounded-md transition-colors cursor-pointer
|
||||
${isMenuActive(item.url)
|
||||
? 'bg-primary/10 text-primary'
|
||||
: 'hover:bg-muted hover:text-accent-foreground'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.icon && (
|
||||
<span className={`
|
||||
shrink-0
|
||||
${isMenuActive(item.url) ? 'text-primary' : 'text-muted-foreground'}
|
||||
`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
<span className={isMenuActive(item.url) ? 'text-primary' : ''}>
|
||||
{item.title}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 注释掉 SubMenuLink 组件，因为不再需要二级菜单
|
||||
// const SubMenuLink = ({ item }: { item: MenuItem }) => {
|
||||
// return (
|
||||
// <a
|
||||
// className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
|
||||
// href={item.url}
|
||||
// >
|
||||
// <div className="text-foreground">{item.icon}</div>
|
||||
// <div>
|
||||
// <div className="text-sm font-semibold">{item.title}</div>
|
||||
// {item.description && (
|
||||
// <p className="text-muted-foreground text-sm leading-snug">
|
||||
// {item.description}
|
||||
// </p>
|
||||
// )}
|
||||
// </div>
|
||||
// </a>
|
||||
// );
|
||||
// };
|
||||
|
||||
export { Navbar1 };
|
||||
Reference in New Issue
Block a user