Skip to content

Commit 8968b29

Browse files
HassanZahirniaHassanZahirnia
authored
✨ Improve docs platform switcher (#203)
* 💄 Refactor docs menu and remove mini platform switcher component * 💄 Refactor docs menu * 💄 Rework the platform switcher
1 parent 32a0001 commit 8968b29

File tree

4 files changed

+75
-169
lines changed

4 files changed

+75
-169
lines changed

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

Lines changed: 22 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,27 @@
1+
@php
2+
$isMobile = request()->is('docs/mobile/*');
3+
@endphp
4+
15
<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"
6+
{{-- Docs menu button --}}
7+
<button
8+
type="button"
9+
x-on:click="showDocsMenu = !showDocsMenu"
10+
class="mb-2 flex w-full items-center gap-2.5 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-3 focus:ring-0 focus:outline-none dark:from-slate-900/30 dark:to-indigo-400/30"
11+
:aria-expanded="showDocsMenu"
12+
aria-label="Toggle docs menu"
13+
aria-haspopup="true"
14+
title="Open docs navigation"
415
>
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>
16+
<x-icons.list-down class="size-6" />
4617

47-
{{-- Platform switcher --}}
48-
<x-docs.mini-platform-switcher />
49-
</div>
18+
<div class="text-left">
19+
<div class="leading-6">Menu</div>
20+
<div class="text-xs capitalize opacity-50">
21+
for {{ $isMobile ? 'Mobile' : 'Desktop' }}
22+
</div>
23+
</div>
24+
</button>
5025

5126
{{-- Docs mobile menu --}}
5227
<div
@@ -55,7 +30,7 @@ class="size-5.5"
5530
role="dialog"
5631
aria-modal="true"
5732
aria-label="Docs menu"
58-
class="dark:bg-mirage rounded-xl bg-gray-100"
33+
class="rounded-xl bg-gray-100 dark:bg-mirage"
5934
>
6035
<div class="p-6">
6136
{{ $slot }}

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

Lines changed: 0 additions & 44 deletions
This file was deleted.

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

Lines changed: 21 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,90 +4,33 @@
44
$desktopHref = '/docs/desktop/1';
55
@endphp
66

7-
<div
8-
{{ $attributes }}
9-
class="mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out dark:bg-mirage"
10-
:class="{
11-
'pb-4 pl-4 pr-5 pt-5' : showPlatformSwitcherHeader,
12-
'pb-2 pl-2 pr-3 pt-3' : !showPlatformSwitcherHeader
13-
}"
7+
<a
8+
href="{{ $isMobile ? $desktopHref : $mobileHref }}"
9+
class="group relative mx-0.5 mb-3 w-full rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-4 dark:from-slate-900/30 dark:to-indigo-900/35"
1410
>
1511
<div
16-
x-show="showPlatformSwitcherHeader"
17-
x-collapse
18-
class="space-y-1.5"
12+
class="flex items-center gap-3 transition group-hover:translate-y-3 group-hover:opacity-0"
1913
>
20-
<div class="space-y-1 pl-1">
21-
{{-- Title --}}
22-
<div class="text-sm">Choose your platform</div>
23-
{{-- Description --}}
24-
<div class="text-xs opacity-60">
25-
Switch between mobile and desktop documentation.
14+
@if ($isMobile)
15+
<x-icons.device-mobile-phone class="size-6 shrink-0" />
16+
@else
17+
<x-icons.pc class="size-6 shrink-0" />
18+
@endif
19+
<div class="text-left">
20+
<div class="text-xs opacity-50">You're reading the</div>
21+
<div class="text-sm leading-6 capitalize">
22+
{{ $isMobile ? 'Mobile' : 'Desktop' }} Documentation
2623
</div>
2724
</div>
28-
{{-- Separator --}}
29-
<div
30-
class="h-px w-full rounded-full bg-current opacity-5 dark:opacity-15"
31-
></div>
3225
</div>
3326

34-
{{-- Switcher --}}
35-
<div
36-
class="flex items-center gap-3 text-xs"
37-
:class="{ 'mt-2.5': showPlatformSwitcherHeader }"
38-
>
39-
{{-- Desktop --}}
40-
<a
41-
href="{{ $desktopHref }}"
42-
@class([
43-
'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
44-
'bg-white dark:bg-slate-700/30' => ! $isMobile,
45-
'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => $isMobile,
46-
])
47-
:class="{ 'flex-col p-2.5': showPlatformSwitcherHeader, 'flex-row p-2': !showPlatformSwitcherHeader }"
48-
>
49-
<div
50-
@class([
51-
'grid h-9 w-10 place-items-center rounded-lg',
52-
'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => ! $isMobile,
53-
])
54-
>
55-
<x-icons.pc class="size-6 shrink-0" />
56-
</div>
57-
<div>Desktop</div>
58-
</a>
59-
60-
{{-- Center icon --}}
61-
<svg
62-
xmlns="http://www.w3.org/2000/svg"
63-
class="size-6 dark:text-gray-400/80"
64-
viewBox="0 0 256 256"
65-
>
66-
<path
67-
fill="currentColor"
68-
d="M144 128a16 16 0 1 1-16-16a16 16 0 0 1 16 16m-84-16a16 16 0 1 0 16 16a16 16 0 0 0-16-16m136 0a16 16 0 1 0 16 16a16 16 0 0 0-16-16"
69-
/>
70-
</svg>
71-
72-
{{-- Mobile --}}
73-
<a
74-
href="{{ $mobileHref }}"
75-
@class([
76-
'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
77-
'bg-white dark:bg-slate-700/30' => $isMobile,
78-
'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => ! $isMobile,
79-
])
80-
:class="{ 'flex-col p-2.5': showPlatformSwitcherHeader, 'flex-row p-2': !showPlatformSwitcherHeader }"
27+
<div class="absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2">
28+
<div
29+
class="flex -translate-y-3 items-center justify-center gap-2 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100"
8130
>
82-
<div
83-
@class([
84-
'grid h-9 w-10 place-items-center rounded-lg',
85-
'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => $isMobile,
86-
])
87-
>
88-
<x-icons.device-mobile-phone class="size-5 shrink-0" />
89-
</div>
90-
<div>Mobile</div>
91-
</a>
31+
{{ $isMobile ? 'Mobile' : 'Desktop' }}
32+
<x-icons.right-arrow class="size-3" />
33+
{{ $isMobile ? 'Desktop' : 'Mobile' }}
34+
</div>
9235
</div>
93-
</div>
36+
</a>

‎resources/views/components/icons/list-down.blade.php

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<svg
2+
{{ $attributes }}
3+
viewBox="0 0 24 24"
4+
fill="none"
5+
xmlns="http://www.w3.org/2000/svg"
6+
>
7+
<path
8+
d="M20 6 3 6"
9+
stroke="currentColor"
10+
stroke-linecap="round"
11+
stroke-width="1.5"
12+
></path>
13+
<path
14+
d="M20 11 3 11"
15+
stroke="currentColor"
16+
stroke-linecap="round"
17+
stroke-width="1.5"
18+
></path>
19+
<path
20+
d="M10 16H3"
21+
stroke="currentColor"
22+
stroke-linecap="round"
23+
stroke-width="1.5"
24+
></path>
25+
<path
26+
d="m14 15 3.5 3 3.5 -3"
27+
stroke="currentColor"
28+
stroke-linecap="round"
29+
stroke-linejoin="round"
30+
stroke-width="1.5"
31+
></path>
32+
</svg>

0 commit comments

Comments
 (0)