|
@@ -1,7 +1,7 @@
|
|
|
"use client";
|
|
"use client";
|
|
|
|
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
|
-// import Link from "next/link";
|
|
|
|
|
|
|
+import Link from "next/link";
|
|
|
|
|
|
|
|
// import { MobileSearchBar } from "./MobileSearch";
|
|
// import { MobileSearchBar } from "./MobileSearch";
|
|
|
import { useBodyScrollLock } from "@utils/hooks/useBodyScrollLock";
|
|
import { useBodyScrollLock } from "@utils/hooks/useBodyScrollLock";
|
|
@@ -32,7 +32,8 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
|
|
|
const activeMainMenu = menu.find((item) => item._id === activeMainId);
|
|
const activeMainMenu = menu.find((item) => item._id === activeMainId);
|
|
|
// 当前一级下面全部二级菜单列表
|
|
// 当前一级下面全部二级菜单列表
|
|
|
const subMenuList = activeMainMenu?.children?.edges?.map((e) => e.node) ?? [];
|
|
const subMenuList = activeMainMenu?.children?.edges?.map((e) => e.node) ?? [];
|
|
|
-
|
|
|
|
|
|
|
+ console.log("menu------------cscscs",menu);
|
|
|
|
|
+
|
|
|
// 切换右侧二级菜单展开/收起
|
|
// 切换右侧二级菜单展开/收起
|
|
|
const toggleSubExpand = (subId: number) => {
|
|
const toggleSubExpand = (subId: number) => {
|
|
|
setExpandedSubIds((prev) => ({
|
|
setExpandedSubIds((prev) => ({
|
|
@@ -165,27 +166,63 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<div className="flex flex-1 overflow-hidden">
|
|
|
|
|
|
|
|
<aside className="w-23 border-r border-gray-200 overflow-y-auto">
|
|
<aside className="w-23 border-r border-gray-200 overflow-y-auto">
|
|
|
- {menu.map((mainItem) => (
|
|
|
|
|
- <div
|
|
|
|
|
- key={mainItem._id}
|
|
|
|
|
- onClick={() => setActiveMainId(mainItem._id)}
|
|
|
|
|
- className={`py-3 pl-4 pr-3 text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
|
|
|
|
|
- ${
|
|
|
|
|
- activeMainId === mainItem._id
|
|
|
|
|
- ? "border-r-emerald-700 text-emerald-700 font-bold"
|
|
|
|
|
- : " text-gray-700 font-normal"
|
|
|
|
|
- }
|
|
|
|
|
- `}
|
|
|
|
|
- >
|
|
|
|
|
- {mainItem.name} {mainItem.showIcon&&(<Image
|
|
|
|
|
- className=" block"
|
|
|
|
|
- src="/image/theme/image_flame.webp"
|
|
|
|
|
- alt={"userphoto"}
|
|
|
|
|
- width={16}
|
|
|
|
|
- height={16}
|
|
|
|
|
- />)}
|
|
|
|
|
- </div>
|
|
|
|
|
- ))}
|
|
|
|
|
|
|
+ {menu.map((mainItem) => {
|
|
|
|
|
+ // 判断条件:没有子菜单 并且 配置了url
|
|
|
|
|
+ const isLinkItem = mainItem.children.edges.length === 0 && !!mainItem.url;
|
|
|
|
|
+
|
|
|
|
|
+ if (isLinkItem) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <Link
|
|
|
|
|
+ key={mainItem._id}
|
|
|
|
|
+ href={mainItem.url}
|
|
|
|
|
+ className={`relative block py-3 pl-4 pr-3 text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
|
|
|
|
|
+ ${
|
|
|
|
|
+ activeMainId === mainItem._id
|
|
|
|
|
+ ? "border-r-emerald-700 text-emerald-700 font-bold"
|
|
|
|
|
+ : "text-gray-700 font-normal"
|
|
|
|
|
+ }
|
|
|
|
|
+ `}
|
|
|
|
|
+ >
|
|
|
|
|
+ {mainItem.name}
|
|
|
|
|
+ {mainItem.showIcon && (
|
|
|
|
|
+ <Image
|
|
|
|
|
+ className="block"
|
|
|
|
|
+ src="/image/theme/image_flame.webp"
|
|
|
|
|
+ alt="userphoto"
|
|
|
|
|
+ width={16}
|
|
|
|
|
+ height={16}
|
|
|
|
|
+ />
|
|
|
|
|
+ )}
|
|
|
|
|
+ </Link>
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 不满足条件:走原来点击切换active的div逻辑
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div
|
|
|
|
|
+ key={mainItem._id}
|
|
|
|
|
+ onClick={() => setActiveMainId(mainItem._id)}
|
|
|
|
|
+ className={`py-3 pl-4 pr-3 text-xs cursor-pointer border-r-2 border-b border-[#E1E1E1FF]
|
|
|
|
|
+ ${
|
|
|
|
|
+ activeMainId === mainItem._id
|
|
|
|
|
+ ? "border-r-emerald-700 text-emerald-700 font-bold"
|
|
|
|
|
+ : "text-gray-700 font-normal"
|
|
|
|
|
+ }
|
|
|
|
|
+ `}
|
|
|
|
|
+ >
|
|
|
|
|
+ {mainItem.name}
|
|
|
|
|
+ {mainItem.showIcon && (
|
|
|
|
|
+ <Image
|
|
|
|
|
+ className="block"
|
|
|
|
|
+ src="/image/theme/image_flame.webp"
|
|
|
|
|
+ alt="userphoto"
|
|
|
|
|
+ width={16}
|
|
|
|
|
+ height={16}
|
|
|
|
|
+ />
|
|
|
|
|
+ )}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+ })}
|
|
|
</aside>
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -219,7 +256,14 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
|
|
|
onClick={() => toggleSubExpand(subItem._id)}
|
|
onClick={() => toggleSubExpand(subItem._id)}
|
|
|
className="flex justify-between items-center cursor-pointer py-2 px-3 h-10 bg-[#F9F9F9FF]"
|
|
className="flex justify-between items-center cursor-pointer py-2 px-3 h-10 bg-[#F9F9F9FF]"
|
|
|
>
|
|
>
|
|
|
- <h3 className="text-2xl font-medium">{subItem.name}</h3>
|
|
|
|
|
|
|
+ <h3 className="text-2xl font-medium">{subItem.url ? (
|
|
|
|
|
+ <Link href={subItem.url} className="inline-block">
|
|
|
|
|
+ {subItem.name}
|
|
|
|
|
+ </Link>
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ subItem.name
|
|
|
|
|
+ )}
|
|
|
|
|
+ </h3>
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
|
className={`transition-transform duration-300 ${isOpen ? "rotate-0" : "rotate-180"}`}
|
|
className={`transition-transform duration-300 ${isOpen ? "rotate-0" : "rotate-180"}`}
|
|
|
>
|
|
>
|
|
@@ -233,7 +277,8 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
|
|
|
{cardEdges.map((edge) => {
|
|
{cardEdges.map((edge) => {
|
|
|
const cardItem = edge.node;
|
|
const cardItem = edge.node;
|
|
|
return (
|
|
return (
|
|
|
- <div
|
|
|
|
|
|
|
+ <Link
|
|
|
|
|
+ href={cardItem.url}
|
|
|
key={cardItem._id}
|
|
key={cardItem._id}
|
|
|
className="flex flex-col items-center cursor-pointer"
|
|
className="flex flex-col items-center cursor-pointer"
|
|
|
>
|
|
>
|
|
@@ -259,7 +304,7 @@ export default function MobileMenu({ menu, isOpen, onClose,isGuest }: MobileMenu
|
|
|
}
|
|
}
|
|
|
</div>
|
|
</div>
|
|
|
<span className="text-xs font-normal text-center">{cardItem.name}</span>
|
|
<span className="text-xs font-normal text-center">{cardItem.name}</span>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </Link>
|
|
|
);
|
|
);
|
|
|
})}
|
|
})}
|
|
|
</div>
|
|
</div>
|