From 780b6e82305436fb4d050cd79cc8441488e9fe07 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 20 Sep 2023 19:48:14 +0200
Subject: [PATCH 1/2] feat: nav tooltips

---
 src/lib/layouts/Docs.svelte                   | 43 ++++++++++++-----
 src/lib/layouts/Sidebar.svelte                | 47 ++++++++-----------
 src/lib/layouts/SidebarNavButton.svelte       | 17 +++++++
 .../[platform]/[service]/+page.svelte         | 12 ++---
 4 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 src/lib/layouts/SidebarNavButton.svelte

diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index a3fc42ffe1..27acdb2913 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -1,19 +1,33 @@
 <script lang="ts" context="module">
+	import { navigating } from '$app/stores';
+	import { writable } from 'svelte/store';
+
 	export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
+	export type DocsLayoutState = {
+		showReferences: boolean;
+		showSidenav: boolean;
+	};
+	export const layoutState = writable<DocsLayoutState>({
+		showReferences: false,
+		showSidenav: false
+	});
+	export function toggleReferences() {
+		layoutState.update((state) => ({
+			showReferences: !state.showReferences,
+			showSidenav: false
+		}));
+	}
+	export function toggleSidenav() {
+		layoutState.update((state) => ({
+			showReferences: false,
+			showSidenav: !state.showSidenav
+		}));
+	}
 </script>
 
 <script lang="ts">
-	const handleMenuClick = () => {
-		const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
-		const gridSideNavs = document.querySelector('.aw-grid-side-nav');
-		const referencesMenu = document.querySelector('.aw-references-menu');
-
-		gridHugeNavs?.classList.toggle('is-open');
-		gridSideNavs?.classList.toggle('is-open');
-		referencesMenu?.classList.remove('is-open');
-	};
-
 	export let variant: DocsLayoutVariant = 'default';
+
 	const variantClasses: Record<DocsLayoutVariant, string> = {
 		default: 'aw-grid-side-nav aw-container',
 		expanded: 'aw-grid-huge-navs',
@@ -22,11 +36,18 @@
 
 	$: variantClass = variantClasses[variant];
 
+	navigating.subscribe(() => {
+		layoutState.set({
+			showReferences: false,
+			showSidenav: false
+		});
+	});
 </script>
 
 <div class="u-position-relative">
 	<div
 		class={variantClass}
+		class:is-open={$layoutState.showSidenav}
 		style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
 	>
 		<section class="aw-mobile-header is-transparent">
@@ -50,7 +71,7 @@
 				<a href="https://cloud.appwrite.io/console" class="aw-button">
 					<span class="aw-sub-body-500">Go to console</span>
 				</a>
-				<button on:click={handleMenuClick} class="aw-button is-text" aria-label="open navigation">
+				<button on:click={toggleSidenav} class="aw-button is-text" aria-label="open navigation">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="20"
diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index ef6e6e421c..e565eaa3b6 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -20,19 +20,14 @@
 
 <script lang="ts">
 	import { page } from '$app/stores';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { layoutState, toggleSidenav } from './Docs.svelte';
+	import SidebarNavButton from './SidebarNavButton.svelte';
 
 	export let expandable = false;
 	export let navigation: NavTree;
 	export let parent: NavParent | undefined = undefined;
 
-	const handleMenuClick = () => {
-		const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
-		const referencesMenu = document.querySelector('.aw-references-menu');
-
-		gridHugeNavs?.classList.toggle('is-open');
-		referencesMenu?.classList.remove('is-open');
-	};
-
 	function isNavLink(item: NavLink | NavGroup): item is NavLink {
 		return 'href' in item;
 	}
@@ -56,14 +51,14 @@
 			{#each navigation as navGroup}
 				<section>
 					{#if isNavLink(navGroup)}
-						<a
-							class="aw-side-nav-button"
-							href={navGroup.href}
-							class:is-selected={$page.url?.pathname === navGroup.href}
-						>
-							<span class={navGroup.icon} aria-hidden="true" />
-							<span class="aw-caption-400">{navGroup.label}</span>
-						</a>
+						{#if expandable && !$layoutState.showSidenav}
+							<Tooltip placement="right">
+								<SidebarNavButton groupItem={navGroup} />
+								<svelte:fragment slot="tooltip">{navGroup.label}</svelte:fragment>
+							</Tooltip>
+						{:else}
+							<SidebarNavButton groupItem={navGroup} />
+						{/if}
 					{:else}
 						{#if navGroup.label}
 							<h4 class="aw-side-nav-header aw-eyebrow">{navGroup.label}</h4>
@@ -71,16 +66,14 @@
 						<ul>
 							{#each navGroup.items as groupItem}
 								<li>
-									<a
-										class="aw-side-nav-button"
-										class:is-selected={$page.url?.pathname === groupItem.href}
-										href={groupItem.href}
-									>
-										{#if groupItem.icon}
-											<span class={groupItem.icon} aria-hidden="true" />
-										{/if}
-										<span class="aw-caption-400">{groupItem.label}</span>
-									</a>
+									{#if expandable && !$layoutState.showSidenav}
+										<Tooltip placement="right">
+											<SidebarNavButton {groupItem} />
+											<svelte:fragment slot="tooltip">{groupItem.label}</svelte:fragment>
+										</Tooltip>
+									{:else}
+										<SidebarNavButton {groupItem} />
+									{/if}
 								</li>
 							{/each}
 						</ul>
@@ -90,7 +83,7 @@
 		</div>
 		{#if expandable}
 			<button
-				on:click={handleMenuClick}
+				on:click={toggleSidenav}
 				class="aw-icon-button u-margin-inline-start-auto"
 				aria-label="toggle nav"
 			>
diff --git a/src/lib/layouts/SidebarNavButton.svelte b/src/lib/layouts/SidebarNavButton.svelte
new file mode 100644
index 0000000000..be4947d6f0
--- /dev/null
+++ b/src/lib/layouts/SidebarNavButton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { NavLink } from './Sidebar.svelte';
+
+	export let groupItem: NavLink;
+</script>
+
+<a
+	class="aw-side-nav-button"
+	class:is-selected={$page.url?.pathname === groupItem.href}
+	href={groupItem.href}
+>
+	{#if groupItem.icon}
+		<span class={groupItem.icon} aria-hidden="true" />
+	{/if}
+	<span class="aw-caption-400">{groupItem.label}</span>
+</a>
diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
index 56b840ca6a..1a0f1378a2 100644
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { MainFooter } from '$lib/components';
+	import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
 	import { parse } from '$lib/utils/markdown';
 	import { Platform, platformMap, serviceMap, versions } from '$lib/utils/references.js';
 	import type { LayoutContext } from '$markdoc/layouts/Article.svelte';
@@ -29,11 +30,6 @@
 		}
 	});
 
-	function handleRefClick() {
-		document.querySelector('.aw-references-menu')?.classList.toggle('is-open');
-		document.querySelector('.aw-grid-two-side-navs')?.classList.remove('is-open');
-	}
-
 	function selectPlatform(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
 		const { version, service } = $page.params;
 		goto(`/docs/references/${version}/${event.currentTarget.value}/${service}`, {
@@ -202,14 +198,14 @@
 				</section>
 			{/each}
 		</div>
-		<aside class="aw-references-menu">
-			<button class="aw-icon-button" id="refOpen" on:click={handleRefClick}>
+		<aside class="aw-references-menu" class:is-open={$layoutState.showReferences}>
+			<button class="aw-icon-button" id="refOpen" on:click={toggleReferences}>
 				<span class="icon-menu-alt-4" aria-hidden="true" />
 			</button>
 			<div class="aw-references-menu-content">
 				<div class="u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24">
 					<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
-					<button class="aw-icon-button" id="refClose" on:click={handleRefClick}>
+					<button class="aw-icon-button" id="refClose" on:click={toggleReferences}>
 						<span class="icon-x" aria-hidden="true" />
 					</button>
 				</div>

From 70fc11d61b3c3a97004af659b4f0e54a1070dccd Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 20 Sep 2023 21:01:24 +0200
Subject: [PATCH 2/2] fix: group label in nav

---
 src/lib/layouts/Sidebar.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index e565eaa3b6..1b236657a9 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -19,7 +19,6 @@
 </script>
 
 <script lang="ts">
-	import { page } from '$app/stores';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { layoutState, toggleSidenav } from './Docs.svelte';
 	import SidebarNavButton from './SidebarNavButton.svelte';
@@ -61,7 +60,7 @@
 						{/if}
 					{:else}
 						{#if navGroup.label}
-							<h4 class="aw-side-nav-header aw-eyebrow">{navGroup.label}</h4>
+							<h4 class="aw-side-nav-header aw-eyebrow u-un-break-text">{navGroup.label}</h4>
 						{/if}
 						<ul>
 							{#each navGroup.items as groupItem}