GoogleAIBuilder/JBD_BMS_Tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor layout for mobile responsiveness: Sidebar becomes Topbar on mobile

Browse Source
This commit is contained in:
tindevil
2025-12-21 22:13:10 +09:00
parent 55b3bc0be4
commit e37c39548d
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
App.tsx
View File

@@ -126,21 +126,21 @@ const App: React.FC = () => {
}; };
return ( 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 */} {/* Sidebar / Topbar */}
<div className="w-20 lg:w-64 flex-shrink-0 bg-white border-r border-gray-200 flex flex-col z-20"> <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="p-6 flex items-center justify-center lg:justify-start"> <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"> <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 J
</div> </div>
<span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-800">JBD Tool</span> <span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-800">JBD Tool</span>
</div> </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 <button
onClick={() => setActiveTab('dashboard')} 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' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`} }`}
@@ -150,7 +150,7 @@ const App: React.FC = () => {
</button> </button>
<button <button
onClick={() => setActiveTab('settings')} 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' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : '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> <span className="ml-3 hidden lg:block font-medium">EEPROM</span>
</button> </button>
</nav> </nav>
<div className="hidden lg:flex p-4 border-t border-gray-200 flex-1 flex-col justify-end">
{/* AdSense Area - Expanded */}
</div>
</div> </div>
{/* Main Content Area */} {/* Main Content Area */}