sidenav.jsx

    <nav className="flex transition-opacity duration-150 ease-out fixed sm:top-0 max-sm:bottom-0 max-sm:dark:bg-black/60 max-sm:bg-background/50 max-sm:h-[86px] z-10 justify-center sm:justify-between max-sm:px-4 sm:flex-col sm:min-h-dvh bottom-t sm:border-r sm:w-[70px] w-full border-border">
      <div className="flex sm:flex-col items-center max-sm:pb-[calc(env(safe-area-inset-bottom)/3)] max-sm:gap-6 gap-3 text-primary">
        <a
          href="/"
          className="active:opacity-85 mt-2 mb-2 hidden sm:block group"
        >
        <p>Nav Item</p>
        </Link>
        <p>Nav Item</p>

        <p>Nav Item</p>

        <p>Nav Item</p>

        <p>Nav Item</p>

        <AddIcon className="max-sm:order-3 sm:mt-2" />
      </div>
      <div className="hidden sm:flex sm:flex-col items-center max-sm:gap-6 max-sm:ml-4 gap-3 sm:mb-4">
       <p>Menu Item</p>
      </div>
    </nav>