Redesign navbar

Author: the-snesler

public/wordmark.png

@@ -14,7 +14,7 @@ const PublishAdmin = lazy(() => import('@/pages/PublishAdmin'))
 
 function Layout() {
   return (
-    <div className="relative h-screen max-h-screen pt-5">
+    <div className="relative h-screen max-h-screen pt-12">
       <Navigation />
       <Outlet />
       <DBLoadingOverlay />
@@ -73,9 +73,9 @@ const App: React.FC = () => {
   return (
     <Router>
       <Routes>
-        <Route path="/login" element={<LoginPage />} />
         <Route path="/" element={<Layout />}>
           <Route path="/" element={<Map />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route path="/stats" element={<StatsPage />} />
           <Route path="/about" element={<AdminAbout />} />
           <Route path="/admin" element={<Navigate to="/login" />} />

src/App.tsx

@@ -1,38 +1,66 @@
 import { useDB } from '@/context/DBContext'
 import { signOut } from 'firebase/auth'
 import { Link, useLocation } from 'react-router'
+import React from 'react'
+import { LucideBarChart3, LucideExternalLink, LucideMap, LucideUser } from 'lucide-react'
 
 const Navigation = () => {
   const { isLoggedIn, auth } = useDB()
   const { pathname } = useLocation()
-  const NavLink = ({ to, text }: { to: string; text: string }) => (
-    <Link to={to} className={`px-2 py-1 hover:bg-black/10 ${pathname === to && 'font-bold'}`}>
+  const ExternalLink = ({ href, text }: { href: string; text: string }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-1 rounded-full border px-3 py-1.5 text-black/80 transition hover:border-gray-400 hover:bg-gray-200 hover:text-black"
+    >
+      {text}
+      <LucideExternalLink height={12} width={12} />
+    </a>
+  )
+
+  const NavLink = ({ to, icon, text }: { to: string; icon?: React.ReactNode; text: string }) => (
+    <Link
+      to={to}
+      className={`flex items-center gap-1 rounded-full border px-3 py-1.5 transition ${pathname === to ? 'border-blue-600 bg-blue-100 text-blue-600 shadow-md' : 'text-black/80 hover:border-gray-400 hover:bg-gray-200 hover:text-black'}`}
+    >
+      {icon}
       {text}
     </Link>
   )
   return (
-    <div className="absolute top-0 z-[1000] flex h-5 w-full items-center gap-1 overflow-x-auto overflow-y-hidden border-b-2 border-gray-400 bg-white px-2 text-xs leading-none">
-      <NavLink to="/" text="Mapa" />
-      <NavLink to="/stats" text="Estadísticas" />
+    <div className="absolute top-0 z-[1000] flex h-12 w-full items-center gap-1 overflow-x-auto overflow-y-hidden border-b-2 border-gray-400 bg-white px-2 text-xs leading-none">
+      <Link to="/">
+        <img src="/wordmark.png" alt="Red Coral" className="h-6 w-auto pr-4" />
+      </Link>
+      <NavLink to="/" text="Mapa" icon={<LucideMap height={16} width={16} />} />
+      <NavLink to="/stats" text="Estadísticas" icon={<LucideBarChart3 height={16} width={16} />} />
       {isLoggedIn && (
         <>
-          <div className="h-3 border-l-2 border-gray-400" />
+          <div className="mx-3 h-3 border-l-2 border-gray-400" />
           <NavLink to="/admin/dash" text="Administrar categorías" />
           <NavLink to="/admin/publish" text="Publicar Datos" />
           <NavLink to="/admin/analytics" text="Analítica web" />
         </>
       )}
       <div className="flex-grow" />
+      <ExternalLink href="https://redcoralmap.org/guia-metodologia" text="Guía de Metodología" />
       {isLoggedIn ? (
         <>
           <NavLink to="/about" text="Acerca de" />
-          <button onClick={() => signOut(auth)} className="inline px-2 py-1 hover:bg-black/10">
+          <button
+            onClick={() => signOut(auth)}
+            className="flex items-center gap-1 rounded-full border px-3 py-1.5 text-black/80 transition hover:border-red-400 hover:bg-red-200 hover:text-red-600"
+          >
+            <LucideUser height={16} width={16} />
+            {/* TODO: probably have a whole user menu here */}
             Salir
           </button>
         </>
       ) : (
-        // <NavLink to="/login" text="Registrarse" />
-        <a href="https://redcoralmap.org/guia-metodologia">Guía de Metodología</a>
+        <>
+          <NavLink to="/login" text="Registrarse" icon={<LucideUser height={16} width={16} />} />
+        </>
       )}
     </div>
   )