..

App.tsx

@@ -8,7 +8,7 @@ import { QuickTestPanel } from './components/QuickTestPanel';
 import { ConnectionStatus, TagData, ReaderCommand, FrequencyBand, MemoryBank, LogEntry, SerialPort, ReaderInfo, QuickTestConfig } from './types';
 import { RfidProtocol } from './services/rfidService';
 import { calculateCRC16, bytesToHexString, hexStringToBytes, hexToAscii, asciiToHex } from './utils/crc16';
-import { Terminal, Settings, LayoutDashboard, Database, Zap, ChevronUp, ChevronDown } from 'lucide-react';
+import { Terminal, Settings, LayoutDashboard, Database, Zap, ChevronUp, ChevronDown, Wifi, WifiOff } from 'lucide-react';
 
 const App: React.FC = () => {
   // Serial State
@@ -622,7 +622,7 @@ const App: React.FC = () => {
   return (
     <div className="flex h-screen bg-slate-100">
       {/* Sidebar */}
-      <div className="w-64 bg-white border-r border-slate-200 flex flex-col z-10">
+      <div className="hidden md:flex w-64 bg-white border-r border-slate-200 flex-col z-10">
         <div className="p-6 border-b border-slate-100">
           <h1 className="text-xl font-bold text-slate-800 flex items-center gap-2">
             <Database className="text-blue-600" />
@@ -634,32 +634,28 @@ const App: React.FC = () => {
         <div className="p-4 space-y-2 flex-1">
           <button
             onClick={() => setActiveTab('quicktest')}
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
-              activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
               }`}
           >
             <Zap className="w-5 h-5" /> Quick Test
           </button>
           <button
             onClick={() => setActiveTab('inventory')}
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
-              activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
               }`}
           >
             <LayoutDashboard className="w-5 h-5" /> Inventory
           </button>
           <button
             onClick={() => setActiveTab('memory')}
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
-              activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
               }`}
           >
             <Database className="w-5 h-5" /> Read / Write
           </button>
           <button
             onClick={() => setActiveTab('settings')}
-            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
-              activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
               }`}
           >
             <Settings className="w-5 h-5" /> Settings
@@ -681,6 +677,61 @@ const App: React.FC = () => {
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden relative">
+        {/* Mobile Top Navigation Bar */}
+        <div className="md:hidden bg-white border-b border-slate-200 p-2 flex items-center justify-between shrink-0 overflow-x-auto">
+          <div className="flex items-center gap-3 pr-4 border-r border-slate-100 mr-2 shrink-0">
+            <div className="flex items-center gap-1">
+              <Database className="text-blue-600 w-5 h-5" />
+              <span className="font-bold text-slate-800 text-sm">UHF</span>
+            </div>
+
+            {/* Connection Status Indicator */}
+            <button
+              onClick={() => setActiveTab('settings')}
+              className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${status === ConnectionStatus.CONNECTED
+                  ? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
+                  : 'bg-red-50 text-red-600 border border-red-100 animate-pulse'
+                }`}
+            >
+              {status === ConnectionStatus.CONNECTED ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
+              <span>{status === ConnectionStatus.CONNECTED ? 'On' : 'Connect'}</span>
+            </button>
+          </div>
+          <div className="flex items-center gap-1 flex-1 justify-around">
+            <button
+              onClick={() => setActiveTab('quicktest')}
+              className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
+                }`}
+            >
+              <Zap className="w-5 h-5" />
+              <span className="text-[10px] font-medium leading-none">Quick</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('inventory')}
+              className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+                }`}
+            >
+              <LayoutDashboard className="w-5 h-5" />
+              <span className="text-[10px] font-medium leading-none">Inv.</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('memory')}
+              className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+                }`}
+            >
+              <Database className="w-5 h-5" />
+              <span className="text-[10px] font-medium leading-none">R/W</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('settings')}
+              className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
+                }`}
+            >
+              <Settings className="w-5 h-5" />
+              <span className="text-[10px] font-medium leading-none">Set</span>
+            </button>
+          </div>
+        </div>
         <main className="flex-1 p-6 overflow-auto">
           {activeTab === 'inventory' && (
             <InventoryPanel
@@ -747,8 +798,7 @@ const App: React.FC = () => {
             {logs.map(log => (
               <div key={log.id} className="flex gap-2">
                 <span className="text-slate-400">[{log.timestamp.toLocaleTimeString()}]</span>
-                <span className={`font-bold ${
-                  log.type === 'TX' ? 'text-blue-600' :
+                <span className={`font-bold ${log.type === 'TX' ? 'text-blue-600' :
                   log.type.includes('RX') ? 'text-emerald-600' :
                     log.type === 'ERROR' ? 'text-red-600' :
                       log.type === 'WARN' ? 'text-amber-600' : 'text-slate-700'