HTML 代码
<div class="flex h-screen bg-stone-100 dark:bg-stone-900">
<!-- Sidebar -->
<div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
<!-- Profile Section -->
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div>
<h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
<p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
</div>
</div>
<hr class="border-stone-900 dark:border-stone-100">
<!-- Navigation -->
<nav class="space-y-4">
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
</nav>
<hr class="border-stone-900 dark:border-stone-100">
<!-- Footer Links -->
<div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
<a href="#" class="hover:underline focus:underline">About</a>
<a href="#" class="hover:underline focus:underline">Help</a>
<a href="#" class="hover:underline focus:underline">Terms</a>
<a href="#" class="hover:underline focus:underline">Privacy</a>
</div>
</div>
<!-- Content Area - Example -->
<div class="flex-1 p-6">
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
</div>
</div>