Update Navigation.tsx

src/components/organisms/Navigation.tsx

@@ -1,9 +1,47 @@
-import React from 'react';
+"use client";
 
-const Navigation = () => {
+import React from "react";
+
+interface NavigationProps {
+  user?: {
+    name?: string;
+    avatarUrl?: string;
+  };
+}
+
+const Navigation: React.FC<NavigationProps> = ({ user }) => {
   return (
-    <nav>
-      <p>Navigation component placeholder</p>
+    <nav className="flex flex-col gap-4 p-4 border-r border-gray-200 min-h-screen w-60">
+      {/* Navigation links */}
+      <ul className="list-none p-0 m-0 flex flex-col gap-2">
+        <li>
+          <a href="/dashboard" className="text-sm font-medium hover:underline">
+            Dashboard
+          </a>
+        </li>
+        <li>
+          <a href="/editor" className="text-sm font-medium hover:underline">
+            Editor
+          </a>
+        </li>
+        <li>
+          <a href="/settings" className="text-sm font-medium hover:underline">
+            Settings
+          </a>
+        </li>
+      </ul>
+
+      {/* User info if passed */}
+      {user && (
+        <div className="mt-auto flex items-center gap-2 pt-4">
+          <img
+            src={user.avatarUrl || "/default-avatar.png"}
+            alt={user.name || "User"}
+            className="h-10 w-10 rounded-full object-cover"
+          />
+          <span className="text-sm font-medium">{user.name || "Anonymous"}</span>
+        </div>
+      )}
     </nav>
   );
 };