Skip to content

Commit f5281ee

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #29 from appwrite/feat-nav-tooltips
feat: nav tooltips
2 parents 9a804ab + 70fc11d commit f5281ee

File tree

4 files changed

+74
-48
lines changed

4 files changed

+74
-48
lines changed

‎src/lib/layouts/Docs.svelte‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
<script lang="ts" context="module">
2+
import { navigating } from '$app/stores';
3+
import { writable } from 'svelte/store';
4+
25
export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
6+
export type DocsLayoutState = {
7+
showReferences: boolean;
8+
showSidenav: boolean;
9+
};
10+
export const layoutState = writable<DocsLayoutState>({
11+
showReferences: false,
12+
showSidenav: false
13+
});
14+
export function toggleReferences() {
15+
layoutState.update((state) => ({
16+
showReferences: !state.showReferences,
17+
showSidenav: false
18+
}));
19+
}
20+
export function toggleSidenav() {
21+
layoutState.update((state) => ({
22+
showReferences: false,
23+
showSidenav: !state.showSidenav
24+
}));
25+
}
326
</script>
427

528
<script lang="ts">
6-
const handleMenuClick = () => {
7-
const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
8-
const gridSideNavs = document.querySelector('.aw-grid-side-nav');
9-
const referencesMenu = document.querySelector('.aw-references-menu');
10-
11-
gridHugeNavs?.classList.toggle('is-open');
12-
gridSideNavs?.classList.toggle('is-open');
13-
referencesMenu?.classList.remove('is-open');
14-
};
15-
1629
export let variant: DocsLayoutVariant = 'default';
30+
1731
const variantClasses: Record<DocsLayoutVariant, string> = {
1832
default: 'aw-grid-side-nav aw-container',
1933
expanded: 'aw-grid-huge-navs',
@@ -22,11 +36,18 @@
2236
2337
$: variantClass = variantClasses[variant];
2438
39+
navigating.subscribe(() => {
40+
layoutState.set({
41+
showReferences: false,
42+
showSidenav: false
43+
});
44+
});
2545
</script>
2646

2747
<div class="u-position-relative">
2848
<div
2949
class={variantClass}
50+
class:is-open={$layoutState.showSidenav}
3051
style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
3152
>
3253
<section class="aw-mobile-header is-transparent">
@@ -50,7 +71,7 @@
5071
<a href="https://cloud.appwrite.io/console" class="aw-button">
5172
<span class="aw-sub-body-500">Go to console</span>
5273
</a>
53-
<button on:click={handleMenuClick} class="aw-button is-text" aria-label="open navigation">
74+
<button on:click={toggleSidenav} class="aw-button is-text" aria-label="open navigation">
5475
<svg
5576
xmlns="http://www.w3.org/2000/svg"
5677
width="20"

‎src/lib/layouts/Sidebar.svelte‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,14 @@
1919
</script>
2020

2121
<script lang="ts">
22-
import { page } from '$app/stores';
22+
import Tooltip from '$lib/components/Tooltip.svelte';
23+
import { layoutState, toggleSidenav } from './Docs.svelte';
24+
import SidebarNavButton from './SidebarNavButton.svelte';
2325
2426
export let expandable = false;
2527
export let navigation: NavTree;
2628
export let parent: NavParent | undefined = undefined;
2729
28-
const handleMenuClick = () => {
29-
const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
30-
const referencesMenu = document.querySelector('.aw-references-menu');
31-
32-
gridHugeNavs?.classList.toggle('is-open');
33-
referencesMenu?.classList.remove('is-open');
34-
};
35-
3630
function isNavLink(item: NavLink | NavGroup): item is NavLink {
3731
return 'href' in item;
3832
}
@@ -56,31 +50,29 @@
5650
{#each navigation as navGroup}
5751
<section>
5852
{#if isNavLink(navGroup)}
59-
<a
60-
class="aw-side-nav-button"
61-
href={navGroup.href}
62-
class:is-selected={$page.url?.pathname === navGroup.href}
63-
>
64-
<span class={navGroup.icon} aria-hidden="true" />
65-
<span class="aw-caption-400">{navGroup.label}</span>
66-
</a>
53+
{#if expandable && !$layoutState.showSidenav}
54+
<Tooltip placement="right">
55+
<SidebarNavButton groupItem={navGroup} />
56+
<svelte:fragment slot="tooltip">{navGroup.label}</svelte:fragment>
57+
</Tooltip>
58+
{:else}
59+
<SidebarNavButton groupItem={navGroup} />
60+
{/if}
6761
{:else}
6862
{#if navGroup.label}
69-
<h4 class="aw-side-nav-header aw-eyebrow">{navGroup.label}</h4>
63+
<h4 class="aw-side-nav-header aw-eyebrow u-un-break-text">{navGroup.label}</h4>
7064
{/if}
7165
<ul>
7266
{#each navGroup.items as groupItem}
7367
<li>
74-
<a
75-
class="aw-side-nav-button"
76-
class:is-selected={$page.url?.pathname === groupItem.href}
77-
href={groupItem.href}
78-
>
79-
{#if groupItem.icon}
80-
<span class={groupItem.icon} aria-hidden="true" />
81-
{/if}
82-
<span class="aw-caption-400">{groupItem.label}</span>
83-
</a>
68+
{#if expandable && !$layoutState.showSidenav}
69+
<Tooltip placement="right">
70+
<SidebarNavButton {groupItem} />
71+
<svelte:fragment slot="tooltip">{groupItem.label}</svelte:fragment>
72+
</Tooltip>
73+
{:else}
74+
<SidebarNavButton {groupItem} />
75+
{/if}
8476
</li>
8577
{/each}
8678
</ul>
@@ -90,7 +82,7 @@
9082
</div>
9183
{#if expandable}
9284
<button
93-
on:click={handleMenuClick}
85+
on:click={toggleSidenav}
9486
class="aw-icon-button u-margin-inline-start-auto"
9587
aria-label="toggle nav"
9688
>

‎src/lib/layouts/SidebarNavButton.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import type { NavLink } from './Sidebar.svelte';
4+
5+
export let groupItem: NavLink;
6+
</script>
7+
8+
<a
9+
class="aw-side-nav-button"
10+
class:is-selected={$page.url?.pathname === groupItem.href}
11+
href={groupItem.href}
12+
>
13+
{#if groupItem.icon}
14+
<span class={groupItem.icon} aria-hidden="true" />
15+
{/if}
16+
<span class="aw-caption-400">{groupItem.label}</span>
17+
</a>

‎src/routes/docs/references/[version]/[platform]/[service]/+page.svelte‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { goto } from '$app/navigation';
33
import { page } from '$app/stores';
44
import { MainFooter } from '$lib/components';
5+
import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
56
import { parse } from '$lib/utils/markdown';
67
import { Platform, platformMap, serviceMap, versions } from '$lib/utils/references.js';
78
import type { LayoutContext } from '$markdoc/layouts/Article.svelte';
@@ -29,11 +30,6 @@
2930
}
3031
});
3132
32-
function handleRefClick() {
33-
document.querySelector('.aw-references-menu')?.classList.toggle('is-open');
34-
document.querySelector('.aw-grid-two-side-navs')?.classList.remove('is-open');
35-
}
36-
3733
function selectPlatform(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
3834
const { version, service } = $page.params;
3935
goto(`/docs/references/${version}/${event.currentTarget.value}/${service}`, {
@@ -202,14 +198,14 @@
202198
</section>
203199
{/each}
204200
</div>
205-
<aside class="aw-references-menu">
206-
<button class="aw-icon-button" id="refOpen" on:click={handleRefClick}>
201+
<aside class="aw-references-menu" class:is-open={$layoutState.showReferences}>
202+
<button class="aw-icon-button" id="refOpen" on:click={toggleReferences}>
207203
<span class="icon-menu-alt-4" aria-hidden="true" />
208204
</button>
209205
<div class="aw-references-menu-content">
210206
<div class="u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24">
211207
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
212-
<button class="aw-icon-button" id="refClose" on:click={handleRefClick}>
208+
<button class="aw-icon-button" id="refClose" on:click={toggleReferences}>
213209
<span class="icon-x" aria-hidden="true" />
214210
</button>
215211
</div>

0 commit comments

Comments
 (0)