Skip to content

Commit 65035eb

Browse files
HassanZahirniasteven-fox
HassanZahirnia
and
steven-fox
authored
📱 Enhance mobile experience (#173)
* ✨ Add mobile menu component and enhance layout interactivity * ✨ Enhance mobile menu and social links styling for improved accessibility and user experience * ✨ Improve mobile menu item layout and add right-arrow icons for active routes * ✨ Refactor mobile menu links to improve active state handling and readability * ✨ Enhance mobile menu functionality by improving popover synchronization and adding toggle behavior * ✨ Enhance mobile menu accessibility by adding ARIA attributes and improving semantic roles * ✨ Refactor layout components to improve structure and enhance documentation navigation * ✨ Refactor mobile menu and documentation navigation for improved accessibility and structure * ✨ Refactor mini-platform switcher layout for improved structure and consistency * ✨ Refactor docs menu button layout for improved spacing and structure * ✨ Refactor DocSearch button styles for improved consistency and transition effects * ✨ Refactor docs menu button styles for improved layout and transition effects * ✨ Refactor mobile menu structure for improved layout and transition effects * ✨ Refactor docs mobile menu structure for improved layout and transition effects * ✨ Enhance mobile menu animations and structure for improved user experience * ✨ Enhance dark mode styles for DocSearch components to improve visual consistency and accessibility * ✨ Add padding and text styling to DocSearch hit source and footer for improved layout * ✨ Replace layout-three-columns component with docs-layout for improved structure and consistency * align docs menu center --------- Co-authored-by: Steven Fox <[email protected]>
1 parent 7fe3dbe commit 65035eb

12 files changed

+617
-123
lines changed

‎resources/css/app.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@
6767
}
6868
}
6969

70+
/* Prevents scrollbars from appearing when a popover is open */
71+
html:has(#mobile-menu-popover:popover-open) {
72+
overflow: hidden;
73+
}
74+
7075
/* Scrollbar width */
7176
::-webkit-scrollbar {
7277
height: 8px;

‎resources/css/docsearch.css

Lines changed: 101 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
}
1212

1313
.DocSearch-Button {
14-
@apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-gray-700/40 transition duration-300 ease-out dark:bg-black/30;
14+
@apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-slate-600/40 transition duration-300 ease-out dark:bg-black/30;
1515
}
1616

1717
.DocSearch-Button:hover {
1818
box-shadow: none;
19-
@apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
19+
@apply bg-gray-100 ring-1 ring-transparent dark:bg-slate-950 dark:ring-slate-700/70;
2020
}
2121

2222
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
@@ -36,11 +36,11 @@
3636
}
3737

3838
.DocSearch-Button-Placeholder {
39-
@apply hidden pr-1 pl-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
39+
@apply px-1 text-sm text-black/60 transition duration-300 min-[520px]:pr-20 dark:text-white/60;
4040
}
4141

4242
.DocSearch-Button-Keys {
43-
@apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
43+
@apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
4444
}
4545

4646
.DocSearch-Button-Key {
@@ -55,12 +55,108 @@
5555
@apply text-black;
5656
}
5757

58+
.DocSearch-Modal:where(.dark, .dark *) {
59+
background-color: var(--color-slate-950);
60+
--docsearch-hit-active-color: var(--color-slate-300);
61+
}
62+
63+
.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
64+
border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
65+
background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
66+
color: var(--color-slate-300);
67+
}
68+
.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *)::placeholder {
69+
color: var(--color-slate-400);
70+
}
71+
.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
72+
--tw-shadow: 0 0 #0000;
73+
box-shadow:
74+
var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
75+
var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
76+
}
77+
.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *):disabled {
78+
border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
79+
color: var(--color-slate-400);
80+
}
81+
.DocSearch-SearchBar
82+
.DocSearch-Form:where(.dark, .dark *):disabled::placeholder,
83+
.DocSearch-SearchBar .DocSearch-MagnifierLabel {
84+
color: var(--color-slate-500);
85+
}
86+
.DocSearch-SearchBar .DocSearch-MagnifierLabel:where(.dark, .dark *) {
87+
color: var(--color-slate-300);
88+
}
89+
.DocSearch-SearchBar .DocSearch-LoadingIndicator {
90+
color: var(--color-slate-500);
91+
}
92+
.DocSearch-SearchBar .DocSearch-LoadingIndicator:where(.dark, .dark *),
93+
.DocSearch-SearchBar .DocSearch-Input:where(.dark, .dark *),
94+
.DocSearch-SearchBar .DocSearch-Cancel:where(.dark, .dark *) {
95+
color: var(--color-slate-300);
96+
}
97+
98+
.DocSearch-Dropdown .DocSearch-Hits mark:where(.dark, .dark *) {
99+
color: var(--color-slate-400);
100+
}
101+
102+
.DocSearch-Hit-source {
103+
@apply py-2.5 text-base;
104+
}
105+
106+
.DocSearch-Dropdown .DocSearch-Hit-source:where(.dark, .dark *) {
107+
background-color: var(--color-slate-950);
108+
color: var(--color-slate-300);
109+
}
110+
111+
.DocSearch-Dropdown
112+
.DocSearch-Hit[aria-selected='true']
113+
a:where(.dark, .dark *) {
114+
background-color: var(--color-indigo-800);
115+
}
116+
117+
.DocSearch-Dropdown .DocSearch-Hit a:where(.dark, .dark *) {
118+
background-color: var(--color-indigo-900);
119+
box-shadow: none;
120+
}
121+
122+
.DocSearch-Dropdown .DocSearch-Hit .DocSearch-Hit-title:where(.dark, .dark *) {
123+
color: var(--color-slate-300);
124+
}
125+
126+
.DocSearch-Dropdown
127+
.DocSearch-NoResults
128+
.DocSearch-Screen-Icon:where(.dark, .dark *) {
129+
color: var(--color-slate-500);
130+
}
131+
132+
.DocSearch-Dropdown
133+
.DocSearch-NoResults
134+
.DocSearch-Title:where(.dark, .dark *) {
135+
color: var(--color-slate-300);
136+
}
137+
138+
.DocSearch-Footer {
139+
@apply py-6;
140+
}
141+
142+
.DocSearch-Footer:where(.dark, .dark *) {
143+
background: var(--color-slate-950);
144+
box-shadow: none;
145+
@apply border-t border-t-slate-700;
146+
}
147+
148+
.DocSearch-Footer .DocSearch-Logo svg :where(.dark, .dark *) {
149+
fill: var(--color-gray-500);
150+
color: var(--color-white);
151+
background: transparent;
152+
}
153+
58154
.DocSearch-Screen-Icon {
59155
display: none;
60156
}
61157

62158
.DocSearch-Input {
63-
@apply focus-visible:outline-none;
159+
@apply ring-0 outline-0 focus-visible:outline-none;
64160
}
65161

66162
.DocSearch-Form {

‎resources/views/components/layout-three-columns.blade.php renamed to ‎resources/views/components/docs-layout.blade.php

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<x-layout :hasMenu="! empty($sidebarLeft)">
1+
<x-layout>
22
{{-- Main container --}}
33
<main
44
class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-360"
@@ -13,7 +13,13 @@ class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl
1313
<div class="flex w-full min-w-0 grow items-start px-2 pt-2">
1414
{{-- Content --}}
1515
<article class="flex w-full min-w-0 grow flex-col lg:pl-5 xl:pr-5">
16-
{{ $slot }}
16+
{{-- Docs mobile menu --}}
17+
<x-docs-menu>
18+
<nav class="docs-navigation">{{ $sidebarLeft }}</nav>
19+
</x-docs-menu>
20+
21+
{{-- Main content --}}
22+
<div class="mt-3">{{ $slot }}</div>
1723
</article>
1824

1925
{{-- Right sidebar --}}

‎resources/views/components/docs-menu.blade.php

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<div class="lg:hidden">
2+
<div
3+
class="mb-2 flex flex-col-reverse items-start justify-between gap-3.5 min-[400px]:mb-2.5 min-[400px]:flex-row min-[400px]:items-center"
4+
>
5+
{{-- Docs menu button --}}
6+
<button
7+
type="button"
8+
x-on:click="showDocsMenu = !showDocsMenu"
9+
class="-mx-1 flex items-center gap-1.5 px-1 py-1.5 transition duration-300 ease-in-out will-change-transform focus:ring-0 focus:outline-none"
10+
:aria-expanded="showDocsMenu"
11+
aria-label="Toggle docs menu"
12+
aria-haspopup="true"
13+
title="Open docs navigation"
14+
:class="{
15+
'translate-x-1': showDocsMenu,
16+
}"
17+
>
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
class="size-5.5"
21+
viewBox="0 0 24 24"
22+
>
23+
<g
24+
fill="none"
25+
stroke="currentColor"
26+
stroke-linecap="round"
27+
stroke-width="1.5"
28+
>
29+
<path
30+
d="M4 19V5a2 2 0 0 1 2-2h13.4a.6.6 0 0 1 .6.6v13.114"
31+
/>
32+
<path
33+
stroke-linejoin="round"
34+
d="M8 3v8l2.5-1.6L13 11V3"
35+
/>
36+
<path d="M6 17h14M6 21h14" />
37+
<path
38+
stroke-linejoin="round"
39+
d="M6 21a2 2 0 1 1 0-4"
40+
/>
41+
</g>
42+
</svg>
43+
44+
<div>Menu</div>
45+
</button>
46+
47+
{{-- Platform switcher --}}
48+
<x-mini-platform-switcher />
49+
</div>
50+
51+
{{-- Docs mobile menu --}}
52+
<div
53+
x-show="showDocsMenu"
54+
x-collapse
55+
role="dialog"
56+
aria-modal="true"
57+
aria-label="Docs menu"
58+
class="dark:bg-mirage rounded-xl bg-gray-100"
59+
>
60+
<div class="p-6">
61+
{{ $slot }}
62+
</div>
63+
</div>
64+
</div>

‎resources/views/components/layout.blade.php

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
<body
6161
x-cloak
6262
x-data="{
63-
showDocsNavigation: false,
63+
showMobileMenu: false,
64+
showDocsMenu: false,
6465
scrolled: window.scrollY > 50,
6566
width: window.innerWidth,
6667
get showPlatformSwitcherHeader() {
@@ -69,23 +70,19 @@
6970
}"
7071
x-resize="
7172
width = $width
72-
if (width >= 1024) showDocsNavigation = false
73+
if (width >= 1024) {
74+
showMobileMenu = false
75+
showDocsMenu = false
76+
}
7377
"
7478
x-init="
7579
window.addEventListener('scroll', () => {
7680
scrolled = window.scrollY > 50
7781
})
7882
"
79-
x-effect="
80-
if (showDocsNavigation) {
81-
document.body.style.overflow = 'hidden'
82-
} else {
83-
document.body.style.overflow = ''
84-
}
85-
"
86-
class="min-h-screen overflow-x-clip font-poppins antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
83+
class="font-poppins min-h-screen overflow-x-clip antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
8784
>
88-
<x-navigation-bar :hasMenu="$hasMenu ?? false" />
85+
<x-navigation-bar />
8986
{{ $slot }}
9087
<x-footer />
9188
@livewireScriptConfig

‎resources/views/components/mini-platform-switcher.blade.php

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@php
2+
$isMobile = request()->is('docs/mobile/*');
3+
$mobileHref = '/docs/mobile/1';
4+
$desktopHref = '/docs/desktop/1';
5+
@endphp
6+
7+
<div
8+
class="dark:bg-mirage grid h-11 grid-cols-2 items-center gap-0.5 rounded-lg bg-gray-100 p-1 text-xs"
9+
>
10+
<a
11+
href="{{ $desktopHref }}"
12+
@class([
13+
'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
14+
'bg-white dark:bg-slate-700/30' => ! $isMobile,
15+
])
16+
>
17+
<div
18+
@class([
19+
'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
20+
'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
21+
])
22+
>
23+
<x-icons.pc class="size-5 shrink-0" />
24+
</div>
25+
<div>Desktop</div>
26+
</a>
27+
<a
28+
href="{{ $mobileHref }}"
29+
@class([
30+
'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
31+
'bg-white dark:bg-slate-700/30' => $isMobile,
32+
])
33+
>
34+
<div
35+
@class([
36+
'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
37+
'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
38+
])
39+
>
40+
<x-icons.device-mobile-phone class="size-4 shrink-0" />
41+
</div>
42+
<div>Mobile</div>
43+
</a>
44+
</div>

0 commit comments

Comments
 (0)