feat: move/refactor navigation

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.

app/View/Components/Navigation.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Navigation extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.navigation');
+    }
+}

public/assets/css/global/frame.css

@@ -75,11 +75,6 @@ header > div i {
   font-size: 1.3em;
 }
 
-header > div nav {
-  background: var(--black);
-  position: relative;
-}
-
 .header-right {
   text-align: right;
 }
@@ -119,10 +114,23 @@ textarea[name="appeal_description"] {
   background: var(--black);
   z-index: 1;
   display: flex;
+  /* flex-direction: column; */
   align-items: center;
   justify-content: center;
 }
 
+.main-nav-content {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.main-nav-list {
+  margin-block: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+
 label[for="element-toggle"] {
   cursor: pointer;
 }
@@ -135,13 +143,18 @@ label[for="element-toggle"] {
   display: none;
 }
 
-a.nav-links {
+#main-nav a {
   border-bottom: none;
   font-size: 40px;
+  line-height: 1.25;
   color: var(--highlight);
   text-decoration: none;
 }
 
+#main-nav a:hover {
+  color: var(--white);
+}
+
 /* GLOBALS */
 
 a:hover {

resources/views/components/navigation.blade.php

@@ -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>

resources/views/frame.blade.php

@@ -30,46 +30,7 @@
             <div class="header-center">
                 <h1>{{$title}}</h1>
             </div>
-            <div class="header-right">
+            <x-navigation />
-                <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>
         </div>
     </header>