refactor: nav page style perfect

Author: fecommunity

client/pages/nav/[id].tsx

@@ -54,18 +54,6 @@ const Article: NextPage<IProps> = ({ siteKey }) => {
         <title>{(article?.title || t('unknownTitle')) + ' - ' + setting.systemTitle}</title>
       </Helmet>
       <div>
-        <div className="container">
-          <div className={style.breadcrump}>
-            <Breadcrumb>
-              <Breadcrumb.Item>
-                <Link href="/nav">
-                  <a aria-label="nav">{'导航'}</a>
-                </Link>
-              </Breadcrumb.Item>
-              <Breadcrumb.Item>{article.title}</Breadcrumb.Item>
-            </Breadcrumb>
-          </div>
-        </div>
         <article id="js-article-wrapper" className={style.articleWrap}>
           {/* S 文章 Seo 信息 */}
           {setting.systemUrl && (
@@ -147,6 +135,18 @@ const Article: NextPage<IProps> = ({ siteKey }) => {
   return (
     <DoubleColumnLayout
       leftNode={Content}
+      topNode={
+        <div className={style.breadcrump}>
+          <Breadcrumb>
+            <Breadcrumb.Item>
+              <Link href="/nav">
+                <a aria-label="nav">{'导航'}</a>
+              </Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>{article.title}</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+      }
       rightNode={
         <div className={'sticky'}>
           <Tags tags={tags} />

client/pages/nav/index.module.scss

@@ -1,17 +1,17 @@
 .wrapper {
-  padding-top: 1rem;
   padding-bottom: 2rem;
 }
 .search {
   background-color: var(--bg-box) !important;
   margin-bottom: 24px;
+  margin-top: 16px;
   div:not(:last-child) {
     border: none !important;
     background-color: var(--bg-box) !important;
   }
 }
 .breadcrump {
-  margin-bottom: 8px;
+  margin-top: 8px;
 }
 .articleContent {
   line-height: 24px;

client/pages/nav/index.tsx

@@ -7,6 +7,7 @@ import { ArticleProvider } from '@/providers/article';
 import { CategoryProvider } from '@/providers/category';
 import { useContext } from 'react';
 import { GlobalContext } from '@/context/global';
+import SystemNotification from '@/components/Setting/SystemNotification';
 
 interface IHomeProps {
   articles?: IArticle[];
@@ -17,6 +18,7 @@ const Page: NextPage<IHomeProps> = ({}) => {
   return (
     <div className={style.wrapper}>
       <div className="container">
+        <SystemNotification />
         <div className={style.search}>
           <AdvanceSearch />
         </div>

client/src/layout/DoubleColumnLayout/index.tsx

@@ -18,6 +18,7 @@ interface IProps {
   minHeight?: string | number;
   likesProps?: LikesProps;
   showComment?: boolean;
+  topNode?: React.ReactNode;
 }
 
 export const DoubleColumnLayout: React.FC<IProps> = ({
@@ -29,6 +30,7 @@ export const DoubleColumnLayout: React.FC<IProps> = ({
   minHeight = '100vh',
   likesProps,
   showComment = false,
+  topNode
 }) => {
   const $aside = useRef<HTMLElement>();
   const [showWidge, toggleWidge] = useToggle(true);
@@ -76,6 +78,7 @@ export const DoubleColumnLayout: React.FC<IProps> = ({
     <div className={cls(style.outerWrap)} style={{ minHeight }}>
       <div className={cls('container')}>
         <SystemNotification />
+        {topNode}
         <div className={style.wrap}>
           {(likesProps || showComment) && (
             <div