nav bar

slidr-app · Jun 7, 2023 · 4d4bd67 · 4d4bd67
1 parent 8d390ac
commit 4d4bd67
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -5,7 +5,8 @@ import {
   useEffect,
   useState,
 } from 'react';
-import {Link} from 'react-router-dom';
+import {Link, NavLink} from 'react-router-dom';
+import clsx from 'clsx';
 import {auth} from '../firebase';
 
 export default function DefaultLayout({
@@ -21,6 +22,29 @@ export default function DefaultLayout({
   return (
     <div className="flex flex-col">
       <div className="header grid grid-cols-[1fr_2fr_1fr] mx-4 px-4 mb-6">
+        <div className="flex flex-row justify-start items-center relative gap-4">
+          <div className="overflow-hidden flex flex-col justify-center pb-1">
+            <NavLink
+              end
+              className={({isActive}) =>
+                clsx('hover:nav-active bg-black', isActive && 'nav-active')
+              }
+              to="/"
+            >
+              Slidr
+            </NavLink>
+          </div>
+          <div className="overflow-hidden flex flex-col justify-center pb-1">
+            <NavLink
+              className={({isActive}) =>
+                clsx('hover:nav-active bg-black', isActive && 'nav-active')
+              }
+              to="/upload"
+            >
+              upload
+            </NavLink>
+          </div>
+        </div>
         <div className="col-start-2 text-3xl flex flex-row items-center justify-center">
           <div>{title}</div>
         </div>

diff --git a/src/main.tsx b/src/main.tsx
@@ -24,7 +24,7 @@ const router = createBrowserRouter([
       <DefaultLayout
         title={
           <>
-            Present!
+            Browse Presentations
             <div className="i-tabler-microphone-2 ml-2" />
           </>
         }

diff --git a/uno.config.ts b/uno.config.ts
@@ -48,6 +48,7 @@ export default defineConfig({
       'p-2 shadow-primary border-primary bg-gray-200 text-black focus-visible:(border-focus outline-focus shadow-focus)',
     header:
       'text-2xl border-primary border-t-none rounded-t-none shadow-primary text-center py-2 font-semibold',
+    'nav-active': 'border-b-2 border-teal shadow-md shadow-teal-800',
   },
   // https://github.com/unocss/unocss/discussions/2012
   theme: {