image

Responsive Side Menu

A mobile friendly sidebar navbar for your next project.

Responsive mobile sidebar menu

HTML + Tailwind
<body class="font-main">

  <div class="hidden md:block main-navbar bg-theme-black h-screen md:h-auto text-gray-100 py-6 md:py-0 fixed md:static w-full left-0 top-0">
    <div class="container mx-auto px-5 lg:px-0">
      <div class="select-none flex flex-col md:flex-row justify-between md:items-center">
        <div class="select-none logo font-black text-2xl select-none cursor-pointer w-full text-center md:text-left relative">
          <span id="closeButton" class="inline-block md:hidden select-none rotate-45 absolute left-5 -top-3 font-thin text-6xl">+</span>
          <span class="selecet-none">PANTONE</span>
        </div>
        <div class="navbar order-1 md:order-0">
          <ul class="flex flex-col md:flex-row md:items-center md:space-x-2">
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <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-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
              </span>
              <span>Home</span>
            </a></li>
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
              </span>
              <span>Shop</span>
            </a></li>
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
              </span>
              <span>Learn</span>
            </a></li>
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                </svg>
              </span>
              <span>Consult</span>
            </a></li>
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                </svg>
              </span>
              <span>License</span>
            </a></li>
            <li><a href="#" class="block font-medium text-gray-200 p-3 hover:bg-black hover:bg-opacity-25 transition-all duration-200 flex md:inline-block items-center space-x-2 md:space-x-0">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </span>
              <span>Setting</span>
            </a></li>
          </ul>
        </div>
        <div class="flex md:hidden lg:flex items-center space-x-3 p-[8px] cursor-pointer group order-0 md:order-1 mt-8 md:mt-0">
          <div class="group flex flex-col md:flex-row md:items-center space-y-3 md:space-y-0 relative">
            <div class="order-1 md:order-0 flex flex-col md:flex-row md:items-center w-full md:space-x-2 mt-8 md:mt-0 mr-2">
              <span class="block md:hidden font-thin md:px-5 lg:px-0">Hello,</span>
              <span class="block pr-2 whitespace-nowrap">Aamir Rehman</span>
            </div>
            <img src="./images/user.jpeg" class="order-0 md:order-1 w-16 md:w-8 rounded-full block" alt="user image">
            <ul class="hidden lg:group-hover:block z-10 md:group-hover:block whitespace-nowrap links md:absolute md:bg-white md:text-gray-900 md:top-[40px] md:right-0 md:border border-t-0 border-gray-300 rounded-b">
              <li> <a href="$" class="px-8 py-3 block hover:bg-gray-100">Profile</a> </li>
              <li> <a href="$" class="px-8 py-3 block hover:bg-gray-100">Sign Out</a> </li>
            </ul>
          </div>
        </div>
        <div class="order-2">
          <a href="#" class="p-3 block md:hidden hover:bg-black hover:bg-opacity-25 flex md:inline-block items-center space-x-2 md:space-x-0">
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
              </svg>
            </span>
            <span>Logout</span>
          </a>
      </div>
      </div>
    </div>
  </div>

  <!-- fixed w-full h-screen overflow-y-hidden top-10 left-72 bg-white pl-8 pt-16 rounded-[30px] border -rotate-6 -->

  <div id="siteWrapper" class="site-wrapper pt-5 lg:mt-8">

    <div class="mobile-navbar-header block md:hidden">
      <div class="container mx-auto px-5 lg:px-0  flex items-center justify-between">
        <button id="burgerButton" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <span class="selecet-none font-black text-gray-800 text-2xl cursor-pointer">PANTONE</span>
        <button id="searchButton" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 block md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </button>
      </div>
    </div>
    <!-- mobile nav header -->


  <div class="container mt-5 mx-auto px-5 lg:px-0">
      <div class="page-title text-3xl font-medium mb-5">
        <h1>Products</h1>
      </div>
      <!-- product-title -->

      <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-64">

        <div class="product border rounded">
          <div class="product-image h-96 bg-yellow-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-red-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->


        <div class="product border rounded">
          <div class="product-image h-96 bg-green-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-gray-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-blue-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-yellow-500"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-green-200"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-purple-400"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-pink-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-indigo-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->


        <div class="product border rounded">
          <div class="product-image h-96 bg-yellow-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->


        <div class="product border rounded">
          <div class="product-image h-96 bg-red-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->


        <div class="product border rounded">
          <div class="product-image h-96 bg-green-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-gray-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-blue-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-yellow-500"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-green-200"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-purple-400"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-pink-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->

        <div class="product border rounded">
          <div class="product-image h-96 bg-indigo-300"></div>
          <!-- product image -->
          <div class="p-info p-3 space-y-px">
            <div class="p-highlight text-red-500 font-semibold">New</div>
            <div class="p-title font-semibold text-lg text-black">Table Lamp</div>
            <p class="p-description font-medium text-sm text-gray-700">
              culpa necessitatibus impedit tium
            </p>
            <div class="p-price flex items-start">
              <div class="block currency text-sm mr-1 font-semibold mt-1 text-gray-600">AED</div>
              <div class="block font-bold text-gray-900 price text-3xl">23</div>
            </div>
            <!-- product info -->
          </div>
          <!-- product-image -->
        </div>
        <!-- product -->


      </div>
      <!-- products -->
  </div>
  <!-- container -->
  </div>
  <!-- site-wrapper -->

  <script src="./js/script.js"></script>
</body>
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

.navbar-active-site-wrapper {
    animation: navbar-active 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: forwards;
    @apply fixed w-full h-screen overflow-y-hidden bg-white pl-4 rounded-[30px] border;
}

.navbar-deactive-site-wrapper {
    animation: navbar-deactive 0.5s;
    animation-fill-mode: forwards;
    @apply fixed w-full h-screen overflow-y-hidden bg-white;
}

.active-navbar-body {
    @apply overflow-y-hidden md:overflow-y-auto;
}

@keyframes navbar-active {
    0% {
        @apply left-10 top-0;
    }
    100% {
        @apply left-72 rotate-6 top-10;
        box-shadow: -30px 30px 5px rgba(255, 255, 255, 0.3);
    }
}

@keyframes navbar-deactive {
    0% {
        @apply left-72 rotate-6 top-10 rounded-[30px];
        box-shadow: -30px 30px 5px rgba(255, 255, 255, 0.3);
    }
    100% {
        @apply left-0 top-0 rounded-[0px];
    }
}
JavaScript
const burgerButton = document.getElementById("burgerButton");
const closeButton = document.getElementById("closeButton");
const searchButton = document.getElementById("searchButton");
const site = document.getElementById("siteWrapper");
const bodyTag = document.getElementsByTagName('body')[0];
const mobileNavbar = document.getElementsByClassName('main-navbar')[0];

burgerButton.addEventListener('click', function() {
    site.classList.remove('navbar-deactive-site-wrapper')
    site.classList.add('navbar-active-site-wrapper')
    bodyTag.classList.add('active-navbar-body')
    mobileNavbar.classList.remove('hidden')
});

closeButton.addEventListener('click', function() {
    site.classList.remove('navbar-active-site-wrapper')
    site.classList.add('navbar-deactive-site-wrapper')
    bodyTag.classList.remove('active-navbar-body')
    removeDeactiveClass()
});

function removeDeactiveClass () {
    setTimeout(() => {
        site.classList.remove('navbar-deactive-site-wrapper')
        mobileNavbar.classList.add('hidden')
    }, 500);
}
tailwind.config.js
module.exports = {
  mode: "jit",
  purge: [
    './index.html',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        "theme-black": '#272727',
        "theme-green-light": '#fbfefb',
      },
      height: {
        'screen-75': '90vh'
      },
      fontFamily: {
        'main': ['"Open Sans"']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Technologies


Features Menu , Mobile Friendly , Navbar , responsive
Type UI Components
Date Created September 12, 2021
Last Updated 11, Feb 2021
Licence MIT
envelope
Subscribe to our newsletter to receive weekly design freebies!

We want your email to send the free themes, templates, and beautiful UI components every week. you will be the first to hear about new uploads NO SPAM.

1 + 1 =
Answer to the quesiton to submit