First crack at mobile-friendly subnav

jsr-io · Feb 28, 2024 · 01a18e7 · 01a18e7
1 parent 329de22
commit 01a18e7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git 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
@@ -210,4 +210,4 @@ body .ddoc .usage nav label {
     --base-text-weight-semibold: 500;
     --bgColor-muted: theme(colors.slate.50);
   }
-}
+}