From 246ae4fa6df60159a3c45fbb669ffb71f5f39d6e Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 25 Mar 2023 15:42:33 +0800
Subject: [PATCH] css fix

---
 components/DarkModeButton.js                 | 2 +-
 themes/medium/LayoutArchive.js               | 4 ++--
 themes/medium/LayoutTagIndex.js              | 2 +-
 themes/medium/components/BlogPostListPage.js | 8 ++++----
 themes/medium/components/Footer.js           | 2 +-
 themes/medium/components/MenuBarMobile.js    | 2 +-
 themes/medium/components/MenuItemCollapse.js | 2 +-
 themes/medium/components/MenuItemDrop.js     | 2 +-
 themes/medium/components/TopNavBar.js        | 2 +-
 themes/nobelium/components/Nav.js            | 2 +-
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 869a36b3..f324ea5e 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'dark:text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
     <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>
diff --git a/themes/medium/LayoutArchive.js b/themes/medium/LayoutArchive.js
index 520e0b33..a1449b72 100644
--- a/themes/medium/LayoutArchive.js
+++ b/themes/medium/LayoutArchive.js
@@ -8,7 +8,7 @@ export const LayoutArchive = props => {
   return (
     <LayoutBase {...props}>
       <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
-        {Object.keys(archivePosts).map(archiveTitle => (
+        {Object.keys(archivePosts)?.map(archiveTitle => (
           <div key={archiveTitle}>
             <div
               className="pt-16 pb-4 text-3xl dark:text-gray-300"
@@ -17,7 +17,7 @@ export const LayoutArchive = props => {
               {archiveTitle}
             </div>
             <ul>
-              {archivePosts[archiveTitle].map(post => (
+              {archivePosts[archiveTitle]?.map(post => (
                 <li
                   key={post.id}
                   className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
diff --git a/themes/medium/LayoutTagIndex.js b/themes/medium/LayoutTagIndex.js
index b007257a..1f173bd2 100644
--- a/themes/medium/LayoutTagIndex.js
+++ b/themes/medium/LayoutTagIndex.js
@@ -13,7 +13,7 @@ export const LayoutTagIndex = props => {
           {locale.COMMON.TAGS}:
         </div>
         <div id="tags-list" className="duration-200 flex flex-wrap">
-          {tagOptions.map(tag => {
+          {tagOptions?.map(tag => {
             return (
               <div key={tag.name} className="p-2">
                 <TagItemMini key={tag.name} tag={tag} />
diff --git a/themes/medium/components/BlogPostListPage.js b/themes/medium/components/BlogPostListPage.js
index ad78969b..bd7499dc 100644
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -16,8 +16,9 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
-  } else {
-    return (
+  }
+
+  return (
       <div className='w-full justify-center'>
         <div id='container'>
         {/* 文章列表 */}
@@ -27,8 +28,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
         </div>
         <PaginationSimple page={page} totalPage={totalPage} />
       </div>
-    )
-  }
+  )
 }
 
 export default BlogPostListPage
diff --git a/themes/medium/components/Footer.js b/themes/medium/components/Footer.js
index 53be93b0..b9d4f49c 100644
--- a/themes/medium/components/Footer.js
+++ b/themes/medium/components/Footer.js
@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6 relative'
+      className='z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
diff --git a/themes/medium/components/MenuBarMobile.js b/themes/medium/components/MenuBarMobile.js
index 5b4049b2..a81d54ff 100644
--- a/themes/medium/components/MenuBarMobile.js
+++ b/themes/medium/components/MenuBarMobile.js
@@ -28,7 +28,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}/>)}
+        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link.id} link={link}/>)}
 
     </nav>
   )
diff --git a/themes/medium/components/MenuItemCollapse.js b/themes/medium/components/MenuItemCollapse.js
index c2244b5a..539419eb 100644
--- a/themes/medium/components/MenuItemCollapse.js
+++ b/themes/medium/components/MenuItemCollapse.js
@@ -48,7 +48,7 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map(sLink => {
+            {link?.subMenus?.map(sLink => {
               return <div key={sLink.id} className='
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
diff --git a/themes/medium/components/MenuItemDrop.js b/themes/medium/components/MenuItemDrop.js
index 18cae944..443a9682 100644
--- a/themes/medium/components/MenuItemDrop.js
+++ b/themes/medium/components/MenuItemDrop.js
@@ -37,7 +37,7 @@ export const MenuItemDrop = ({ link }) => {
 
         {/* 子菜单 */}
         {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
-            {link.subMenus.map(sLink => {
+            {link?.subMenus?.map(sLink => {
               return <li key={sLink.id} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-2'>
                     <Link href={sLink.to}>
                         <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
diff --git a/themes/medium/components/TopNavBar.js b/themes/medium/components/TopNavBar.js
index d65abeef..3a7a0b55 100644
--- a/themes/medium/components/TopNavBar.js
+++ b/themes/medium/components/TopNavBar.js
@@ -62,7 +62,7 @@ export default function TopNavBar(props) {
 
                 {/* 桌面端顶部菜单 */}
                 <div className='hidden md:flex'>
-                    {links && links.map(link => <MenuItemDrop key={link.id} link={link}/>)}
+                    {links && links?.map(link => <MenuItemDrop key={link.id} link={link}/>)}
                 </div>
             </div>
         </div>
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js
index d7b920dc..cc618b90 100644
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -102,7 +102,7 @@ const NavBar = props => {
             <ul className=" hidden md:flex flex-row">
                 {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
             </ul>
-            <div><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5'></i>
+            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
                 <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
                     <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
                         {links.map(link => <MenuItemCollapse key={link.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}