menu.jsx

 <div className='dropdown dropdown-end'>
                <label tabIndex={0} className='btn btn-ghost btn-circle avatar'>
                  <div className='w-10 rounded-full'>
                    <img
                      src={
                        userDetails?.avatar_url
                          ? "https://kfeokhrdlerhktzxnsym.supabase.co/storage/v1/object/public/avatars/" +
                            userDetails.avatar_url
                          : "/images/user.jpeg"
                      }
                      alt={userDetails?.full_name}
                    />
                  </div>
                </label>
                <ul
                  tabIndex={0}
                  className='dropdown-content menu mt-3 p-2 shadow bg-base-100 rounded-box w-60'
                >
                  <li>
                    <Link passHref href='/lead-magnets'>
                      <a>
                        <BiMagnet /> Lead Magnets{" "}
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link passHref href='/my-apps'>
                      <a>
                        <BiChip /> My Apps
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link passHref href='/settings/profile'>
                      <a>
                        <BiUser /> Profile
                      </a>
                    </Link>
                  </li>
                  <li>
                    <Link passHref href='/settings'>
                      <a>
                        <BiCog /> Settings
                      </a>
                    </Link>
                  </li>
                  <hr className='pb-1 mt-1' />
                  <li onClick={signOut}>
                    <a>
                      <BiLogOut /> Log out
                    </a>
                  </li>
                </ul>
              </div>