From e37c39548d5cea161a69312f8341e199e2615222 Mon Sep 17 00:00:00 2001
From: arDTDev <tindevil82@gmail.com>
Date: Sun, 21 Dec 2025 22:13:10 +0900
Subject: [PATCH] Refactor layout for mobile responsiveness: Sidebar becomes
 Topbar on mobile

---
 App.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/App.tsx b/App.tsx
index 102e0cb..636bf84 100644
--- a/App.tsx
+++ b/App.tsx
@@ -126,21 +126,21 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="flex h-screen w-full bg-gray-50 text-gray-900 overflow-hidden">
+    <div className="flex flex-col lg:flex-row h-screen w-full bg-gray-50 text-gray-900 overflow-hidden">
 
-      {/* Sidebar */}
-      <div className="w-20 lg:w-64 flex-shrink-0 bg-white border-r border-gray-200 flex flex-col z-20">
-        <div className="p-6 flex items-center justify-center lg:justify-start">
-          <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold shadow-lg shadow-blue-900/50">
+      {/* Sidebar / Topbar */}
+      <div className="w-full lg:w-64 flex-shrink-0 bg-white border-b lg:border-b-0 lg:border-r border-gray-200 flex flex-row lg:flex-col z-20 items-center lg:items-stretch justify-between lg:justify-start h-16 lg:h-auto px-4 lg:px-0">
+        <div className="flex items-center justify-center lg:justify-start lg:p-6">
+          <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold shadow-lg shadow-blue-900/50 text-white">
             J
           </div>
           <span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-800">JBD Tool</span>
         </div>
 
-        <nav className="flex-1 px-4 space-y-2 mt-4">
+        <nav className="flex lg:flex-1 flex-row lg:flex-col gap-2 lg:space-y-2 lg:mt-4 lg:px-4">
           <button
             onClick={() => setActiveTab('dashboard')}
-            className={`w-full flex items-center p-3 rounded-xl transition-all ${activeTab === 'dashboard'
+            className={`flex items-center p-2 lg:p-3 rounded-xl transition-all ${activeTab === 'dashboard'
               ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
               : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
               }`}
@@ -150,7 +150,7 @@ const App: React.FC = () => {
           </button>
           <button
             onClick={() => setActiveTab('settings')}
-            className={`w-full flex items-center p-3 rounded-xl transition-all ${activeTab === 'settings'
+            className={`flex items-center p-2 lg:p-3 rounded-xl transition-all ${activeTab === 'settings'
               ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
               : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
               }`}
@@ -159,6 +159,10 @@ const App: React.FC = () => {
             <span className="ml-3 hidden lg:block font-medium">EEPROM</span>
           </button>
         </nav>
+
+        <div className="hidden lg:flex p-4 border-t border-gray-200 flex-1 flex-col justify-end">
+          {/* AdSense Area - Expanded */}
+        </div>
       </div>
 
       {/* Main Content Area */}