d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-04 15:10:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

折叠菜单配置化

Browse Source
This commit is contained in:
tangly1024.com
2023-11-03 17:43:07 +08:00
parent f145d8b28c
commit 8425de5bad
28 changed files with 123 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/commerce/components/Footer.js
View File

@@ -14,12 +14,12 @@ const Footer = (props) => {
const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
const { categoryOptions, customMenu } = props
return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center text-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>
return <footer id="footer-wrapper" className='relative bg-[#2A2A2A] justify-center m-auto w-full leading-6 text-gray-300 text-sm p-10'>
<div id='footer-container' className='w-full mx-auto max-w-screen-xl'>
<div className='flex'>
<div className='flex flex-grow my-6 space-x-20 text-lg'>
<div className='hidden md:flex flex-grow my-6 space-x-20 text-lg '>
{/* 分类菜单 */}
<div>
@@ -66,7 +66,7 @@ const Footer = (props) => {
</div>
{/* 底部版权相关 */}
<div id='footer-copyright-wrapper' className='flex justify-between border-t border-gray-600 pt-8'>
<div id='footer-copyright-wrapper' className='flex-col md:flex justify-between border-t border-gray-600 pt-8'>
<div className='text-start space-y-1'>
{/* 网站所有者 */}
@@ -85,7 +85,7 @@ const Footer = (props) => {
</div>
{/* 右边公司名字 */}
<div className='text-right'>
<div className='md:text-right'>
<h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{siteConfig('TITLE')} {siteConfig('BIO')}</h1>
<h2> {siteConfig('DESCRIPTION')}</h2>
{/* 可选备案信息 */}

7
themes/commerce/components/MenuBarMobile.js
View File

@@ -1,8 +1,7 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'
import { siteConfig } from '@/lib/config'
export const MenuBarMobile = (props) => {
const { customMenu, customNav } = props
@@ -21,7 +20,7 @@ export const MenuBarMobile = (props) => {
}
// 如果 开启自定义菜单，则不再使用 Page生成菜单。
if (BLOG.CUSTOM_MENU) {
if (siteConfig('CUSTOM_MENU')) {
links = customMenu
}
@@ -31,9 +30,7 @@ export const MenuBarMobile = (props) => {
return (
<nav id='nav' className=' text-md'>
{/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
{links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
</nav>
)
}

9
themes/commerce/components/MenuItemCollapse.js
View File

@@ -7,7 +7,8 @@ import { useState } from 'react'
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = ({ link }) => {
export const MenuItemCollapse = (props) => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -29,19 +30,19 @@ export const MenuItemCollapse = ({ link }) => {
<div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
{!hasSubMenu && <Link
href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
className="font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
className="hover:text-[#D2232A] font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
<span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
</Link>}
{hasSubMenu && <div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
className="hover:text-[#D2232A] font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1">
<span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
<i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen}>
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link.subMenus.map((sLink, index) => {
return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>

5
themes/commerce/components/MenuListSide.js
View File

@@ -1,6 +1,5 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import { siteConfig } from '@/lib/config'
import { MenuItemCollapse } from './MenuItemCollapse'
import CONFIG from '../config'
@@ -26,7 +25,7 @@ export const MenuListSide = (props) => {
}
// 如果 开启自定义菜单，则覆盖Page生成的菜单
if (BLOG.CUSTOM_MENU) {
if (siteConfig('CUSTOM_MENU')) {
links = customMenu
}

1
themes/commerce/components/MenuListTop.js
View File

@@ -1,4 +1,3 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemDrop } from './MenuItemDrop'

41
themes/commerce/components/ProductCenter.js Normal file
View File

@@ -0,0 +1,41 @@
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
/**
* 产品中心
* @param {*} props
* @returns
*/
export default function ProductCenter(props) {
const { categoryOptions } = props
return <div className='w-full my-4 mx-4'>
<div className='w-full text-center text-4xl font-bold'>{siteConfig('TEXT_HOME_PRODUCT_CENTER', 'Product Center')}</div>
<div className='flex'>
<div className='hidden md:block w-72 bg-white p-4 mx-2'>
{/* 分类菜单 */}
<div>
<div className='font-bold mb-4 border-b-2 p-2 border-[#D2232A]'>{siteConfig('COMMERCE_TEXT_MENU_GROUP', 'Product Center')}</div>
<nav id='home-nav-button' className={'flex flex-col space-y-2 text-start'}>
{categoryOptions.map(category => {
return (
<Link
key={`${category.name}`}
title={`${category.name}`}
href={`/category/${category.name}`}
className='hover:text-[#D2232A]'
passHref>
{category.name}
</Link>
)
})}
</nav>
</div>
</div>
<div className='w-full border'>右侧产品列表</div>
</div>
</div>
}

18
themes/commerce/components/TopNavBar.js
View File

@@ -67,21 +67,14 @@ export default function TopNavBar(props) {
return <div id='top-navbar-wrapper' className={'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '}>
{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>
</Collapse>
{/* 导航栏菜单内容 */}
<div id="top-navbar" className='flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
<div id="top-navbar" className='px-4 flex w-full mx-auto max-w-screen-xl h-24 transition-all duration-200 items-between'>
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 移动端折叠按钮 */}
<div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
<div onClick={toggleMenuOpen} className='cursor-pointer'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
@@ -92,5 +85,12 @@ export default function TopNavBar(props) {
{links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>
<div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>
</Collapse>
</div>
}