<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex"> <aside class="bg-white w-64 p-4 border-r transition-transform duration-300 ease-in-out" id="sidebar"> <div class="flex justify-between items-center mb-6"> <h1 class="text-2xl font-bold text-center">Dashboard</h1> <button id="toggle-button" class="text-gray-700 hover:text-gray-900"> <i class="iconoir-arrow-left text-xl"></i> </button> </div> <nav> <ul> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-200 rounded"> <i class="iconoir-home text-xl"></i> <span class="ml-2">Home</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-200 rounded"> <i class="iconoir-cart text-xl"></i> <span class="ml-2">Products</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-200 rounded"> <i class="iconoir-receipt text-xl"></i> <span class="ml-2">Orders</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-200 rounded"> <i class="iconoir-users text-xl"></i> <span class="ml-2">Customers</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-200 rounded"> <i class="iconoir-settings text-xl"></i> <span class="ml-2">Settings</span> </a> </li> </ul> </nav> </aside> <main class="flex-1 p-6"> <h2 class="text-2xl font-bold mb-4">Recent Orders</h2> <div class="overflow-x-auto"> <table class="min-w-full bg-white border border-gray-300"> <thead> <tr> <th class="py-2 px-4 border-b">Order ID</th> <th class="py-2 px-4 border-b">Customer</th> <th class="py-2 px-4 border-b">Date</th> <th class="py-2 px-4 border-b">Total</th> <th class="py-2 px-4 border-b">Status</th> </tr> </thead> <tbody> <tr> <td class="py-2 px-4 border-b">#1001</td> <td class="py-2 px-4 border-b">John Doe</td> <td class="py-2 px-4 border-b">2023-10-01</td> <td class="py-2 px-4 border-b">$150.00</td> <td class="py-2 px-4 border-b text-green-500">Completed</td> </tr> <tr> <td class="py-2 px-4 border-b">#1002</td> <td class="py-2 px-4 border-b">Jane Smith</td> <td class="py-2 px-4 border-b">2023-10-02</td> <td class="py-2 px-4 border-b">$200.00</td> <td class="py-2 px-4 border-b text-yellow-500">Pending</td> </tr> <tr> <td class="py-2 px-4 border-b">#1003</td> <td class="py-2 px-4 border-b">Alice Johnson</td> <td class="py-2 px-4 border-b">2023-10-03</td> <td class="py-2 px-4 border-b">$300.00</td> <td class="py-2 px-4 border-b text-red-500">Cancelled</td> </tr> <tr> <td class="py-2 px-4 border-b">#1004</td> <td class="py-2 px-4 border-b">Bob Brown</td> <td class="py-2 px-4 border-b">2023-10-04</td> <td class="py-2 px-4 border-b">$250.00</td> <td class="py-2 px-4 border-b text-green-500">Completed</td> </tr> </tbody> </table> </div> </main> <script> const toggleButton = document.getElementById('toggle-button'); const sidebar = document.getElementById('sidebar'); toggleButton.addEventListener('click', () => { sidebar.classList.toggle('transform'); sidebar.classList.toggle('-translate-x-full'); toggleButton.innerHTML = sidebar.classList.contains('-translate-x-full') ? '<i class="iconoir-arrow-right text-xl"></i>' : '<i class="iconoir-arrow-left text-xl"></i>'; }); </script> </body>
v
v
v