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

menu - animation

Browse Source
This commit is contained in:
tangly1024.com
2023-03-23 17:30:09 +08:00
parent ef8812066f
commit 7ba1d046af
8 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/example/components/DropMenu.js → themes/example/components/MenuItemDrop.js
View File

@@ -1,7 +1,7 @@
import Link from 'next/link'
import { useState } from 'react'
export const DropMenu = ({ link }) => {
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -19,7 +19,7 @@ export const DropMenu = ({ link }) => {
{hasSubMenu &&
<div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
{link?.name}
<i className='px-2 fa fa-angle-down'></i>
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
}

4
themes/example/components/Nav.js
View File

@@ -1,7 +1,7 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_EXAMPLE from '../config_example'
import { DropMenu } from './DropMenu'
import { MenuItemDrop } from './MenuItemDrop'
/**
* 菜单导航
@@ -37,7 +37,7 @@ export const Nav = (props) => {
<div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
<ul className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
{/* {links.map(link => <NormalMenuItem key={link.id} link={link}/>)} */}
{links.map(link => <DropMenu key={link.id} link={link} />)}
{links.map(link => <MenuItemDrop key={link.id} link={link} />)}
</ul>
<div className="w-full md:w-1/3 text-center md:text-right">
{/* <!-- extra links --> */}

2
themes/fukasawa/components/MenuItemDrop.js
View File

@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
<div className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
{link.slot}
{hasSubMenu && <div className='text-right'><i className='px-2 fa fa-angle-right'></i></div>}
{hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
</div>}
{/* 子菜单 */}

2
themes/medium/components/MenuItemDrop.js
View File

@@ -19,7 +19,7 @@ export const MenuItemDrop = ({ link }) => {
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
<div className='px-1'>
{link?.name}
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
{hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
</div>
</div>
}

2
themes/next/components/MenuItemDrop.js
View File

@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
<div className='w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
{link.slot}
{hasSubMenu && <div className='text-right'><i className='px-2 fa fa-angle-right'></i></div>}
{hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
</div>}
{/* 子菜单 */}

4
themes/nobelium/components/DropMenu.js → themes/nobelium/components/MenuItemDrop.js
View File

@@ -1,7 +1,7 @@
import Link from 'next/link'
import { useState } from 'react'
export const DropMenu = ({ link }) => {
export const MenuItemDrop = ({ link }) => {
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -19,7 +19,7 @@ export const DropMenu = ({ link }) => {
{hasSubMenu &&
<div className='block ml-4 text-black dark:text-gray-50 nav'>
{link?.name}
<i className='px-2 fa fa-angle-down'></i>
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
}

4
themes/nobelium/components/Nav.js
View File

@@ -4,7 +4,7 @@ import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import CONFIG_NOBELIUM from '../config_nobelium'
import { SvgIcon } from './SvgIcon'
import { DropMenu } from './DropMenu'
import { MenuItemDrop } from './MenuItemDrop'
const Nav = props => {
const { navBarTitle, fullWidth, siteInfo } = props
@@ -95,7 +95,7 @@ const NavBar = props => {
<div className="flex-shrink-0">
<ul className="flex flex-row">
{links.map(
link => link && link.show && <DropMenu key={link.id} link={link}/>
link => link && link.show && <MenuItemDrop key={link.id} link={link}/>
)}
</ul>
</div>

2
themes/simple/components/MenuItemDrop.js
View File

@@ -22,7 +22,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && <>
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
{link?.name}
<i className='px-2 fa fa-angle-down'></i>
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
</div>
</>}