d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

hexo 主题 菜单风格

Browse Source
This commit is contained in:
tangly1024.com
2024-04-29 10:22:19 +08:00
parent d68a97bc9b
commit a81c1426b5
6 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/hexo/components/MenuItemCollapse.js
View File

@@ -29,13 +29,13 @@ export const MenuItemCollapse = props => {
return (
<>
<div
className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
className='w-full px-8 py-3 dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white text-left dark:bg-hexo-black-gray'
onClick={toggleShow}>
{!hasSubMenu && (
<Link
href={link?.to}
target={link?.target}
className='font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
className=' 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}
@@ -63,7 +63,7 @@ export const MenuItemCollapse = props => {
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'>
className='dark:hover:bg-indigo-500 hover:bg-indigo-500 hover:text-white dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 tracking-widest transition-all duration-200 py-3 pr-6'>
<Link href={sLink.to} target={link?.target}>
<span className='text-sm ml-4 whitespace-nowrap'>
{link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}

10
themes/hexo/components/MenuItemDrop.js
View File

@@ -1,6 +1,10 @@
import Link from 'next/link'
import { useState } from 'react'
/**
* 支持二级展开的菜单
* @param {*} param0
* @returns
*/
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -25,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
@@ -42,7 +46,7 @@ export const MenuItemDrop = ({ link }) => {
return (
<li
key={index}
className='cursor-pointer hover:bg-indigo-300 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
className='cursor-pointer hover:bg-indigo-500 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
<Link href={sLink.to} target={link?.target}>
<span className='text-sm text-nowrap font-extralight'>
{link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

48
themes/hexo/components/MenuListSide.js
View File

@@ -1,17 +1,41 @@
import { useGlobal } from '@/lib/global'
import { siteConfig } from '@/lib/config'
import { MenuItemCollapse } from './MenuItemCollapse'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
export const MenuListSide = (props) => {
import { MenuItemCollapse } from './MenuItemCollapse'
/**
* 侧拉抽屉菜单
* @param {*} props
* @returns
*/
export const MenuListSide = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG) },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG) },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG) },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEXO_MENU_TAG', null, CONFIG) }
{
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
to: '/archive',
show: siteConfig('HEXO_MENU_ARCHIVE', null, CONFIG)
},
{
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
to: '/search',
show: siteConfig('HEXO_MENU_SEARCH', null, CONFIG)
},
{
icon: 'fas fa-folder',
name: locale.COMMON.CATEGORY,
to: '/category',
show: siteConfig('HEXO_MENU_CATEGORY', null, CONFIG)
},
{
icon: 'fas fa-tag',
name: locale.COMMON.TAGS,
to: '/tag',
show: siteConfig('HEXO_MENU_TAG', null, CONFIG)
}
]
if (customNav) {
@@ -34,8 +58,10 @@ export const MenuListSide = (props) => {
}
return (
<nav>
{links?.map((link, index) => <MenuItemCollapse key={index} link={link} />)}
</nav>
<nav>
{links?.map((link, index) => (
<MenuItemCollapse key={index} link={link} />
))}
</nav>
)
}

37
themes/hexo/components/SideBar.js
View File

@@ -1,5 +1,5 @@
import { siteConfig } from '@/lib/config'
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
import { useRouter } from 'next/router'
import MenuGroupCard from './MenuGroupCard'
import { MenuListSide } from './MenuListSide'
@@ -11,22 +11,33 @@ import { MenuListSide } from './MenuListSide'
* @returns {JSX.Element}
* @constructor
*/
const SideBar = (props) => {
const SideBar = props => {
const { siteInfo } = props
const router = useRouter()
return (
<div id='side-bar'>
<div className="h-52 w-full flex justify-center">
<div>
<div onClick={() => { router.push('/') }}
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
<LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={siteConfig('AUTHOR')} />
</div>
<MenuGroupCard {...props} />
</div>
</div>
<MenuListSide {...props} />
<div id='side-bar'>
<div className='h-52 w-full flex justify-center'>
<div>
<div
onClick={() => {
router.push('/')
}}
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
{/* 头像 */}
<LazyImage
src={siteInfo?.icon}
className='rounded-full'
width={80}
alt={siteConfig('AUTHOR')}
/>
</div>
{/* 总览 */}
<MenuGroupCard {...props} />
</div>
</div>
{/* 侧拉抽屉的菜单 */}
<MenuListSide {...props} />
</div>
)
}

7
themes/matery/components/MenuItemDrop.js
View File

@@ -1,6 +1,9 @@
import Link from 'next/link'
import { useState } from 'react'
/**
* 菜单
* 支持二级展开的菜单
*/
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -42,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
return (
<li
key={index}
className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
className='cursor-pointer hover:bg-indigo-500 text-gray-900 hover:text-white tracking-widest transition-all duration-200 dark:border-gray-800 py-1 pr-6 pl-3'>
<Link href={sLink.to} target={link?.target}>
<span className='text-sm text-nowrap font-extralight'>
{link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

43
themes/matery/components/MenuListTop.js
View File

@@ -1,17 +1,42 @@
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import CONFIG from '../config'
import { MenuItemDrop } from './MenuItemDrop'
import { siteConfig } from '@/lib/config'
export const MenuListTop = (props) => {
/**
* 菜单列表
* 顶部导航栏用
* @param {*} props
* @returns
*/
export const MenuListTop = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
{ icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG) },
{ icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG) },
{ icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG) },
{ icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('MATERY_MENU_TAG', null, CONFIG) }
{
icon: 'fas fa-archive',
name: locale.NAV.ARCHIVE,
to: '/archive',
show: siteConfig('MATERY_MENU_ARCHIVE', null, CONFIG)
},
{
icon: 'fas fa-search',
name: locale.NAV.SEARCH,
to: '/search',
show: siteConfig('MATERY_MENU_SEARCH', null, CONFIG)
},
{
icon: 'fas fa-folder',
name: locale.COMMON.CATEGORY,
to: '/category',
show: siteConfig('MATERY_MENU_CATEGORY', null, CONFIG)
},
{
icon: 'fas fa-tag',
name: locale.COMMON.TAGS,
to: '/tag',
show: siteConfig('MATERY_MENU_TAG', null, CONFIG)
}
]
if (customNav) {
@@ -29,7 +54,9 @@ export const MenuListTop = (props) => {
return (
<nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links?.map((link, index) => <MenuItemDrop key={index} link={link}/>)}
{links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
</nav>
)
}