From 01a18e7cd14cc7f9604c08a62898f8b06dd223e3 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Wed, 28 Feb 2024 11:45:28 -0600
Subject: [PATCH] First crack at mobile-friendly subnav

---
 frontend/components/Nav.tsx | 8 +++-----
 frontend/static/styles.css  | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx
index 7b7aab75..a7fa6cd3 100644
--- a/frontend/components/Nav.tsx
+++ b/frontend/components/Nav.tsx
@@ -7,7 +7,7 @@ export interface NavProps {
 
 export function Nav(props: NavProps) {
   return (
-    <nav class="mt-3 border-b border-jsr-cyan-300/30 flex gap-1 flex-col md:flex-row md:max-w-full md:overflow-auto">
+    <nav class="mt-3 border-b gap-1 border-jsr-cyan-300/30 flex flex-wrap md:flex-nowrap flex-row max-w-full overflow-auto items-end">
       {props.children}
     </nav>
   );
@@ -22,10 +22,8 @@ export interface NavItemProps {
 export function NavItem(props: NavItemProps) {
   return (
     <a
-      class={`md:px-4 px-2 py-2 text-sm md:text-base leading-none rounded-t-md md:hover:bg-jsr-cyan-100 md:hover:border-b-2 ${
-        props.active
-          ? "bg-jsr-cyan-200 md:bg-transparent border-b-2 border-jsr-cyan-700"
-          : "border-jsr-cyan-400"
+      class={`md:px-3 px-2 py-2 text-sm md:text-base min-h-10 leading-none rounded-none hover:bg-jsr-cyan-100 flex items-center ${
+        props.active ? "bg-jsr-cyan-100 font-semibold" : ""
       }`}
       href={props.href}
     >
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 2208573d..5b5a6e41 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -210,4 +210,4 @@ body .ddoc .usage nav label {
     --base-text-weight-semibold: 500;
     --bgColor-muted: theme(colors.slate.50);
   }
-}
\ No newline at end of file
+}