www: Add .active on nav menu, fix homepage stats

www/assets/styles/app.css

@@ -157,8 +157,9 @@ body {
 header {
     padding: 1em;
     /** Align text and center of image */
-    justify-content: center;
+    /* justify-content: center; */
-    align-items: baseline;
+    width: fit-content;
+    margin: auto;
 }
 
 header h1 {

www/assets/styles/menu.css

@@ -116,34 +116,37 @@ nav {
     font-size: var(--font-size);
 }
 
+.menu>ul>li>a:hover, .menu>ul>li>a.active {
+    color: orange;
+}
+
+
 .toggler~.fill {
-    display: none;
+    visibility: hidden;
+    width: 0;
 }
 
 .toggler:checked~.fill {
-    background: var(--nav-bg);
+    background-color: var(--nav-bg);
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     height: var(--burger-size);
     width: var(--nav-width);
-    display: block;
     z-index: 10;
-}
+    transition: visibility .5s, width .5s;
-
-.toggler:checked~.menu>ul {
-    width: 20em;
-    transition: fit-content .5s ease;
-    opacity: 1;
-    transition: opacity .5s, visibility .5s, height .5s, width .5s;
     visibility: visible;
 }
 
-.toggler:checked~.menu>ul>li>a:hover {
+.toggler:checked~.menu>ul {
-    color: orange;
+    width: var(--nav-width);
+    opacity: 1;
+    transition: visibility .5s, width .5s;
+    visibility: visible;
 }
 
 
+
 @media screen and (max-width: 700px) {
     nav {
         --burger-size: 4em;

www/src/Controller/HomeController.php

@@ -50,7 +50,8 @@ class HomeController extends AbstractController
                 ORDER BY `contact_count` DESC LIMIT 1";
         $stmt = $this->connection->prepare($sql);
         $result = $stmt->executeQuery();
-        return $result->fetchAllAssociative()[0];
+        $species = $result->fetchAllAssociative();
+        return $species[0];
     }
 
     private function get_last_recorded_species() 
@@ -62,7 +63,8 @@ class HomeController extends AbstractController
                 ORDER BY `date` DESC LIMIT 1";
         $stmt = $this->connection->prepare($sql);
         $result = $stmt->executeQuery();
-        return $result->fetchAllAssociative();
+        $species = $result->fetchAllAssociative();
+        return $species[0];
     }
 
     private function last_chart_generated() {

www/templates/menu.html.twig

@@ -1,51 +1,66 @@
 <nav class="navbar">
-	<input type="checkbox" class="toggler">
+  <input type="checkbox" class="toggler" />
   <div class="hamburger">
     <div></div>
   </div>
   <div class="fill"></div>
   <div class="menu overlay">
     <ul>
-			<li>
+      {% include 'utils/nav-item.html.twig' with {
-				<a href="/">{{ "Home" | trans }}</a>
+        route: 'home',
-			</li>
+        url: '/',
-			<li>
+        name: 'Home'|trans
-				<a href="/about">{{ "About" | trans }}</a>
+      } %}
-			</li>
+      {% include 'utils/nav-item.html.twig' with {
-			<li>
+        route: 'about',
-				<a href="/today">{{ "Today's Detections" | trans }}</a>
+        url: '/about',
-			</li>
+        name: 'About'|trans
-			<li>
+      } %}
-				<a href="/spectro">{{ "Spectrogram" | trans }}</a>
+      {% include 'utils/nav-item.html.twig' with {
-			</li>
+        route: 'today',
-			<li>
+        url: '/today',
-				<a href="/stats">{{ "Species Stats" | trans }}</a>
+        name: "Today's Detections"|trans
-			</li>
+      } %}
+      {% include 'utils/nav-item.html.twig' with {
+        route: 'spectro',
+        url: '/spectro',
+        name: 'Live Spectrogram'|trans
+      } %}
+      {% include 'utils/nav-item.html.twig' with {
+        route: 'stats',
+        url: '/stats',
+        name: 'Statistics'|trans
+      } %}
       <li class="dropdown">
-				<a href="/records" class="dropdown-button">{{ "Recordings" | trans }}</a>
+        {% include 'utils/nav-item.html.twig' with {
+          route: 'records',
+          url: '/records',
+          name: 'Recordings'|trans
+        } %}
         <ul class="dropdown-content">
-					<li>
+          {% include 'utils/nav-item.html.twig' with {
-						<a href="/records/bests">
+            route: 'bests',
-							{{ "Best Recordings" | trans }}
+            url: '/records/best',
-						</a>
+            name: 'Best Recordings'|trans
-					</li>
+          } %}
         </ul>
       </li>
-			<li>
+      {% include 'utils/nav-item.html.twig' with {
-				<a href="/charts">{{ "Daily Charts" | trans }}</a>
+        route: 'bests',
-			</li>
+        url: '/records/best',
-			<li>
+        name: 'Best Recordings'|trans
-				<a href="/logs">{{ "View Logs" | trans }}</a>
+      } %}
-			</li>
+
-			<li>
+      {% include 'utils/nav-item.html.twig' with {
-				<a href="/services/status">{{ "Status" | trans }}</a>
+        route: 'logs',
-			</li>
+        url: '/logs',
-			<li>
+        name: 'View Logs'|trans
-				<a href="/tools">
+      } %}
-					{{ "Tools" | trans }}
+      {% include 'utils/nav-item.html.twig' with {
-				</a>
+        route: 'status',
-			</li>
+        url: '/services/status',
+        name: 'Status'|trans
+      } %}
     </ul>
   </div>
-	{% include "title.html.twig" %}
 </nav>

www/templates/stats.html.twig

@@ -19,7 +19,7 @@
         </li>
         <li class="last-recorded-species">
             {{ "Last detected species" | trans }}:
-            {% if stats["last-recorded-species"] is defined %}
+            {% if stats["last-detected-species"] is defined %}
             <span class="scientific-name">
                 {{ stats["last-detected-species"]["scientific_name"] }}
             </span>

www/templates/utils/nav-item.html.twig

@@ -0,0 +1,6 @@
+<li>
+  <a class="{{ app.request.get('_route') matches '{' ~ route ~ '_*}' ? 'active' }}"
+    href="{{ url }}">
+    {{ name }}
+  </a>
+</li>