Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

<div class="flex h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-950 font-sans">

  <!-- Mobile Toggle (hidden on desktop) -->
  <input type="checkbox" id="menu-toggle" class="hidden peer/menu" />
  <label for="menu-toggle" class="absolute top-4 left-4 z-40 p-2 rounded-lg bg-stone-300 text-stone-700 md:hidden cursor-pointer dark:bg-stone-700 dark:text-stone-300 transition-colors duration-300">
    <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 12h16m-7 6h7"></path></svg>
  </label>

  <!-- Sidebar -->
  <aside class="fixed top-0 left-0 h-full w-64 p-4 z-30 transform -translate-x-full md:relative md:translate-x-0 transition-transform duration-500 ease-in-out bg-stone-200 dark:bg-stone-800 border-r border-stone-300 dark:border-stone-700 peer-checked/menu:translate-x-0 overflow-y-auto shadow-lg md:rounded-tr-lg md:rounded-br-lg md:shadow-xl">
    <div class="flex items-center mb-8 justify-center lg:justify-start">
      <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center text-white text-2xl font-bold mr-3 shadow-md">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
      </div>
      <span class="text-2xl font-semibold text-stone-800 dark:text-stone-100 hidden lg:block">MedFlow</span>
    </div>

    <nav class="space-y-3">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
        <span class="font-medium">Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3z"></path></svg>
        <span class="font-medium">Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 19c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7 19c-1.1 0-1.99.9-1.99 2S5.9 23 7 23s2-.9 2-2-.9-2-2-2zm8-14H7V3H5v2H3l.01 14H5c0 1.1.9 2 2 2s2-.9 2-2h6c1.1 0 2 .9 2 2s.9 2 2 2 2-.9 2-2h2v-4.5c0-.85-.34-1.66-.99-2.25L17 9V5h-2z"></path></svg>
        <span class="font-medium">Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 14v-2h-6V4h-2v8H5v2h6v6h2v-6h6z"></path></svg>
        <span class="font-medium">Procedures</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2s-2 .9-2 2v6c0 1.1.9 2 2 2zM18 10v1c0 2.21-1.79 4-4 4h-4c-2.21 0-4-1.79-4-4v-1h2v1c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-1h2V7h-2V5c0-1.1-.9-2-2-2s-2 .9-2 2v2H8V5c0-.55-.45-1-1-1s-1 .45-1 1v2H4V4c0-1.1-.9-2-2-2S0 3 0 4v9c0 3.31 2.69 6 6 6h2v-2h4v2h2v-2h2v2h2c3.31 0 6-2.69 6-6V7h-2v3h-2z"></path></svg>
        <span class="font-medium">Billing</span>
      </a>
      <div class="border-t border-stone-300 dark:border-stone-700 my-4"></div>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"></path></svg>
        <span class="font-medium">Pharmacy</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
        <span class="font-medium">Information</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12h-1V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v8H5c-1.66 0-3 1.34-3 3v2c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-2c0-1.66-1.34-3-3-3zm-3 0H8V4h8v8zm-2 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>

    <!-- User Profile or Logout -->
    <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-center lg:justify-start">
      <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-500 dark:border-amber-400 object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="hidden lg:block">
        <p class="text-stone-800 dark:text-stone-100 font-semibold text-sm">Dr. John Doe</p>
        <p class="text-stone-600 dark:text-stone-400 text-xs">Physician</p>
      </div>
      <a href="#" class="ml-auto p-2 rounded-full text-stone-600 hover:bg-stone-300 dark:text-stone-400 dark:hover:bg-stone-700 transition-colors duration-200 hidden md:block" aria-label="Sign out"> 
        <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-10a3 3 0 013-3h5a3 3 0 013 3v1"></path></svg>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration) -->
  <main class="flex-1 p-6 md:p-8 overflow-auto dark:text-stone-200">
    <h1 class="text-3xl font-semibold mb-6 text-stone-800 dark:text-stone-100">Welcome to Dashboard</h1>
    <p class="text-stone-700 dark:text-stone-300 mb-4">This is the main content area. You can place your application's primary content here. The sidebar is designed to provide seamless navigation.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Latest Patients</h2>
        <p class="text-stone-600 dark:text-stone-300">View recent patient registrations and updates.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Appointment Schedule</h2>
        <p class="text-stone-600 dark:text-stone-300">Manage today's and upcoming appointments.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Medical Records</h2>
        <p class="text-stone-600 dark:text-stone-300">Access and update patient medical histories.</p>
      </div>
    </div>
    <div class="mt-8">
      <img src="https://picsum.photos/800/400?grayscale&blur=2" alt="Organic medical illustration" class="rounded-lg shadow-lg w-full object-cover max-h-64">
    </div>
  </main>
</div>