theming and structure

components/Navbar.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import { useSession, signOut } from "next-auth/react";
+import { UserIcon } from "./icons/UserIcon";
+import Link from "next/link";
 
 export default function Navbar() {
     const { data: session, status } = useSession();
@@ -9,9 +11,20 @@ export default function Navbar() {
     if (!session?.user) return null
     
     return (
-        <nav className="flex justify-between items-center p-4 bg-gray-100 border-b">
-            <div className="font-semibold">Wedding Planner</div>
-            <div className="flex items-center space-x-4">
+        <nav className="flex justify-between items-center p-4 bg-background border-b">
+            <div className="flex items-center space-x-2">
+                <div className="font-semibold">Wedding Planner</div>
+                {session.user && (
+                    <Link
+                        href={'/dashboard'}
+                    >
+                        Dashboard
+                    </Link>
+                )}
+            </div>
+            
+            <div className="flex items-center space-x-2">
+                <UserIcon />
                 <span className="text-sm text-gray-600">
                     {session.user.email} ({session.user.role})
                 </span>

components/icons/UserIcon.tsx

@@ -0,0 +1,7 @@
+export const UserIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clipRule="evenodd" />
+        </svg>
+    )
+}