|
11 | 11 |
|
12 | 12 | @section('body') |
13 | 13 | <div class="min-h-screen"> |
14 | | - <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col"> |
15 | | - <div class="border-b border-smoke flex-none px-8 py-6"> |
16 | | - <div class="mb-4"> |
17 | | - <div class="hidden md:flex md:justify-center"> |
18 | | - <a href="/" class="flex justify-center"> |
19 | | - <svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg> |
20 | | - </a> |
21 | | - </div> |
22 | | - <p class="text-center"> |
23 | | - <a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a> |
24 | | - </p> |
25 | | - </div> |
26 | | - <div class="relative"> |
27 | | - <input id="docsearch" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search the docs"> |
28 | | - <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center"> |
29 | | - <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg> |
30 | | - </div> |
31 | | - </div> |
| 14 | + <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col"> |
| 15 | + <div class="border-b border-smoke flex-none px-8 py-6"> |
| 16 | + <div class="mb-4"> |
| 17 | + <div class="hidden md:flex md:justify-center"> |
| 18 | + <a href="/" class="flex justify-center"> |
| 19 | + <svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg> |
| 20 | + </a> |
32 | 21 | </div> |
33 | | - <div class="p-8 flex-1 overflow-y-scroll"> |
34 | | - <nav id="nav" class="text-base overflow-y-scroll"> |
35 | | - @foreach ($page->navigation as $sectionName => $sectionItems) |
36 | | - <div class="mb-8"> |
37 | | - <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p> |
38 | | - <ul> |
39 | | - @foreach ($sectionItems as $name => $slugOrChildren) |
40 | | - @if (is_string($slugOrChildren)) |
41 | | - <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li> |
42 | | - @else |
43 | | - <li class="mb-3"> |
44 | | - <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">{{ $name }}</a> |
45 | | - <ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}"> |
46 | | - @foreach ($slugOrChildren as $title => $link) |
47 | | - <li class="mb-3"> |
48 | | - <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}"> |
49 | | - {{ $title }} |
50 | | - </a> |
51 | | - </li> |
52 | | - @endforeach |
53 | | - </ul> |
54 | | - </li> |
55 | | - @endif |
56 | | - @endforeach |
57 | | - </ul> |
58 | | - </div> |
59 | | - @endforeach |
60 | | - </nav> |
| 22 | + <p class="text-center"> |
| 23 | + <a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a> |
| 24 | + </p> |
| 25 | + </div> |
| 26 | + <div class="relative"> |
| 27 | + <input id="docsearch" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search the docs"> |
| 28 | + <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center"> |
| 29 | + <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg> |
61 | 30 | </div> |
| 31 | + </div> |
62 | 32 | </div> |
63 | | - <div class="md:ml-80"> |
64 | | - <div class="fixed w-full z-20"> |
65 | | - <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center"> |
66 | | - <div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center"> |
67 | | - <svg class="w-4 h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> |
68 | | - </div> |
69 | | - <a href="/" class="mx-auto inline-flex items-center"> |
70 | | - <svg class="w-8 h-8" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg> |
71 | | - </a> |
72 | | - <div id="sidebar-close" class="hidden"> |
73 | | - <div class="flex items-center absolute pin-r pin-y px-4"> |
74 | | - <svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg> |
75 | | - </div> |
76 | | - </div> |
77 | | - </div> |
| 33 | + <div class="p-8 flex-1 overflow-y-scroll"> |
| 34 | + <nav id="nav" class="text-base overflow-y-scroll"> |
| 35 | + @foreach ($page->navigation as $sectionName => $sectionItems) |
| 36 | + <div class="mb-8"> |
| 37 | + <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p> |
| 38 | + <ul> |
| 39 | + @foreach ($sectionItems as $name => $slugOrChildren) |
| 40 | + @if (is_string($slugOrChildren)) |
| 41 | + <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li> |
| 42 | + @else |
| 43 | + <li class="mb-3"> |
| 44 | + <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">{{ $name }}</a> |
| 45 | + <ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}"> |
| 46 | + @foreach ($slugOrChildren as $title => $link) |
| 47 | + <li class="mb-3"> |
| 48 | + <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}"> |
| 49 | + {{ $title }} |
| 50 | + </a> |
| 51 | + </li> |
| 52 | + @endforeach |
| 53 | + </ul> |
| 54 | + </li> |
| 55 | + @endif |
| 56 | + @endforeach |
| 57 | + </ul> |
78 | 58 | </div> |
79 | | - <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto"> |
80 | | - <div id="app" v-cloak> |
81 | | - <div class="markdown"> |
82 | | - <h1>{{ $page->title }}</h1> |
83 | | - |
84 | | - @if($page->description) |
85 | | - <div class="text-xl text-slate-light mb-4"> |
86 | | - {{ $page->description }} |
87 | | - </div> |
88 | | - @endif |
89 | | - |
90 | | - @if($page->features) |
91 | | - @include('_partials.feature-badges', $page->features->all()) |
92 | | - @endif |
93 | | - |
94 | | - @yield('content') |
95 | | - </div> |
| 59 | + @endforeach |
| 60 | + </nav> |
| 61 | + </div> |
| 62 | + </div> |
| 63 | + <div class="md:ml-80"> |
| 64 | + <div class="fixed w-full z-20"> |
| 65 | + <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center"> |
| 66 | + <div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center"> |
| 67 | + <svg class="w-4 h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> |
| 68 | + </div> |
| 69 | + <a href="/" class="mx-auto inline-flex items-center"> |
| 70 | + <svg class="w-8 h-8" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg> |
| 71 | + </a> |
| 72 | + <div id="sidebar-close" class="hidden"> |
| 73 | + <div class="flex items-center absolute pin-r pin-y px-4"> |
| 74 | + <svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg> |
| 75 | + </div> |
| 76 | + </div> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto"> |
| 80 | + <div id="app" v-cloak> |
| 81 | + <div class="markdown"> |
| 82 | + <h1>{{ $page->title }}</h1> |
| 83 | + @if ($page->description) |
| 84 | + <div class="text-xl text-slate-light mb-4"> |
| 85 | + {{ $page->description }} |
96 | 86 | </div> |
97 | | - <script src="/js/app.js"></script> |
| 87 | + @endif |
| 88 | + @if ($page->features) |
| 89 | + @include('_partials.feature-badges', $page->features->all()) |
| 90 | + @endif |
| 91 | + @yield('content') |
98 | 92 | </div> |
| 93 | + </div> |
| 94 | + <script src="/js/app.js"></script> |
99 | 95 | </div> |
| 96 | + </div> |
100 | 97 | </div> |
101 | 98 |
|
102 | 99 | <svg style="height: 0; width: 0; position: absolute; visibility: hidden;"> |
|
0 commit comments