Home
Michael Andreuzza
Sidebar with Tailwind CSs and alpinejs

Sidebar with Tailwind CSs and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is drawer

Header Sidebar

Author Michael Andreuzza

3.2k

Fork Fullscreen

<div class="bg-white">
 
 <div x-data="{ open: false }" @keydown.window.escape="open = false">
  
  <div x-show="open" class="relative z-50" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." x-ref="dialog" aria-modal="true" style="display: none;">
   
   <div x-show="open" class="fixed inset-0 bg-teal-900/50" x-description="Off-canvas menu backdrop, show/hide based on off-canvas menu state." style="display: none;"></div>
   
   <div class="fixed inset-0 flex">
    <div x-show="open" x-description="Off-canvas menu, show/hide based on off-canvas menu state." class="relative mr-16 flex w-full max-w-lg flex-1" @click.away="open = false" style="display: none;">
     
     <div x-show="open" x-description="Close button, show/hide based on off-canvas menu state." class="absolute left-full top-0 flex w-16 justify-center pt-5" style="display: none;">
       <button type="button" class="-m-2.5 p-2.5" @click="open = false">
        <span class="sr-only">Close sidebar</span> 
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
      </button>
     </div>
     <!--
                // Navigation list within the sidebar
                // Styling for the navigation container
                // Styling for navigation links
                // Dynamically generate menu items

-->
     <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-black px-6 pb-2">
      <nav class="flex flex-1 flex-col pt-6">
       <ul role="list" class="flex flex-1 flex-col justify-center gap-y-7 text-3xl text-white uppercase lg:text-6xl">
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Work</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Stack</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Store</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ News</a> </li>
        <li> <a class="hover:text-[#1f57ef]" href="#">⏤ Blog</a> </li>
       </ul>
      </nav>
     </div>
    </div>
   </div>
  </div>
  
  <div class="sticky top-0 z-40 flex justify-start gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-10">
    <button type="button" class="-m-2.5 p-2.5 text-neutral-700" @click="open = true">
     <span class="sr-only">Open sidebar</span>  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
    </svg>
   </button>
   Lexington
  </div> 
  <main class="py-4 px-10 h-screen">
   
   <p class="text-xl  z-20 top-10 left-10 text-black uppercase">
    Your content goes here
   </p> 
   <div class="grid grid-cols-3 gap-2 h-full rounded-3xl overflow-hidden">
     <img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png"><img class="w-full h-full object-cover" src="https://tutorials.lexingtonthemes.com/images/gradient.png">
   </div>
  </main> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create a responsive sidebar with Astro, Tailwind CSS, and Alpine.js
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-sidebar-navigation-with-tailwindcss-and-alpine-js/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/pricing-table/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</div>

Resources1× 0.5× 0.25×Rerun

Related Examples