Neumorphic_Sidebar_Component

<div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <aside class="flex flex-col w-64 bg-gray-100 dark:bg-gray-800 shadow-xl rounded-2xl m-4 p-4 transition-all duration-300 ease-in-out
                lg:w-72 xl:w-80
                sm:m-2 sm:rounded-xl sm:p-3
                fixed inset-y-0 left-0 transform -translate-x-full lg:static lg:translate-x-0
                peer-checked:translate-x-0 z-50
                dark:shadow-none dark:border dark:border-gray-700
                " id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-center h-16 mb-6 p-4 rounded-xl
                bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg
                dark:from-blue-700 dark:to-indigo-800 dark:shadow-xl">
      <h1 class="text-2xl font-bold text-white">Company Name</h1>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-1">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium
                      shadow-md hover:shadow-lg
                      dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:shadow-none dark:border dark:border-gray-600">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h3v-3m0 0h3m-3 3h3m-3 0v3m-3-3v3m-3-3h3v-3m-3 3v3m-3-3h3m-3 0v3"></path>
            </svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-green-600 dark:text-green-400" 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
              </path>
            </svg>
            Analytics
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5-3.5a3 3 0 11-6 0 3 3 0 016 0zm-3-8a3 3 0 11-6 0 3 3 0 016 0z">
              </path>
            </svg>
            Customers
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-red-600 dark:text-red-400" 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="M8 7V3m8 4V3m-9 8h8m-11 5h12M17 19H7a2 2 0 01-2-2V5a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2z">
              </path>
            </svg>
            Reports
          </a>
        </li>
      </ul>
    </nav>

    <!-- Dark Mode Toggle -->
    <div class="mt-8">
      <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer p-2 rounded-xl
                  bg-gray-100 shadow-inner
                  hover:shadow-md transition-all duration-300 ease-in-out
                  dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none">
        <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
        <div class="flex items-center justify-between w-full">
          <span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Dark Mode:</span>
          <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-700 peer-checked:bg-blue-600">
          </div>
        </div>
      </label>
    </div>

    <!-- User Profile -->
    <div class="mt-auto p-4 rounded-xl
                bg-gray-200 shadow-md
                dark:bg-gray-700 dark:shadow-inner dark:border dark:border-gray-600">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-blue-500 dark:border-blue-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">CEO, Company</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Overlay for small screens -->
  <label for="sidebar-toggle" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden peer-checked:block lg:hidden" aria-hidden="true"></label>

  <!-- Content Area (for demonstration, can be removed) -->
  <main class="flex-1 p-8 lg:ml-68 sm:ml-0 transition-all duration-300">
    <!-- Hidden checkbox for toggling sidebar on small screens -->
    <input type="checkbox" id="sidebar-toggle" class="hidden peer">

    <!-- Hamburger Icon for small screens -->
    <label for="sidebar-toggle" class="lg:hidden cursor-pointer absolute top-4 left-4 z-50 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md transform transition-all duration-300 ease-in-out">
      <svg class="w-8 h-8 text-gray-700 dark:text-gray-200" 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>
    </label>

    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 mt-16 lg:mt-0">Main Content Area</h2>
    <p class="text-gray-700 dark:text-gray-300">This is where your main content will go. The sidebar is designed to be responsive and work across various screen sizes.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
    </div>
  </main>
</div>