Skip to content

Commit 6f8a053

Browse files
hannahblairgradio-pr-bot
hannahblair
and
gradio-pr-bot
authored
improve mobile menu in docs (#12991)
* improve mobile menu design * add changeset * format --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
1 parent 7760161 commit 6f8a053

File tree

2 files changed

+146
-83
lines changed

2 files changed

+146
-83
lines changed

‎.changeset/tender-turtles-live.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"website": minor
3+
---
4+
5+
feat:improve mobile menu in docs

‎js/_website/src/lib/components/Header.svelte‎

Lines changed: 141 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,28 @@
1010
import LogoDownloadMenu from "./LogoDownloadMenu.svelte";
1111
import { theme } from "$lib/stores/theme";
1212
13+
const nav_links = [
14+
{ label: "API", href: "/docs" },
15+
{ label: "Guides", href: "/guides" },
16+
{ label: "HTML Components", href: "/custom-components/html-gallery" }
17+
];
18+
19+
const community_links = [
20+
{
21+
label: "File an Issue",
22+
href: "https://github.com/gradio-app/gradio/issues/new/choose"
23+
},
24+
{ label: "Discord", href: "https://discord.gg/feTf9x3ZSB" },
25+
{ label: "Github", href: "https://github.com/gradio-app/gradio" }
26+
];
27+
1328
let click_nav = false;
1429
let show_help_menu = false;
15-
let show_nav = false;
1630
let is_scrolled = false;
1731
let ready = false;
1832
let show_logo_menu = false;
1933
let logo_menu_x = 0;
2034
let logo_menu_y = 0;
21-
$: show_nav = click_nav || $store?.lg;
2235
$: current_logo = $theme === "dark" ? gradio_logo_dark : gradio_logo;
2336
2437
$: if (browser && !ready) {
@@ -69,10 +82,9 @@
6982

7083
{#if ready}
7184
<div
72-
class:shadow={show_nav}
73-
class="w-full mx-auto p-1.5 flex flex-wrap justify-between flex-row sticky top-4 items-center text-base z-40 lg:py-1.5 lg:gap-6 rounded-[10px] mb-4 transition-all duration-300 border {is_scrolled
74-
? 'backdrop-blur-sm bg-gray-50/80 dark:bg-neutral-800/80 lg:w-[70%] lg:max-w-4xl lg:px-6 border-gray-200 dark:border-neutral-700'
75-
: 'container lg:px-4 border-transparent'}"
85+
class="w-full mx-2 lg:mx-auto p-1.5 flex justify-between flex-row sticky top-0 lg:top-4 items-center text-base z-40 lg:py-1.5 lg:rounded-[10px] mb-4 transition-all duration-300 border {is_scrolled
86+
? 'backdrop-blur-sm bg-gray-50/80 dark:bg-neutral-800/80 lg:w-[70%] lg:max-w-4xl lg:px-6 border-gray-200 dark:border-neutral-700 lg:gap-3'
87+
: 'container lg:px-4 border-transparent lg:gap-6'}"
7688
>
7789
<a
7890
href="/"
@@ -81,110 +93,156 @@
8193
>
8294
<img src={current_logo} alt="Gradio logo" class="h-10" />
8395
</a>
84-
{#if !show_nav}
85-
<svg
86-
class="h-8 w-8 lg:hidden text-gray-900 dark:text-gray-300"
87-
viewBox="-10 -10 20 20"
88-
on:click={() => (click_nav = !click_nav)}
89-
>
90-
<rect x="-7" y="-6" width="14" height="2" fill="currentColor" />
91-
<rect x="-7" y="-1" width="14" height="2" fill="currentColor" />
92-
<rect x="-7" y="4" width="14" height="2" fill="currentColor" />
93-
</svg>
94-
{:else}
96+
97+
<button
98+
class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 transition-colors"
99+
on:click={() => (click_nav = !click_nav)}
100+
aria-label={click_nav ? "Close menu" : "Open menu"}
101+
>
95102
<svg
96-
class="h-5 w-5 lg:hidden mr-2 text-gray-900 dark:text-gray-300"
97-
viewBox="-10 -10 70 70"
98-
width="50"
99-
height="50"
103+
class="h-5 w-5 text-gray-700 dark:text-gray-300"
104+
fill="none"
100105
stroke="currentColor"
101-
stroke-width="10"
102-
stroke-linecap="round"
103-
on:click={() => (click_nav = !click_nav)}
106+
viewBox="0 0 24 24"
104107
>
105-
<line x1="0" y1="0" x2="50" y2="50" />
106-
<line x1="50" y1="0" x2="0" y2="50" />
108+
<path
109+
stroke-linecap="round"
110+
stroke-linejoin="round"
111+
stroke-width="2"
112+
d="M4 6h16M4 12h16M4 18h16"
113+
/>
107114
</svg>
108-
{/if}
115+
</button>
116+
109117
<nav
110-
class:hidden={!show_nav}
111-
class="flex w-full flex-col gap-3 px-4 py-2 lg:flex lg:w-auto lg:flex-row lg:gap-6 text-gray-900 dark:text-gray-300 lg:items-center lg:justify-center lg:flex-1 lg:text-sm"
118+
class="hidden lg:flex lg:w-auto lg:flex-row text-gray-900 dark:text-gray-300 lg:items-center lg:justify-center lg:flex-1 lg:text-sm {is_scrolled
119+
? 'lg:gap-3'
120+
: 'lg:gap-6'}"
112121
>
113-
<a class="thin-link" href="/docs">API</a>
114-
<a class="thin-link" href="/guides">Guides</a>
115-
<a class="thin-link" href="/custom-components/html-gallery"
116-
>HTML Components</a
117-
>
122+
{#each nav_links as { label, href }}
123+
<a class="thin-link" {href}>{label}</a>
124+
{/each}
118125
<div
119-
class="help-menu-container flex flex-col gap-3 lg:group lg:relative lg:flex lg:cursor-pointer lg:items-center lg:gap-3"
126+
class="help-menu-container lg:group lg:relative lg:flex lg:cursor-pointer lg:items-center lg:gap-3"
120127
>
121128
<button
122129
type="button"
123130
class="flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 font-inherit text-inherit"
124131
on:click={() => (show_help_menu = !show_help_menu)}
125132
>
126133
<span>Community</span>
127-
{#if show_help_menu}
128-
<svg
129-
class="h-4 w-4 text-gray-900 dark:text-gray-300 pointer-events-none"
130-
xmlns="http://www.w3.org/2000/svg"
131-
viewBox="0 0 20 20"
132-
fill="currentColor"
133-
>
134-
<path
135-
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
136-
transform="scale (1, -1)"
137-
transform-origin="center"
138-
/>
139-
</svg>
140-
{:else}
141-
<svg
142-
class="h-4 w-4 text-gray-900 dark:text-gray-300 pointer-events-none"
143-
xmlns="http://www.w3.org/2000/svg"
144-
viewBox="0 0 20 20"
145-
fill="currentColor"
146-
>
147-
<path
148-
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
149-
/>
150-
</svg>
151-
{/if}
134+
<svg
135+
class="h-4 w-4 text-gray-900 dark:text-gray-300 pointer-events-none transition-transform {show_help_menu
136+
? 'rotate-180'
137+
: ''}"
138+
xmlns="http://www.w3.org/2000/svg"
139+
viewBox="0 0 20 20"
140+
fill="currentColor"
141+
>
142+
<path
143+
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
144+
/>
145+
</svg>
152146
</button>
153147
{#if show_help_menu}
154148
<div
155-
class="help-menu flex flex-col gap-0 lg:absolute lg:top-9 lg:w-48 bg-white dark:bg-neutral-800 lg:backdrop-blur-sm lg:shadow-lg lg:group-hover:flex lg:sm:right-0 lg:rounded-lg border border-gray-200 dark:border-neutral-700"
149+
class="help-menu absolute top-9 w-48 bg-white dark:bg-neutral-800 backdrop-blur-sm shadow-lg right-0 rounded-lg border border-gray-200 dark:border-neutral-700 flex flex-col gap-0"
156150
>
157-
<a
158-
class="inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 lg:hover:bg-gray-100/80 dark:lg:hover:bg-neutral-700/50 transition-colors text-sm"
159-
href="https://github.com/gradio-app/gradio/issues/new/choose"
160-
target="_blank">File an Issue</a
161-
>
162-
<a
163-
class="inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 lg:hover:bg-gray-100/80 dark:lg:hover:bg-neutral-700/50 transition-colors text-sm"
164-
target="_blank"
165-
href="https://discord.gg/feTf9x3ZSB">Discord</a
166-
>
167-
<!-- <a
168-
class="inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 lg:hover:bg-gray-100/80 dark:lg:hover:bg-neutral-700/50 transition-colors text-sm"
169-
target="_blank"
170-
href="https://gradio.curated.co/">Newsletter</a
171-
> -->
172-
<a
173-
class="inline-block pl-8 lg:px-4 lg:pl-4 lg:py-2.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 lg:hover:bg-gray-100/80 dark:lg:hover:bg-neutral-700/50 transition-colors text-sm"
174-
target="_blank"
175-
href="https://github.com/gradio-app/gradio"
176-
>
177-
Github
178-
</a>
151+
{#each community_links as { label, href }, i}
152+
<a
153+
class="px-4 py-2.5 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100/80 dark:hover:bg-neutral-700/50 transition-colors text-sm {i ===
154+
0
155+
? 'rounded-t-lg'
156+
: ''} {i === community_links.length - 1
157+
? 'rounded-b-lg'
158+
: ''}"
159+
{href}
160+
target="_blank">{label}</a
161+
>
162+
{/each}
179163
</div>
180164
{/if}
181165
</div>
182166
</nav>
167+
183168
<div class="hidden lg:flex items-center gap-4 lg:flex-shrink-0">
184169
<Search />
185170
<ThemeToggle />
186171
</div>
187172
</div>
173+
174+
{#if click_nav}
175+
<div class="fixed inset-0 z-50 bg-white dark:bg-neutral-900 lg:hidden">
176+
<div
177+
class="container mx-2 lg:mx-auto flex flex-col h-full p-1.5 border border-transparent"
178+
>
179+
<div
180+
class="flex justify-between items-center pb-4 border-b border-gray-100 dark:border-neutral-800"
181+
>
182+
<a href="/" on:click={() => (click_nav = false)}>
183+
<img src={current_logo} alt="Gradio logo" class="h-10" />
184+
</a>
185+
<button
186+
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
187+
on:click={() => (click_nav = false)}
188+
aria-label="Close menu"
189+
>
190+
<svg
191+
class="h-5 w-5 text-gray-700 dark:text-gray-300"
192+
fill="none"
193+
stroke="currentColor"
194+
viewBox="0 0 24 24"
195+
>
196+
<path
197+
stroke-linecap="round"
198+
stroke-linejoin="round"
199+
stroke-width="2"
200+
d="M6 18L18 6M6 6l12 12"
201+
/>
202+
</svg>
203+
</button>
204+
</div>
205+
206+
<nav
207+
class="flex flex-col flex-1 overflow-y-auto py-4 text-gray-900 dark:text-gray-100"
208+
>
209+
{#each nav_links as { label, href }}
210+
<a
211+
{href}
212+
on:click={() => (click_nav = false)}
213+
class="py-4 text-lg border-b border-gray-100 dark:border-neutral-800 hover:text-orange-500 transition-colors"
214+
>{label}</a
215+
>
216+
{/each}
217+
218+
<div class="py-4 border-b border-gray-100 dark:border-neutral-800">
219+
<span
220+
class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500"
221+
>Community</span
222+
>
223+
<div class="flex flex-col mt-3 gap-1">
224+
{#each community_links as { label, href }}
225+
<a
226+
{href}
227+
target="_blank"
228+
on:click={() => (click_nav = false)}
229+
class="py-2.5 text-base text-gray-700 dark:text-gray-300 hover:text-orange-500 transition-colors"
230+
>{label}</a
231+
>
232+
{/each}
233+
</div>
234+
</div>
235+
</nav>
236+
237+
<div
238+
class="py-4 border-t border-gray-100 dark:border-neutral-800 flex items-center gap-4"
239+
>
240+
<Search />
241+
<ThemeToggle />
242+
</div>
243+
</div>
244+
</div>
245+
{/if}
188246
{/if}
189247

190248
<LogoDownloadMenu bind:show={show_logo_menu} x={logo_menu_x} y={logo_menu_y} />

0 commit comments

Comments
 (0)