mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Move navigation into config file
This commit is contained in:
Matt Stauffer
parent
107bc4f7fe
commit
4bdb93992b
@ -14,4 +14,10 @@ return [
|
||||
return str_contains($page->getPath(), $path);
|
||||
});
|
||||
},
|
||||
'anyChildrenActive' => function ($page, $children) {
|
||||
return $children->contains(function ($link) use ($page) {
|
||||
return $page->getPath() == '/docs/'. $link;
|
||||
});
|
||||
},
|
||||
'navigation' => require_once('navigation.php'),
|
||||
];
|
||||
|
||||
86
docs/navigation.php
Normal file
86
docs/navigation.php
Normal file
@ -0,0 +1,86 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'Introduction' => [
|
||||
'What is Tailwind?' => 'what-is-tailwind',
|
||||
],
|
||||
'Getting Started' => [
|
||||
'Installation' => 'installation',
|
||||
'Configuration' => 'configuration',
|
||||
'Colors' => 'colors',
|
||||
'Responsive Design' => 'responsive-design',
|
||||
'Adding New Utilities' => 'adding-new-utilities',
|
||||
'Extracting Components' => 'extracting-components',
|
||||
'Functions & Directives' => 'functions-and-directives',
|
||||
],
|
||||
'Styles' => [
|
||||
'Backgrounds' => [
|
||||
'Color' => 'background-color',
|
||||
'Position' => 'background-position',
|
||||
'Size' => 'background-size',
|
||||
],
|
||||
'Borders' => [
|
||||
'Width' => 'border-width',
|
||||
'Color' => 'border-color',
|
||||
'Style' => 'border-style',
|
||||
],
|
||||
'Border Radius' => 'border-radius',
|
||||
'Container' => 'container',
|
||||
'Display' => 'display',
|
||||
'Flexbox' => [
|
||||
'Display' => 'flexbox-display',
|
||||
'Direction' => 'flexbox-direction',
|
||||
'Wrapping' => 'flexbox-wrapping',
|
||||
'Justify Content' => 'flexbox-justify-content',
|
||||
'Align Items' => 'flexbox-align-items',
|
||||
'Align Content' => 'flexbox-align-content',
|
||||
'Align Self' => 'flexbox-align-self',
|
||||
'Flex, Grow, & Shrink' => 'flexbox-flex-grow-shrink',
|
||||
],
|
||||
'Floats' => 'floats',
|
||||
'Forms' => 'forms',
|
||||
'Grid' => 'grid',
|
||||
'Interactivity' => [
|
||||
'Cursor' => 'cursor',
|
||||
'Resize' => 'resize',
|
||||
'Pointer Events' => 'pointer-events',
|
||||
'User Select' => 'user-select',
|
||||
],
|
||||
'Lists' => 'lists',
|
||||
'Opacity' => 'opacity',
|
||||
'Overflow' => 'overflow',
|
||||
'Positioning' => 'positioning',
|
||||
'Shadows' => 'shadows',
|
||||
'Sizing' => [
|
||||
'Width' => 'width',
|
||||
'Min-Width' => 'min-width',
|
||||
'Max-Width' => 'max-width',
|
||||
'Height' => 'height',
|
||||
'Min-Height' => 'min-height',
|
||||
'Max-Height' => 'max-height',
|
||||
],
|
||||
'Spacing' => 'spacing',
|
||||
'SVG' => 'svg',
|
||||
'Typography' => [
|
||||
'Fonts' => 'fonts',
|
||||
'Color' => 'text-color',
|
||||
'Sizing' => 'text-sizing',
|
||||
'Weight' => 'font-weight',
|
||||
'Alignment' => 'text-alignment',
|
||||
'Line Height' => 'line-height',
|
||||
'Letter Spacing' => 'letter-spacing',
|
||||
'Style & Decoration' => 'text-style',
|
||||
'Whitespace & Wrapping' => 'whitespace-and-wrapping',
|
||||
],
|
||||
'Vertical Alignment' => 'vertical-alignment',
|
||||
'Visibility' => 'visibility',
|
||||
'Z-Index' => 'z-index',
|
||||
],
|
||||
'Examples' => [
|
||||
'Alerts' => 'examples/alerts',
|
||||
'Buttons' => 'examples/buttons',
|
||||
'Cards' => 'examples/cards',
|
||||
'Forms' => 'examples/forms',
|
||||
'Navigation' => 'examples/navigation',
|
||||
],
|
||||
];
|
||||
@ -32,144 +32,31 @@
|
||||
</div>
|
||||
<div class="p-8 flex-1 overflow-y-scroll">
|
||||
<nav id="nav" class="text-base overflow-y-scroll">
|
||||
@foreach ($page->navigation as $sectionName => $sectionItems)
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/what-is-tailwind">What is Tailwind?</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
|
||||
<ul>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'installation' => 'Installation',
|
||||
'configuration' => 'Configuration',
|
||||
'colors' => 'Colors',
|
||||
'responsive-design' => 'Responsive Design',
|
||||
'adding-new-utilities' => 'Adding New Utilities',
|
||||
'extracting-components' => 'Extracting Components',
|
||||
'functions-and-directives' => 'Functions & Directives'
|
||||
]])
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
|
||||
<ul class="mb-8">
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/background-color" class="hover:underline block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'background-color' => 'Color',
|
||||
'background-position' => 'Position',
|
||||
'background-size' => 'Size',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/border-width" class="hover:underline block mb-2 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'border-width' => 'Width',
|
||||
'border-color' => 'Color',
|
||||
'border-style' => 'Style',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'border-radius' => 'Border Radius',
|
||||
'container' => 'Container',
|
||||
'display' => 'Display',
|
||||
]])
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/flexbox-display" class="hover:underline block mb-2 {{ $page->active('/docs/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
|
||||
<ul class="pl-4 {{ $page->active('/docs/flexbox-') ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'flexbox-display' => 'Display',
|
||||
'flexbox-direction' => 'Direction',
|
||||
'flexbox-wrapping' => 'Wrapping',
|
||||
'flexbox-justify-content' => 'Justify Content',
|
||||
'flexbox-align-items' => 'Align Items',
|
||||
'flexbox-align-content' => 'Align Content',
|
||||
'flexbox-align-self' => 'Align Self',
|
||||
'flexbox-flex-grow-shrink' => 'Flex, Grow, & Shrink',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'floats' => 'Floats',
|
||||
'forms' => 'Forms',
|
||||
'grid' => 'Grid',
|
||||
]])
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/cursor" class="hover:underline block mb-2 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'cursor' => 'Cursor',
|
||||
'resize' => 'Resize',
|
||||
'pointer-events' => 'Pointer Events',
|
||||
'user-select' => 'User Select',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'lists' => 'Lists',
|
||||
'opacity' => 'Opacity',
|
||||
'overflow' => 'Overflow',
|
||||
'positioning' => 'Positioning',
|
||||
'shadows' => 'Shadows',
|
||||
]])
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/width" class="hover:underline block mb-2 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'width' => 'Width',
|
||||
'min-width' => 'Min-Width',
|
||||
'max-width' => 'Max-Width',
|
||||
'height' => 'Height',
|
||||
'min-height' => 'Min-Height',
|
||||
'max-height' => 'Max-Height',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'spacing' => 'Spacing',
|
||||
'svg' => 'SVG',
|
||||
]])
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'fonts' => 'Fonts',
|
||||
'text-color' => 'Color',
|
||||
'text-sizing' => 'Sizing',
|
||||
'font-weight' => 'Weight',
|
||||
'text-alignment' => 'Alignment',
|
||||
'line-height' => 'Line Height',
|
||||
'letter-spacing' => 'Letter Spacing',
|
||||
'text-style' => 'Style & Decoration',
|
||||
'whitespace-and-wrapping' => 'Whitespace & Wrapping',
|
||||
]])
|
||||
</ul>
|
||||
</li>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'vertical-alignment' => 'Vertical Alignment',
|
||||
'visibility' => 'Visibility',
|
||||
'z-index' => 'Z-Index',
|
||||
]])
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
|
||||
<ul>
|
||||
@include('_partials.nav-links', ['links' => [
|
||||
'examples/alerts' => 'Alerts',
|
||||
'examples/buttons' => 'Buttons',
|
||||
'examples/cards' => 'Cards',
|
||||
'examples/forms' => 'Forms',
|
||||
'examples/navigation' => 'Navigation',
|
||||
]])
|
||||
@foreach ($sectionItems as $name => $slugOrChildren)
|
||||
@if (is_string($slugOrChildren))
|
||||
<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>
|
||||
@else
|
||||
<li class="mb-3">
|
||||
<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>
|
||||
<ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
|
||||
@foreach ($slugOrChildren as $title => $link)
|
||||
<li class="mb-3">
|
||||
<a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
|
||||
{{ $title }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endforeach
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
@foreach ($links as $link => $title)
|
||||
<li class="mb-3">
|
||||
<a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
|
||||
{{ $title }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
Loading…
x
Reference in New Issue
Block a user