mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add active state to menu.
This commit is contained in:
parent
dd480cf56a
commit
48e61a07f7
@ -14,26 +14,26 @@
|
||||
<div class="text-primary-light text-xs">A utility-first CSS framework for rapid UI development</div>
|
||||
</header>
|
||||
<div class="flex flex-fill">
|
||||
<nav class="px-6 pb-6 bg-light-softer text-light text-sm text-dark-soft leading-loose" style="flex: 0 0 12rem;">
|
||||
<nav class="px-6 pb-6 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
|
||||
<div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
|
||||
<ul>
|
||||
<li><a href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
</ul>
|
||||
<div class="mt-6 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
|
||||
<ul>
|
||||
<li><a href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/flex">Flex</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li><a href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/constrain' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/display' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flex' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flex">Flex</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/images' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/position' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/spacing' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/text' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="p-7 constrain-lg">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user