el.xwx.moe/components/Navbar.tsx

150 lines
5.1 KiB
TypeScript
Raw Normal View History

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2023-03-28 02:31:50 -05:00
import { signOut } from "next-auth/react";
2023-06-18 00:27:57 -05:00
import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
2023-05-01 05:07:01 -05:00
import { useEffect, useState } from "react";
2023-03-28 02:31:50 -05:00
import Dropdown from "@/components/Dropdown";
2023-05-08 09:35:39 -05:00
import ClickAwayHandler from "@/components/ClickAwayHandler";
import Sidebar from "@/components/Sidebar";
2023-05-01 05:07:01 -05:00
import { useRouter } from "next/router";
2023-11-16 02:22:16 -06:00
import SearchBar from "@/components/SearchBar";
2023-05-20 14:25:00 -05:00
import useAccountStore from "@/store/account";
import ProfilePhoto from "@/components/ProfilePhoto";
2023-06-12 23:46:32 -05:00
import useModalStore from "@/store/modals";
2023-10-23 09:45:48 -05:00
import useWindowDimensions from "@/hooks/useWindowDimensions";
2023-11-16 02:22:16 -06:00
import ToggleDarkMode from "./ToggleDarkMode";
2023-11-24 06:50:16 -06:00
import useLocalSettingsStore from "@/store/localSettings";
export default function Navbar() {
2023-06-12 23:46:32 -05:00
const { setModal } = useModalStore();
2023-11-24 06:50:16 -06:00
const { settings, updateSettings } = useLocalSettingsStore();
2023-05-20 14:25:00 -05:00
const { account } = useAccountStore();
2023-03-28 02:31:50 -05:00
const [profileDropdown, setProfileDropdown] = useState(false);
2023-05-01 05:07:01 -05:00
const router = useRouter();
const [sidebar, setSidebar] = useState(false);
2023-10-23 09:45:48 -05:00
const { width } = useWindowDimensions();
2023-11-24 06:50:16 -06:00
const handleToggle = () => {
if (settings.theme === "dark") {
updateSettings({ theme: "light" });
} else {
updateSettings({ theme: "dark" });
}
};
2023-10-23 09:45:48 -05:00
useEffect(() => {
setSidebar(false);
}, [width]);
2023-04-30 15:54:40 -05:00
2023-05-01 05:07:01 -05:00
useEffect(() => {
setSidebar(false);
}, [router]);
2023-04-30 15:54:40 -05:00
const toggleSidebar = () => {
setSidebar(!sidebar);
};
2023-02-08 18:32:20 -06:00
return (
2023-11-26 04:17:08 -06:00
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b h-16">
2023-04-30 15:54:40 -05:00
<div
onClick={toggleSidebar}
2023-11-26 04:17:08 -06:00
className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-neutral-content"
2023-04-30 15:54:40 -05:00
>
2023-05-31 13:33:01 -05:00
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
2023-04-30 15:54:40 -05:00
</div>
2023-11-16 02:22:16 -06:00
<SearchBar />
2023-03-28 02:31:50 -05:00
<div className="flex items-center gap-2">
<div
2023-06-12 23:46:32 -05:00
onClick={() => {
setModal({
modal: "LINK",
state: true,
method: "CREATE",
});
}}
className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-neutral-content dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-primary sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
2023-03-28 02:31:50 -05:00
>
2023-05-31 13:33:01 -05:00
<FontAwesomeIcon
icon={faPlus}
className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
/>
<span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
New Link
</span>
2023-03-28 02:31:50 -05:00
</div>
2023-11-16 02:22:16 -06:00
<ToggleDarkMode className="sm:flex hidden" />
2023-03-28 02:31:50 -05:00
<div className="relative">
<div
2023-11-26 04:17:08 -06:00
className="flex gap-1 group sm:hover:bg-neutral-content sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
2023-03-28 02:31:50 -05:00
onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown"
>
2023-06-07 14:34:50 -05:00
<ProfilePhoto
src={account.image ? account.image : undefined}
priority={true}
2023-08-14 22:25:25 -05:00
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
2023-06-07 14:34:50 -05:00
/>
2023-06-18 00:27:57 -05:00
<p
2023-06-05 10:13:04 -05:00
id="profile-dropdown"
2023-11-24 07:39:55 -06:00
className="leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
2023-06-05 10:13:04 -05:00
>
2023-06-18 00:27:57 -05:00
{account.name}
</p>
2023-03-28 02:31:50 -05:00
</div>
{profileDropdown ? (
<Dropdown
items={[
{
name: "Settings",
href: "/settings/account",
2023-03-28 02:31:50 -05:00
},
2023-08-14 22:25:25 -05:00
{
2023-11-24 06:50:16 -06:00
name: `Switch to ${
settings.theme === "light" ? "Dark" : "Light"
}`,
2023-08-14 22:25:25 -05:00
onClick: () => {
setProfileDropdown(!profileDropdown);
2023-11-24 06:50:16 -06:00
handleToggle();
2023-08-14 22:25:25 -05:00
},
},
2023-03-28 02:31:50 -05:00
{
name: "Logout",
onClick: () => {
signOut();
setProfileDropdown(!profileDropdown);
},
},
]}
onClickOutside={(e: Event) => {
const target = e.target as HTMLInputElement;
if (target.id !== "profile-dropdown") setProfileDropdown(false);
}}
className="absolute top-11 right-0 z-20 w-36"
2023-03-28 02:31:50 -05:00
/>
) : null}
2023-04-30 15:54:40 -05:00
{sidebar ? (
2023-11-25 04:54:43 -06:00
<div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
2023-07-30 15:37:56 -05:00
<ClickAwayHandler
className="h-full"
onClickOutside={toggleSidebar}
>
<div className="slide-right h-full shadow-lg">
<Sidebar />
2023-04-30 15:54:40 -05:00
</div>
</ClickAwayHandler>
</div>
) : null}
2023-03-28 02:31:50 -05:00
</div>
2023-02-08 18:32:20 -06:00
</div>
</div>
);
2023-02-08 17:58:55 -06:00
}