feat: improve header menu flexibility

Magickbase · Sep 8, 2023 · e653357 · e653357
1 parent 79a3ab9
commit e653357
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 33 deletions.
diff --git a/packages/app/src/components/Header/index.module.scss b/packages/app/src/components/Header/index.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable custom-property-pattern */
 /* stylelint-disable no-descending-specificity */
 @import '../../styles/variables.module';
 
@@ -100,7 +101,11 @@ $desktopHeaderContentHeight: 88px;
   &Content {
     // This approach may not be conducive to understanding and maintenance, but development is quite convenient for now.
     // If maintenance becomes difficult later, it can be changed to control based on JS + CSS variables.
-    --menuIconRightOffset: max(calc((100vw - var(--contentAreaWidth)) / 2), var(--contentWrapperPadding));
+    // `removed-body-scroll-bar-size` is provided by the `react-remove-scroll` component referenced by `radix-ui`.
+    --menuIconRightOffset: calc(
+      max(calc((100vw - var(--contentAreaWidth)) / 2), var(--contentWrapperPadding)) +
+        var(--removed-body-scroll-bar-size, 0px)
+    );
 
     position: fixed;
     top: 0;
@@ -130,6 +135,11 @@ $desktopHeaderContentHeight: 88px;
       }
     }
 
+    .content {
+      margin: 64px 0;
+      overflow: auto;
+    }
+
     .close {
       cursor: pointer;
     }
@@ -139,6 +149,10 @@ $desktopHeaderContentHeight: 88px;
       margin-top: 64px;
       font-weight: 600;
       font-size: 32px;
+
+      &:first-child {
+        margin-top: 0;
+      }
     }
 
     .links {
@@ -180,11 +194,15 @@ $desktopHeaderContentHeight: 88px;
         height: auto;
       }
 
+      .content {
+        margin: 0;
+      }
+
       .title {
         margin-top: 40px;
         font-size: 16px;
 
-        &:first-of-type {
+        &:first-child {
           margin-top: 32px;
         }
       }

diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
@@ -93,37 +93,39 @@ const MenuDialog: FC = () => {
             </Dialog.Close>
           </div>
 
-          <Link className={styles.title} href="/">
-            Home
-          </Link>
-
-          <div className={styles.title}>Services</div>
-          <div className={styles.links}>
-            <Link href="https://neuron.magickbase.com/">Neuron Wallet</Link>
-            <Link href="https://ckb.magickbase.com/">CKB Explorer</Link>
-            <Link href="https://godwoke.magickbase.com/">Godwoke Explorer</Link>
-            <Link href="https://axon.magickbase.com/">Axon Explorer</Link>
-            <Link href="https:/kuai.magickbase.com/">Kuai</Link>
-          </div>
-
-          <Link className={styles.title} href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes">
-            Public Node
-          </Link>
-
-          <div className={styles.title}>Language</div>
-          <div className={clsx(styles.links, styles.languages)}>
-            {languages.map(language => (
-              <Link
-                key={language.name}
-                className={clsx(styles.languageItem, {
-                  [styles.selected ?? '']: language.localeName === router.locale,
-                })}
-                href={{ pathname, query }}
-                locale={language.localeName}
-              >
-                {language.name}
-              </Link>
-            ))}
+          <div className={styles.content}>
+            <Link className={styles.title} href="/">
+              Home
+            </Link>
+
+            <div className={styles.title}>Services</div>
+            <div className={styles.links}>
+              <Link href="https://neuron.magickbase.com/">Neuron Wallet</Link>
+              <Link href="https://ckb.magickbase.com/">CKB Explorer</Link>
+              <Link href="https://godwoke.magickbase.com/">Godwoke Explorer</Link>
+              <Link href="https://axon.magickbase.com/">Axon Explorer</Link>
+              <Link href="https:/kuai.magickbase.com/">Kuai</Link>
+            </div>
+
+            <Link className={styles.title} href="https://github.com/nervosnetwork/ckb/wiki/Public-JSON-RPC-nodes">
+              Public Node
+            </Link>
+
+            <div className={styles.title}>Language</div>
+            <div className={clsx(styles.links, styles.languages)}>
+              {languages.map(language => (
+                <Link
+                  key={language.name}
+                  className={clsx(styles.languageItem, {
+                    [styles.selected ?? '']: language.localeName === router.locale,
+                  })}
+                  href={{ pathname, query }}
+                  locale={language.localeName}
+                >
+                  {language.name}
+                </Link>
+              ))}
+            </div>
           </div>
 
           <Contacts className={styles.contacts} />