diff options
Diffstat (limited to 'components/shared/MobileNav.js')
| -rw-r--r-- | components/shared/MobileNav.js | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/components/shared/MobileNav.js b/components/shared/MobileNav.js new file mode 100644 index 0000000..6dd1e64 --- /dev/null +++ b/components/shared/MobileNav.js @@ -0,0 +1,170 @@ +import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; +import { CalendarIcon, ClockIcon, HomeIcon } from "@heroicons/react/24/outline"; +import { signIn, signOut } from "next-auth/react"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { useState } from "react"; + +export default function MobileNav({ sessions, hideProfile = false }) { + const [isVisible, setIsVisible] = useState(false); + + const handleShowClick = () => { + setIsVisible(true); + }; + + const handleHideClick = () => { + setIsVisible(false); + }; + return ( + <> + {/* NAVBAR */} + <div className="z-[1000]"> + {!isVisible && ( + <button + onClick={handleShowClick} + className="fixed bottom-[30px] right-[20px] z-[100] flex h-[51px] w-[50px] cursor-pointer items-center justify-center rounded-[8px] bg-[#17171f] shadow-lg lg:hidden" + id="bars" + > + <svg + xmlns="http://www.w3.org/2000/svg" + className="h-[42px] w-[61.5px] text-white/60 fill-orange-500" + viewBox="0 0 20 20" + fill="currentColor" + > + <path + fillRule="evenodd" + d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" + clipRule="evenodd" + /> + </svg> + </button> + )} + </div> + + {/* Mobile Menu */} + <div + className={`transition-all duration-150 subpixel-antialiased z-[500]`} + > + {isVisible && sessions && !hideProfile && ( + <Link + href={`/en/profile/${sessions?.user.name}`} + className="fixed lg:hidden bottom-[100px] w-[60px] h-[60px] flex items-center justify-center right-[20px] rounded-full z-50 bg-[#17171f]" + > + <Image + src={sessions?.user.image.large} + alt="user avatar" + width={60} + height={60} + className="object-cover w-[60px] h-[60px] rounded-full" + /> + </Link> + )} + {isVisible && ( + <div className="fixed bottom-[30px] right-[20px] z-[500] flex h-[51px] px-5 items-center justify-center gap-8 rounded-[8px] text-[11px] bg-[#17171f] shadow-lg lg:hidden"> + <div className="flex items-center gap-5"> + <button className="group flex flex-col items-center"> + <Link href="/en/"> + <HomeIcon className="w-6 h-6 group-hover:text-action" /> + </Link> + <Link + href="/en/" + className="font-karla font-bold text-white/60 group-hover:text-action" + > + home + </Link> + </button> + <button className="group flex flex-col items-center gap-[1px]"> + <Link href="/en/schedule"> + <CalendarIcon className="w-6 h-6 group-hover:text-action" /> + </Link> + <Link + href="/en/schedule" + className="font-karla font-bold text-white/60 group-hover:text-action" + > + schedule + </Link> + </button> + <button className="group flex gap-[1px] flex-col items-center"> + <Link href="/en/search/anime"> + <MagnifyingGlassIcon className="w-6 h-6 group-hover:text-action" /> + </Link> + + <Link + href="/en/search/anime" + className="font-karla font-bold text-white/60 group-hover:text-action" + > + search + </Link> + </button> + {sessions ? ( + <button + onClick={() => signOut("AniListProvider")} + className="group flex gap-[1.5px] flex-col items-center " + > + <div> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 96 960 960" + className="group-hover:fill-action w-6 h-6 fill-txt" + > + <path d="M186.666 936q-27 0-46.833-19.833T120 869.334V282.666q0-27 19.833-46.833T186.666 216H474v66.666H186.666v586.668H474V936H186.666zm470.668-176.667l-47-48 102-102H370v-66.666h341.001l-102-102 46.999-48 184 184-182.666 182.666z"></path> + </svg> + </div> + <h1 className="font-karla font-bold text-white/60 group-hover:text-action"> + logout + </h1> + </button> + ) : ( + <button + onClick={() => signIn("AniListProvider")} + className="group flex gap-[1.5px] flex-col items-center " + > + <div> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 96 960 960" + className="group-hover:fill-action w-6 h-6 fill-txt mr-2" + > + <path d="M486 936v-66.666h287.334V282.666H486V216h287.334q27 0 46.833 19.833T840 282.666v586.668q0 27-19.833 46.833T773.334 936H486zm-78.666-176.667l-47-48 102-102H120v-66.666h341l-102-102 47-48 184 184-182.666 182.666z"></path> + </svg> + </div> + <h1 className="font-karla font-bold text-white/60 group-hover:text-action"> + login + </h1> + </button> + )} + </div> + <button onClick={handleHideClick}> + <svg + width="20" + height="21" + className="fill-orange-500" + viewBox="0 0 20 21" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <rect + x="2.44043" + y="0.941467" + width="23.5842" + height="3.45134" + rx="1.72567" + transform="rotate(45 2.44043 0.941467)" + /> + <rect + x="19.1172" + y="3.38196" + width="23.5842" + height="3.45134" + rx="1.72567" + transform="rotate(135 19.1172 3.38196)" + /> + </svg> + </button> + </div> + )} + </div> + </> + ); +} |