nav

templates/home.handlebars

@@ -5,8 +5,38 @@
         <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <style>
+          .nav {
+            grid-column: span 2;
+            background-color: #e5e7eb;
+            display: flex;
+            gap: 10px;
+            box-sizing: border-box;
+            line-height: 1.5;
+          }
+
+          .nav a {
+            display: block;
+            font-size: 30px;
+            padding: 0 20px;
+            text-decoration: none;
+            font-family: sans-serif;
+          }
+
+          .nav__item--selected {
+            background-color: white;
+            border-bottom: 3px solid #93c5fd;
+          }
+        </style>
     </head>
-    <body class="py-10 px-5">
+    <body class="">
+        <div class="nav">
+          <a title="UTA Vehicle Tracker" href="https://uta.clb.li">🚆</a>
+          <a title="TRAXcidents" href="https://traxcidents.clb.li" class="nav__item--selected">💥</a>
+          <a title="GreenBike Firehose" href="https://greenbike.clb.li">🚲</a>
+        </div>
+
+        <div class="py-10 px-5">
           <div
               class="max-w-96 bg-blue-950 text-white mx-auto rounded-lg p-8 space-y-4 mb-10"
           >
@@ -44,6 +74,7 @@
               <div class="text-sm basis-0 grow text-center" id="selected-date"></div>
               <div class="text-gray-400 text-sm basis-0 grow text-end">Today</div>
           </div>
+        </div>
 
         <script>
             for (const bar of document.querySelectorAll("[data-date]")) {