Brutalism Sidebar Navigation

<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">
    <div class="flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
      <!-- Mobile toggle (hidden on md and up) -->
      <button class="text-stone-800 dark:text-stone-200 md:hidden">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
    <nav class="text-stone-700 dark:text-stone-300">
      <ul class="space-y-4">
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
        <li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
      </ul>
    </nav>
  </div>
  
  <!-- Content area -->
  <div class="flex-1 p-10 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
    <p class="text-stone-700 dark:text-stone-300">
      This is the main content area. The sidebar is on the left.
    </p>
    <!-- Example content -->
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
        <img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
       <div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
         <img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
        <p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>