Enhance Mobile Navbar Hamburger Animation and Positioning

[Kaarthik-07]

Current Issue

Currently, when using the navbar in mobile view, the hamburger menu does not provide a smooth user experience. When the hamburger icon is clicked to open routes like Home, Docs, etc., the position of the hamburger icon changes, which can be disorienting for users. Additionally, as our website references Drip UI, it is important to ensure that small UI and UX changes are handled effectively. Improving the UX by adding animations to the hamburger menu when clicked will provide a more polished and intuitive experience.

Proposed Solution:
To improve the UI and UX of the mobile navbar, the following changes are suggested:

 1. Ensure the position of the hamburger menu remains consistent when clicked.
 2.Add smooth animations to the hamburger menu to enhance user experience.

Here is an example of how the mobile hamburger animation can be implemented:

"use client";
import { useState } from "react";
import Link from "next/link";

const MobileButton = () => {
  const [open, setOpen] = useState(false);

  return (
    <div className="md:hidden">
      <div
        className="flex flex-col gap-[4.5] cursor-pointer"
        onClick={() => setOpen((prev) => !prev)}
      >
        <div
          className={`w-6 h-1 bg-blue-500 rounded-sm ${
            open ? "rotate-45" : ""
          } origin-left ease-in-out duration-500`}
        />
        <div
          className={`w-6 h-1 bg-blue-500 rounded-sm ${
            open ? "opacity-0" : ""
          } ease-in-out duration-500`}
        />
        <div
          className={`w-6 h-1 bg-blue-500 rounded-sm ${
            open ? "-rotate-45" : ""
          } origin-left ease-in-out duration-500`}
        />
      </div>
      {open && (
        <div className="text-white absolute left-0 top-24 w-full h-[calc(100vh-96px)] bg-white flex flex-col items-center justify-center gap-8 font-medium">
          <Link href="/">Home</Link>
          <Link href="/docs">Docs</Link>
          <Link href="/about">About</Link>
          <Link href="/contact">Contact</Link>
        </div>
      )}
    </div>
  );
};

export default MobileButton;

This code snippet demonstrates how to implement a mobile hamburger animation to improve the user experience

I would like to work on this feature