优化顶栏移动端中

Author: vhtmui

src/lib/ZHeader/ZHeader.svelte

@@ -44,6 +44,12 @@
 	 */
 	let numOfSnippets = Object.keys(others).length;
 
+	let windowWidth = $state(0);
+
+	let userAgent = $derived(windowWidth > 768 ? 'PC' : 'Mobile');
+
+	let p = $derived(windowWidth > 768 ? 1 : 15);
+
 	/**
 	 * To save configs
 	 * */
@@ -78,25 +84,9 @@
 		let copy = snippets
 			.map((s) => s)
 			.sort((a, b) => {
-				const aStart = a.start.target * bodyWidth;
-				const gapBase = (a.width + b.width) * 0.5;
 				const gapActual =
 					a.start.target * bodyWidth + 0.5 * a.width - b.start.target * bodyWidth - 0.5 * b.width;
-				if (a === snippet) {
-					if (aStart < gapBase - 8) {
-						return -1;
-					} else {
-						return gapActual;
-					}
-				} else if (b === snippet) {
-					if (gapActual < gapBase - 8) {
-						return 1;
-					} else {
-						return gapActual;
-					}
-				} else {
-					return gapActual
-				}
+				return gapActual;
 			});
 		const length = copy.reduce((acc, cur) => acc + cur.width, 0);
 		const start = (bodyWidth - length) * 0.5;
@@ -151,6 +141,7 @@
 			}, 501);
 		});
 	});
+	$inspect(userAgent);
 	$effect(() => {
 		snippets[1].width;
 		setTimeout(() => {
@@ -159,12 +150,14 @@
 	});
 </script>
 
+<svelte:window bind:innerWidth={windowWidth} />
+
 <div id="rootHead">
 	{#each snippets as snippet}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="headItem"
-			style="left: {snippet.start.current * 100}%;"
+			style="{userAgent === 'PC' ? 'left' : 'top'}: {snippet.start.current * 100 * p}%;"
 			style:pointer-events={snippet.pointerEvents}
 			class:actived={snippet.actived}
 			bind:this={snippet.ele}

src/lib/ZNav/ZNav.svelte

@@ -40,6 +40,9 @@
 		border-radius: 0.7rem;
 		backdrop-filter: blur(5px);
 		background-color: var(--header-btn-bg-color);
+		&:empty{
+			display: none;
+		}
 		* {
 			color: var(--header-text-color);
 		}

src/lib/ZSibar/ZSibar.svelte

@@ -1,6 +1,5 @@
 <script>
 	import ZSbarContainer from './ZSbarContainer.svelte';
-	import { displays } from '$lib/shared.svelte';
     import {leftDisplay} from '$lib/shared.svelte';
 
 	import { slide } from 'svelte/transition';

src/lib/ZTopBar/ZTopBar.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { displays } from '$lib/shared.svelte';
+	import { rightDisplay } from '$lib/shared.svelte';
 	import { leftDisplay } from '$lib/shared.svelte';
 	import ZBlurBtn from '$lib/ZBlurBtn/ZBlurBtn.svelte';
 	import ZIcon from '$lib/ZIcon/ZIcon.svelte';
@@ -36,7 +36,7 @@
 		<ZBlurBtn
 			style={'transform: rotateY(180deg);'}
 			onclick={() => {
-				displays.displayToc = !displays.displayToc;
+				rightDisplay.displayToc = !rightDisplay.displayToc;
 			}}
 		>
 			<ZIcon option={'layout'} />

src/lib/shared.svelte.js

@@ -1,9 +1,7 @@
 /**
- * @property {boolean} display - Indicate sidebar's display.
  * @property {boolean} displayToc - Indicate right sidebar's display.
  */
-export const displays = $state({ 
-    display: false, 
+export const rightDisplay = $state({ 
     displayToc: false 
 });
 

src/routes/+layout.svelte

@@ -10,7 +10,7 @@
 	import { slide } from 'svelte/transition';
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { displays } from '$lib/shared.svelte.js';
+	import { rightDisplay } from '$lib/shared.svelte.js';
 	import { leftDisplay } from '$lib/shared.svelte.js';
 	import ZSibar from '$lib/ZSibar/ZSibar.svelte';
 	import ZSidebar from '$lib/ZSibar/ZSidebar.svelte';
@@ -58,9 +58,9 @@
 	let moblieSidebar = $state();
 
 	/**
-	 * @type {object} - Snapshot of `displays`.
+	 * @type {object} - Snapshot of `rightDisplay`.
 	 */
-	let { display, displayToc } = $state(displays);
+	let { displayToc } = $state(rightDisplay);
 
 	// Scroll header while scrolling.
 	let top = $state(0);
@@ -78,41 +78,42 @@
 	onMount(() => {
 		lastY = Y;
 
-		// Show sidebar if not in home page.
-		if ($page.url.pathname !== '/') {
-			displays.display = displays.displayToc = true;
-		} else {
-			display = displayToc = true;
-		}
+		// Show right sidebar if not in home page.
+		$page.url.pathname !== '/'
+			? (rightDisplay.displayToc = true)
+			: (rightDisplay.displayToc = false);
 
+		// Hide left sidebar if in home page. Always hide mobile sidebar on start.
 		leftDisplay.displayMobile = false;
-		if ($page.url.pathname === '/') {
-			leftDisplay.displayPC = false;
-		} else {
-			leftDisplay.displayPC = true;
-		}
+		$page.url.pathname === '/' ? (leftDisplay.displayPC = false) : (leftDisplay.displayPC = true);
 	});
 
 	afterNavigate(() => {
 		// get head elements passed to <ZTocList>.
 		headings = document.querySelectorAll(titles);
 
-		// Reset `displays` when navigating between home and other pages.
+		// Reset sidebars when navigating between home and other pages.
 		if ($navigating && windowWidth >= 768) {
 			const { from, to } = $navigating;
 			if (from.url.pathname !== '/' && to.url.pathname === '/') {
-				displayToc = displays.displayToc;
-				displays.display = displays.displayToc = false;
+				leftDisplay.displayPC = false;
+
+				// Save the current value of `displayToc` and set it to false.
+				displayToc = rightDisplay.displayToc;
+				rightDisplay.displayToc = false;
 			} else if (from.url.pathname === '/' && to.url.pathname !== '/') {
-				displays.displayToc = displayToc;
+				leftDisplay.displayPC = true;
+
+				rightDisplay.displayToc = displayToc;
 			}
 		}
 	});
 
 	$effect(() => {
 		if (moblieSidebar) {
+			removeEventListener('click', clickOutside);
 			function clickOutside(e) {
-				if (e.clientY > moblieSidebar.getBoundingClientRect().bottom) {
+				if (e.clientY > moblieSidebar?.getBoundingClientRect().bottom) {
 					leftDisplay.displayMobile = false;
 					removeEventListener('click', clickOutside);
 				}
@@ -172,7 +173,7 @@
 	<div class="content">
 		{@render children?.()}
 	</div>
-	{#if displays.displayToc}
+	{#if rightDisplay.displayToc}
 		<div class="toc">
 			{#if headings && headings?.length}
 				<div class="tocContainer" transition:slide|global={{ duration: 300, axis: 'x' }}>

src/routes/+page.svelte

@@ -21,7 +21,7 @@
 			align-items: center;
 			color: unset;
 			text-decoration: unset;
-			width: 84vw;
+			width: 100%;
 			border: 1px solid var(--home-border-color);
 			border-radius: 3rem;
 			font-size: 64px;

src/routes/docs/+layout.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { displays } from '$lib/shared.svelte';
 	/** @type {{ data: import('./$types').LayoutData, children: import('svelte').Snippet }} */
 	let { data, children } = $props();