From 33365affa2dfce4fe1709ebb767df17f4d0db899 Mon Sep 17 00:00:00 2001
From: Maulana Sodiqin <sodiqincahyana1@gmail.com>
Date: Wed, 26 Nov 2025 14:22:01 +0700
Subject: [PATCH] fix(hackathon): replace top navbar with sidebar on team and
 user detail pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update teams/[teamId]/layout.tsx to use Sidebar component
- Update users/[userId]/layout.tsx to use Sidebar component
- Now matches dashboard layout with sidebar navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/app/teams/[teamId]/layout.tsx         | 36 +++++++++++++------
 .../src/app/users/[userId]/layout.tsx         | 36 +++++++++++++------
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/apps/hackathon/src/app/teams/[teamId]/layout.tsx b/apps/hackathon/src/app/teams/[teamId]/layout.tsx
index b8cc70d..070436d 100644
--- a/apps/hackathon/src/app/teams/[teamId]/layout.tsx
+++ b/apps/hackathon/src/app/teams/[teamId]/layout.tsx
@@ -1,18 +1,34 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { Outlet } from 'react-router';
-import { Navigation } from '../../../components/navigation';
+import { Sidebar } from '../../../components/sidebar';
 
-interface TeamLayoutProps {
-  children?: ReactNode;
-}
+const TeamDetailLayout: FC = (): ReactElement => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
-export const TeamLayout: FC<TeamLayoutProps> = () => {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <Navigation />
-      <Outlet />
+    <div className="flex min-h-screen bg-gray-50">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col overflow-auto">
+        {/* Mobile Header with Hamburger */}
+        <div className="lg:hidden bg-white border-b px-4 py-3 flex items-center">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <h1 className="ml-3 text-lg font-bold text-gray-900">🏆 Hackathon</h1>
+        </div>
+
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
     </div>
   );
 };
 
-export default TeamLayout;
+export default TeamDetailLayout;
diff --git a/apps/hackathon/src/app/users/[userId]/layout.tsx b/apps/hackathon/src/app/users/[userId]/layout.tsx
index 5b0309d..6ffa5f1 100644
--- a/apps/hackathon/src/app/users/[userId]/layout.tsx
+++ b/apps/hackathon/src/app/users/[userId]/layout.tsx
@@ -1,18 +1,34 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { Outlet } from 'react-router';
-import { Navigation } from '../../../components/navigation';
+import { Sidebar } from '../../../components/sidebar';
 
-interface UserLayoutProps {
-  children?: ReactNode;
-}
+const UserDetailLayout: FC = (): ReactElement => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
-export const UserLayout: FC<UserLayoutProps> = () => {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <Navigation />
-      <Outlet />
+    <div className="flex min-h-screen bg-gray-50">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col overflow-auto">
+        {/* Mobile Header with Hamburger */}
+        <div className="lg:hidden bg-white border-b px-4 py-3 flex items-center">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <h1 className="ml-3 text-lg font-bold text-gray-900">🏆 Hackathon</h1>
+        </div>
+
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
     </div>
   );
 };
 
-export default UserLayout;
+export default UserDetailLayout;