主要菜单加入图标
This commit is contained in:
tangly1024
2021-12-02 10:54:00 +08:00
parent f7dbd26b70
commit 2a105d71f3
8 changed files with 29 additions and 17 deletions

View File

@@ -6,7 +6,7 @@ const CategoryList = ({ currentCategory, categories }) => {
return <></>
}
return <ul className='flex py-1 space-x-3'>
<li className='w-10 py-2 dark:text-gray-200'>分类:</li>
<li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-th-list mr-2'/>分类:</li>
{Object.keys(categories).map(category => {
const selected = category === currentCategory
return (

View File

@@ -45,8 +45,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{categories && (
<section className='mt-2'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.CATEGORY}</div>
<div><Link href='/category'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} </div></Link></div>
<div className='text-black font-bold dark:text-gray-200'><i className='fa fa-th-list mr-4'/>{locale.COMMON.CATEGORY}</div>
<Link href='/category'>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
</div>
</Link>
</div>
<CategoryGroup currentCategory={currentCategory} categories={categories} />
</section>
@@ -56,8 +60,12 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{posts && (
<section className='mt-3'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.LATEST_POSTS}</div>
<div><Link href='/blogs'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} </div></Link></div>
<div className='text-black font-bold dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
<Link href='/blogs'>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
</div>
</Link>
</div>
<LatestPostsGroup posts={posts} />
</section>
@@ -67,12 +75,16 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{tags && (
<section className='mt-3'>
<div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.TAGS}</div>
<div><Link href='/tag'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} </div></Link></div>
</div>
<div className='px-5'>
<TagGroups tags={tags} currentTag={currentTag} />
<div className='text-black font-bold dark:text-gray-200'><i className='fa fa-tags mr-4'/>{locale.COMMON.TAGS}</div>
<Link href='/tag'>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
</div>
</Link>
</div>
<div className='px-5'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
)}
</div>

View File

@@ -13,7 +13,6 @@ const TagItem = ({ tag, selected }) => {
: ' text-gray-600'}`}
>
<a>
<i className='fa fa-tag mr-1'/>
{`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
</a>
</li>

View File

@@ -3,11 +3,11 @@ import Link from 'next/link'
const TagItemMini = ({ tag, selected = false }) => {
return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
<div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
mr-2 my-1 py-1 px-2 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
${selected
? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
: `text-gray-600 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
<div> <i className='fa fa-tag mr-2 py-0.5'/>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
<div>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</div>
</Link>
}

View File

@@ -14,7 +14,7 @@ const TagList = ({ tags, currentTag }) => {
return <></>
}
return <ul className='flex py-1 space-x-3'>
<li className='w-10 py-2 dark:text-gray-200'>标签:</li>
<li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-tags mr-2'/>标签:</li>
{tags.map(tag => {
const selected = tag.name === currentTag
return <TagItem key={tag.name} tag={tag} selected={selected}/>