自定已自提相关

This commit is contained in:
tangly
2022-10-19 14:08:12 +08:00
parent d3271d527a
commit 3519e4db6e
26 changed files with 47 additions and 35 deletions

View File

@@ -24,10 +24,21 @@ const BLOG = {
SINCE: 2021, // e.g if leave this empty, current year will be used. SINCE: 2021, // e.g if leave this empty, current year will be used.
BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 dark夜间模式 auto根据时间和主题自动夜间模式 APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 dark夜间模式 auto根据时间和主题自动夜间模式
FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
// 字体相关
FONT: 'font-sans', // 预设三种文章字体 ['font-sans', 'font-serif', 'font-mono'] @see /lib/font.js https://www.tailwindcss.cn/docs/font-family
FONT_URL: 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap', // 谷歌字体中国站镜像;对应的国际站地址https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap FONT_URL: 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap', // 谷歌字体中国站镜像;对应的国际站地址https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap
FONT_AWESOME_PATH: FONT_CUSTOM: ['-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"PingFang SC"', 'HarmonyOS_Regular', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"', '"Noto Sans CJK SC"', '"WenQuanYi Micro Hei"', 'Arial', 'sans-serif'],
'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN 国内推荐BootCDN国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
// 自定义google字体示例 请先将FONT 改为 'font-custom' 并将FONT_URL改为你的字体地址同时在FONT_CUSTOM中指定你的 fontfamily
// 以下是示例:
// FONT:'font-custom',
// FONT_URL: 'https://fonts.font.im/css2?family=Ma+Shan+Zheng&display=swap',
// FONT_CUSTOM_FAMILY: ['"Times New Roman"', 'Ma Shan Zheng'],
// 图标字体
FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN 国内推荐BootCDN国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
BACKGROUND_DARK: '#000000', // use hex value, don't forget '#' BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
SUB_PATH: '', // leave this empty unless you want to deploy in a folder SUB_PATH: '', // leave this empty unless you want to deploy in a folder

View File

@@ -46,7 +46,8 @@ const fontFamilies = {
'-apple-system', '-apple-system',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'sans-serif' 'sans-serif'
] ],
custom: BLOG.FONT_CUSTOM_FAMILY
} }
module.exports = fontFamilies module.exports = fontFamilies

View File

@@ -20,7 +20,7 @@ class MyDocument extends Document {
<CommonScript /> <CommonScript />
</Head> </Head>
<body className={`${BLOG.FONT} bg-day dark:bg-night`}> <body className={`${BLOG.FONT} tracking-wider subpixel-antialiased bg-day dark:bg-night`}>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

View File

@@ -72,7 +72,7 @@ const LayoutBase = props => {
</main> </main>
{/* 右下角悬浮 */} {/* 右下角悬浮 */}
<div className="bottom-12 right-1 fixed justify-end z-20 font-sans text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm"> <div className="bottom-12 right-1 fixed justify-end z-20 text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm">
<div <div
className={ className={
(show ? 'animate__animated ' : 'hidden') + (show ? 'animate__animated ' : 'hidden') +

View File

@@ -3,10 +3,10 @@ import Card from './Card'
export function AnalyticsCard (props) { export function AnalyticsCard (props) {
const { postCount } = props const { postCount } = props
return <Card> return <Card>
<div className='ml-2 mb-3 font-sans'> <div className='ml-2 mb-3 '>
<i className='fas fa-chart-area' /> 统计 <i className='fas fa-chart-area' /> 统计
</div> </div>
<div className='text-xs font-sans font-light justify-center mx-7'> <div className='text-xs font-light justify-center mx-7'>
<div className='inline'> <div className='inline'>
<div className='flex justify-between'> <div className='flex justify-between'>
<div>文章数:</div> <div>文章数:</div>

View File

@@ -16,7 +16,7 @@ export default function ArticleCopyright () {
}) })
const { locale } = useGlobal() const { locale } = useGlobal()
return <section className="dark:text-gray-300 mt-6 mx-1 font-sans"> return <section className="dark:text-gray-300 mt-6 mx-1 ">
<ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500"> <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
<li> <li>
<strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong> <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>

View File

@@ -23,7 +23,7 @@ export const ArticleLock = props => {
} }
} }
return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'> return <div id='container' className='w-full flex justify-center items-center h-96 '>
<div className='text-center space-y-3'> <div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div> <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex'> <div className='flex'>

View File

@@ -19,7 +19,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
const { locale } = useGlobal() const { locale } = useGlobal()
return ( return (
<div className="p-2"> <div className="p-2">
<div className="font-sans mb-2 px-1 flex flex-nowrap justify-between"> <div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div> <div>
<i className="mr-2 fas fa-thumbs-up" /> <i className="mr-2 fas fa-thumbs-up" />
{locale.COMMON.RELATE_POSTS} {locale.COMMON.RELATE_POSTS}
@@ -47,7 +47,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
style={{ backgroundImage: headerImage }} style={{ backgroundImage: headerImage }}
> >
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 "> <div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className="font-sans text-sm text-white text-center shadow-text"> <div className=" text-sm text-white text-center shadow-text">
<div> <div>
<i className="fas fa-calendar-alt mr-1" /> <i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date} {post.date?.start_date}

View File

@@ -16,7 +16,7 @@ const BlogPostCard = ({ post, showSummary }) => {
<div className="lg:p-8 p-4 flex flex-col w-full"> <div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref> <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
<a <a
className={`replace cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'text-center' : '' className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`} } leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}
> >
{post.title} {post.title}

View File

@@ -63,7 +63,7 @@ const Catalog = ({ toc }) => {
<Progress /> <Progress />
</div> </div>
<div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}> <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
<nav className='h-full font-sans text-black'> <nav className='h-full text-black'>
{toc.map((tocItem) => { {toc.map((tocItem) => {
const id = uuidToId(tocItem.id) const id = uuidToId(tocItem.id)
tocIds.push(id) tocIds.push(id)

View File

@@ -6,7 +6,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
return <></> return <></>
} }
return <> return <>
<div id='category-list' className='dark:border-gray-600 flex flex-wrap font-sans mx-4'> <div id='category-list' className='dark:border-gray-600 flex flex-wrap mx-4'>
{categories.map(category => { {categories.map(category => {
const selected = currentCategory === category.name const selected = currentCategory === category.name
return <Link key={category.name} href={`/category/${category.name}`} passHref> return <Link key={category.name} href={`/category/${category.name}`} passHref>

View File

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
return ( return (
<footer <footer
className='font-sans dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6' className=' dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6'
> >
<DarkModeButton/> <DarkModeButton/>
@@ -28,7 +28,7 @@ const Footer = ({ title }) => {
<i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span> <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
<br/> <br/>
<h1>{title}</h1> <h1>{title}</h1>
<span className='text-xs font-serif'>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span><br/> <span className='text-xs '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline dark:text-gray-300'>NotionNext {BLOG.VERSION}</a>.</span></span><br/>
</footer> </footer>
) )

View File

@@ -78,7 +78,7 @@ const Header = props => {
`linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")` `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`
}} }}
> >
<div className="absolute flex flex-col h-full items-center justify-center w-full font-sans"> <div className="absolute flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div> <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'> <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<span id='typed'/> <span id='typed'/>

View File

@@ -21,10 +21,10 @@ export default function HeaderArticle({ post, siteInfo }) {
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn" className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
style={{ backgroundImage: headerImage }} style={{ backgroundImage: headerImage }}
> >
<header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center font-sans"> <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
<div className='mt-24'> <div className='mt-24'>
{/* 文章Title */} {/* 文章Title */}
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white font-sans"> <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
{post.title} {post.title}
</div> </div>

View File

@@ -25,7 +25,7 @@ const HexoRecentComments = (props) => {
}, []) }, [])
return <Card > return <Card >
<div className="font-sans mb-2 px-1 justify-between"> <div className=" mb-2 px-1 justify-between">
<i className="mr-2 fas fas fa-comment" /> <i className="mr-2 fas fas fa-comment" />
{locale.COMMON.RECENT_COMMENTS} {locale.COMMON.RECENT_COMMENTS}
</div> </div>
@@ -34,7 +34,7 @@ const HexoRecentComments = (props) => {
{!onLoading && comments && comments.length === 0 && <div>No Comments</div>} {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
{!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'> {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
<div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} /> <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}><a >-- {comment.nick}</a></Link></div> <div className='dark:text-gray-400 text-gray-400 text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}><a >-- {comment.nick}</a></Link></div>
</div>)} </div>)}
</Card> </Card>

View File

@@ -8,7 +8,7 @@ export function InfoCard (props) {
const router = useRouter() const router = useRouter()
return <Card className={className}> return <Card className={className}>
<div <div
className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 font-sans transform duration-200 cursor-pointer' className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'
onClick={() => { onClick={() => {
router.push('/') router.push('/')
}} }}

View File

@@ -18,7 +18,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
const { locale } = useGlobal() const { locale } = useGlobal()
return ( return (
<> <>
<div className="font-sans mb-2 px-1 flex flex-nowrap justify-between"> <div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div> <div>
<i className="mr-2 fas fas fa-history" /> <i className="mr-2 fas fas fa-history" />
{locale.COMMON.LATEST_POSTS} {locale.COMMON.LATEST_POSTS}
@@ -37,7 +37,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
href={`${BLOG.SUB_PATH}/${post.slug}`} href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref passHref
> >
<a className={'my-1 flex font-sans'}> <a className={'my-1 flex '}>
<div <div
className="w-20 h-16 bg-cover bg-center bg-no-repeat" className="w-20 h-16 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: headerImage }} style={{ backgroundImage: headerImage }}

View File

@@ -6,7 +6,7 @@ const Logo = props => {
const { siteInfo } = props const { siteInfo } = props
return <Link href='/' passHref> return <Link href='/' passHref>
<div className='flex flex-col justify-center items-center cursor-pointer space-y-3'> <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
<div className='font-sans text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div> <div className=' text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
</div> </div>
</Link> </Link>
} }

View File

@@ -18,7 +18,7 @@ const MenuButtonGroupTop = (props) => {
links = links.concat(customNav) links = links.concat(customNav)
} }
return <nav id='nav' className='leading-8 flex justify-center font-sans font-light w-full'> return <nav id='nav' className='leading-8 flex justify-center font-light w-full'>
{links.map(link => { {links.map(link => {
if (link.show) { if (link.show) {
return <Link key={`${link.to}`} title={link.to} href={link.to} > return <Link key={`${link.to}`} title={link.to} href={link.to} >

View File

@@ -16,7 +16,7 @@ const MenuGroupCard = (props) => {
{ name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG_HEXO.MENU_TAG } { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG_HEXO.MENU_TAG }
] ]
return <nav id='nav' className='leading-8 flex justify-center font-sans w-full'> return <nav id='nav' className='leading-8 flex justify-center w-full'>
{links.map(link => { {links.map(link => {
if (link.show) { if (link.show) {
return <Link key={`${link.to}`} title={link.to} href={link.to} > return <Link key={`${link.to}`} title={link.to} href={link.to} >

View File

@@ -21,7 +21,7 @@ const MenuList = (props) => {
links = links.concat(customNav) links = links.concat(customNav)
} }
return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 font-sans'> return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
{links.map(link => { {links.map(link => {
if (link && link.show) { if (link && link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to) const selected = (router.pathname === link.to) || (router.asPath === link.to)

View File

@@ -13,7 +13,7 @@ const NavButtonGroup = (props) => {
return <nav id='home-nav-button' className={'md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}> return <nav id='home-nav-button' className={'md:h-52 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
{categories.map(category => { {categories.map(category => {
return <Link key={`${category.name}`} title={`${category.name}`} href={`/category/${category.name}`} passHref> return <Link key={`${category.name}`} title={`${category.name}`} href={`/category/${category.name}`} passHref>
<a className='text-center w-full md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism font-serif hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>{category.name}</a> <a className='text-center w-full md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>{category.name}</a>
</Link> </Link>
})} })}
</nav> </nav>

View File

@@ -16,7 +16,7 @@ const PaginationNumber = ({ page, totalPage }) => {
const pages = generatePages(page, currentPage, totalPage) const pages = generatePages(page, currentPage, totalPage)
return ( return (
<div className="mt-10 mb-5 font-sans flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2"> <div className="mt-10 mb-5 flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
{/* 上一页 */} {/* 上一页 */}
<Link <Link
href={{ href={{

View File

@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [percent]) }, [percent])
return ( return (
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans"> <div className="h-4 w-full shadow-2xl bg-gray-400 ">
<div <div
className="h-4 bg-indigo-400 duration-200" className="h-4 bg-indigo-400 duration-200"
style={{ width: `${percent}%` }} style={{ width: `${percent}%` }}

View File

@@ -27,7 +27,7 @@ export default function SideRight(props) {
{showCategory && ( {showCategory && (
<Card> <Card>
<div className='ml-2 mb-1 font-sans'> <div className='ml-2 mb-1 '>
<i className='fas fa-th' /> 分类 <i className='fas fa-th' /> 分类
</div> </div>
<CategoryGroup <CategoryGroup

View File

@@ -121,14 +121,14 @@ const TopNav = props => {
<SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/> <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
{/* 导航栏 */} {/* 导航栏 */}
<div id='sticky-nav' className={'top-0 shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 font-san border-transparent dark:border-transparent'}> <div id='sticky-nav' className={'top-0 shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 border-transparent dark:border-transparent'}>
<div className='w-full flex justify-between items-center px-4 py-2'> <div className='w-full flex justify-between items-center px-4 py-2'>
<div className='flex'> <div className='flex'>
<Logo {...props}/> <Logo {...props}/>
</div> </div>
{/* 右侧功能 */} {/* 右侧功能 */}
<div className='mr-1 justify-end items-center font-serif'> <div className='mr-1 justify-end items-center '>
<div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div> <div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div>
<div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'> <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
{ isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> } { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }