mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-06-25 16:04:37 -05:00
Code Packages Releases Activity

feat: move/refactor navigation

Browse Source 
moves the navigation code into its own component. this also refactors it into a list, this is generally helpful for AT as those can now announce the number of links. another thing is that the open button is moved into the <nav>-element. this makes it so that if someone were to navigate to the <nav>-element they’d be able open the menu from there.
This commit is contained in:
Zoë
2025-05-02 00:21:42 +02:00
parent d310cf4fb9
commit b921134002
4 changed files with 91 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/views/components/navigation.blade.php Normal file
View File

@ -0,0 +1,45 @@
<nav aria-label="site" class="header-right">
<!-- TODO: change to <button> -->
<label for="element-toggle">
<img class="menu-icon" src="/assets/images/global/menu.svg" alt="Menu" />
</label>
<input id="element-toggle" type="checkbox" />
<div id="main-nav">
<div class="main-nav-content">
<!-- TODO: change to <button> -->
<label for="element-toggle">
<img class="menu-icon" src="/assets/images/global/close.svg" alt="Close" />
</label>
<ul class="main-nav-list">
<li>
<a href="/">Front</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/listings/1">Listings</a>
</li>
<li>
<a href="/exports">Exports</a>
</li>
<li>
<a href="/appeals">Appeals</a>
</li>
<li>
<a href="/den">Den</a>
</li>
@if(Auth::check())
<li>
<a href="/logout">Logout</a>
</li>
@else
<li>
<a href="/den">The Den</a>
</li>
@endif
</ul>
</div>
</div>
</nav>

41
resources/views/frame.blade.php
View File

@ -30,46 +30,7 @@
<div class="header-center">
<h1>{{$title}}</h1>
</div>
<div class="header-right">
<label for="element-toggle">
<img class="menu-icon" src="/assets/images/global/menu.svg" title="menu-open-toggle" />
</label>
<input id="element-toggle" type="checkbox" />
<div id="main-nav">
<nav>
<label for="element-toggle">
<img class="menu-icon" src="/assets/images/global/close.svg" title="menu-open-toggle" />
</label><br>
<a href="/" title="front" class="nav-links">
Front
</a><br />
<a href="/about" title="about" class="nav-links">
About
</a><br />
<a href="/listings/1" title="instance listing" class="nav-links">
Listings
</a><br />
<a href="/exports" title="list exports" class="nav-links">
Exports
</a><br />
<a href="/appeals" title="location appeals" class="nav-links">
Appeals
</a><br />
@if(Auth::check())
<a href="/den" title="den-start" class="nav-links">
Den
</a><br />
<a href="/logout" title="logout" class="nav-links">
Logout
</a><br />
@else
<a href="/den" title="login" class="nav-links">
The Den
</a><br />
@endif
</nav>
</div>
</div>
<x-navigation />
</div>
</header>