Skip to content

Commit 18635b7

Browse files
JonnxJonnx
committed
feat(documentation): added movile navigation using select input
1 parent dbc8a6c commit 18635b7

File tree

4 files changed

+105
-59
lines changed

4 files changed

+105
-59
lines changed

‎app/View/Components/DocsNavigation.php

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?php
2+
3+
namespace App\View\Components;
4+
5+
use Illuminate\View\Component;
6+
7+
class DocsNavigation extends Component
8+
{
9+
const LINKS = [
10+
'' => [
11+
'Getting Started' => '/documentation',
12+
'API Versions' => '/documentation/versions',
13+
'Changelog' => '/changelog',
14+
],
15+
'Font Awesome 6' => [
16+
'Overview' => '/documentation/font-awesome/v6',
17+
'Pins' => '/documentation/font-awesome/v6/pins',
18+
'Icons' => '/documentation/font-awesome/v6/icons',
19+
'Icon Stacks' => '/documentation/font-awesome/v6/icon-stacks',
20+
],
21+
'Font Awesome 5' => [
22+
'Overview' => '/documentation/font-awesome/v5',
23+
'Pins' => '/documentation/font-awesome/v5/pins',
24+
'Icons' => '/documentation/font-awesome/v5/icons',
25+
'Icon Stacks' => '/documentation/font-awesome/v5/icon-stacks',
26+
],
27+
'Font Awesome 4' => [
28+
'Overview' => '/documentation/font-awesome/v4',
29+
'Pins' => '/documentation/font-awesome/v4/pins',
30+
'Icons' => '/documentation/font-awesome/v4/icons',
31+
'Icon Stacks' => '/documentation/font-awesome/v4/icon-stacks',
32+
],
33+
'Integrations' => [
34+
'Overview' => '/documentation/integrations',
35+
'Bing Maps' => '/documentation/integrations/bing-maps',
36+
'Google Maps' => '/documentation/integrations/google-maps',
37+
'Mapbox' => '/documentation/integrations/mapbox',
38+
],
39+
'More' => [
40+
'License' => '/license',
41+
'Terms of Service' => '/terms',
42+
'Privacy Policy' => '/privacy',
43+
],
44+
];
45+
46+
public $linkGroups;
47+
48+
/**
49+
* Create a new component instance.
50+
*
51+
* @return void
52+
*/
53+
public function __construct()
54+
{
55+
$this->linkGroups = self::LINKS;
56+
}
57+
58+
/**
59+
* Get the view / contents that represent the component.
60+
*
61+
* @return \Illuminate\Contracts\View\View|\Closure|string
62+
*/
63+
public function render()
64+
{
65+
return view('components.docs-navigation');
66+
}
67+
}

‎public/css/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,9 @@
11
<div class="container mx-auto px-2 text-gray-100">
22
<div class="pt-4">
3-
<h1 class="font-bold text-5xl mb-24">Documentation</h1>
3+
<h1 class="font-bold text-5xl mb-8 md:mb-24">Documentation</h1>
44

55
<div class="md:grid grid-cols-5 gap-8">
6-
{{-- DOCS NAVIGATION --}}
7-
<div class="hidden md:block">
8-
<div class="mb-6">
9-
<a href="/documentation" class="block mb-1">Getting Started</a>
10-
<a href="/documentation/versions" class="block mb-1">API Versions</a>
11-
<a href="/changelog" class="block mb-1">Changelog</a>
12-
</div>
13-
14-
<div class="mb-6">
15-
<div class="text-black text-sm text-slate-300 mb-2">Font Awesome 6</div>
16-
<div class="ml-2">
17-
<a href="/documentation/font-awesome/v6" class="block mb-1">Overview</a>
18-
<a href="/documentation/font-awesome/v6/pins" class="block mb-1">Pins</a>
19-
<a href="/documentation/font-awesome/v6/icons" class="block mb-1">Icons</a>
20-
<a href="/documentation/font-awesome/v6/icon-stacks" class="block mb-1">Icon Stacks</a>
21-
</div>
22-
</div>
23-
24-
<div class="mb-6">
25-
<div class="text-black text-sm text-slate-300 mb-2">Font Awesome 5</div>
26-
<div class="ml-2">
27-
<a href="/documentation/font-awesome/v5" class="block mb-1">Overview</a>
28-
<a href="/documentation/font-awesome/v5/pins" class="block mb-1">Pins</a>
29-
<a href="/documentation/font-awesome/v5/icons" class="block mb-1">Icons</a>
30-
<a href="/documentation/font-awesome/v5/icon-stacks" class="block">Icon Stacks</a>
31-
</div>
32-
</div>
33-
34-
<div class="mb-6">
35-
<div class="text-black text-sm text-slate-300 mb-2">Font Awesome 4</div>
36-
<div class="ml-2">
37-
<a href="/documentation/font-awesome/v4" class="block mb-1">Overview</a>
38-
<a href="/documentation/font-awesome/v4/pins" class="block mb-1">Pins</a>
39-
<a href="/documentation/font-awesome/v4/icons" class="block mb-1">Icons</a>
40-
<a href="/documentation/font-awesome/v4/icon-stacks" class="block">Icon Stacks</a>
41-
</div>
42-
</div>
43-
44-
<div class="mb-6">
45-
<div class="text-black text-sm text-slate-300 mb-2">Integrations</div>
46-
<div class="ml-2">
47-
<a href="/documentation/integrations" class="block mb-1">Overview</a>
48-
<a href="/documentation/integrations/bing-maps" class="block mb-1">Bing Maps</a>
49-
<a href="/documentation/integrations/google-maps" class="block mb-1">Google Maps</a>
50-
<a href="/documentation/integrations/mapbox" class="block">Mapbox</a>
51-
</div>
52-
</div>
53-
54-
<div class="mb-6">
55-
<div class="text-black text-sm text-slate-300 mb-2">More</div>
56-
<div class="ml-2">
57-
<a href="/license" class="block mb-1">License</a>
58-
<a href="/terms" class="block mb-1">Terms of Service</a>
59-
<a href="/privacy" class="block">Privacy Policy</a>
60-
</div>
61-
</div>
62-
</div>
6+
<x-docs-navigation />
637

648
{{-- DOCS CONTENT --}}
659
<div class="col-span-4">

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div>
2+
{{-- MOBILE --}}
3+
<nav class="block md:hidden mb-8">
4+
<select name="DocsNavigation"
5+
class="block w-full text-gray-200 bg-gray-700 hover:bg-gray-800 rounded-md border-gray-900 focus:border-indigo-500 focus:ring-indigo-500"
6+
x-data="{url: '/{{ request()->path() }}'}"
7+
x-init="$watch('url', value => window.location.href=value)"
8+
x-model="url">
9+
10+
@foreach($linkGroups as $group => $links)
11+
<optgroup label="{{ $group }}">
12+
@foreach($links as $label => $url)
13+
<option value="{{ $url }}">{{ $label }}</option>
14+
@endforeach
15+
</optgroup>
16+
@endforeach
17+
</select>
18+
</nav>
19+
20+
{{-- DESKTOP --}}
21+
<nav class="hidden md:block">
22+
@foreach($linkGroups as $group => $links)
23+
<div class="mb-6">
24+
25+
@if($group)
26+
<div class="text-black text-sm text-slate-300 mb-2">{{ $group }}</div>
27+
@endif
28+
29+
@foreach($links as $label => $url)
30+
<a href="{{ $url }}" class="block mb-1">{{ $label }}</a>
31+
@endforeach
32+
</div>
33+
@endforeach
34+
</nav>
35+
</div>

0 commit comments

Comments
 (0)