Brutalism Sidebar Navigation

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>