fix: a link cannot click sometimes

Author: sanyuan0704

docs/.island/config.ts

@@ -74,7 +74,10 @@ function getTutorialSidebar() {
       items: [
         { text: 'Conventional Routing', link: '/guide/conventional-route' },
         { text: 'Using MDX', link: '/guide/use-mdx' },
-        { text: 'Custom Page', link: '/guide/custom-page' }
+        { text: 'Custom Page', link: '/guide/custom-page' },
+        { text: 'SPA Mode', link: '/guide/spa-mode' },
+        { text: 'Static Assets', link: '/guide/static-assets' },
+        { text: 'Extension', link: '/guide/extension' }
       ]
     }
   ];

src/node/utils.ts

@@ -11,3 +11,19 @@ export const createHash = (info: string): string => {
   }
   return createHashFunc('sha256').update(info).digest('hex').slice(0, 8);
 };
+
+export const parseUrl = (
+  url: string
+): {
+  url: string;
+  query: string;
+  hash: string;
+} => {
+  const [withoutHash, hash = ''] = url.split('#');
+  const [cleanedUrl, query = ''] = withoutHash.split('?');
+  return {
+    url: cleanedUrl,
+    query,
+    hash
+  };
+};

src/runtime/sideEffects.ts

@@ -1,6 +1,6 @@
 import { inBrowser } from './utils';
 
-const DEFAULT_NAV_HEIGHT = 72;
+const DEFAULT_NAV_HEIGHT = 60;
 
 // Control the scroll behavior of the browser when user clicks on a link
 if (inBrowser()) {

src/theme-default/logic/useAsideAnchor.ts

@@ -10,7 +10,7 @@ function isBottom() {
   );
 }
 
-const NAV_HEIGHT = 72;
+const NAV_HEIGHT = 60;
 
 export function useAsideAnchor(
   prevActiveLinkRef: React.MutableRefObject<HTMLAnchorElement | null>,

src/theme-default/styles/doc.css

@@ -21,8 +21,8 @@
 .island-doc h6::before {
   display: block;
   content: '';
-  margin-top: -70px;
-  height: 70px;
+  margin-top: -56px;
+  height: 56px;
   visibility: hidden;
   pointer-events: none;
 }

src/theme-default/styles/vars.css

@@ -323,7 +323,7 @@
 :root {
   --island-nav-height: var(--island-nav-height-mobile);
   --island-nav-height-mobile: 56px;
-  --island-nav-height-desktop: 72px;
+  --island-nav-height-desktop: 60px;
 }
 
 @media (min-width: 960px) {