el.xwx.moe/components/Navbar.tsx

133 lines
4.5 KiB
TypeScript
Raw Normal View History

2023-05-01 05:07:01 -05:00
import { useEffect, useState } from "react";
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-10-23 09:45:48 -05:00
import useWindowDimensions from "@/hooks/useWindowDimensions";
import ToggleDarkMode from "./ui/ToggleDarkMode";
2023-12-01 16:44:34 -06:00
import NewLinkModal from "./ModalContent/NewLinkModal";
import NewCollectionModal from "./ModalContent/NewCollectionModal";
import UploadFileModal from "./ModalContent/UploadFileModal";
2024-01-14 09:09:09 -06:00
import { dropdownTriggerer } from "@/lib/client/utils";
2024-01-14 10:16:42 -06:00
import MobileNavigation from "./MobileNavigation";
2024-04-19 05:16:11 -05:00
import ProfileDropdown from "./ProfileDropdown";
export default function Navbar() {
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();
useEffect(() => {
setSidebar(false);
2024-01-14 09:09:09 -06:00
document.body.style.overflow = "auto";
}, [width, router]);
2023-05-01 05:07:01 -05:00
2023-04-30 15:54:40 -05:00
const toggleSidebar = () => {
2024-01-14 09:09:09 -06:00
setSidebar(false);
document.body.style.overflow = "auto";
2023-04-30 15:54:40 -05:00
};
const [newLinkModal, setNewLinkModal] = useState(false);
const [newCollectionModal, setNewCollectionModal] = useState(false);
const [uploadFileModal, setUploadFileModal] = useState(false);
2023-11-28 23:46:31 -06:00
2023-02-08 18:32:20 -06:00
return (
2023-12-16 08:46:29 -06:00
<div className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
2023-04-30 15:54:40 -05:00
<div
2024-01-14 09:09:09 -06:00
onClick={() => {
setSidebar(true);
document.body.style.overflow = "hidden";
}}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden sm:inline-flex"
2023-04-30 15:54:40 -05:00
>
2023-12-17 22:32:33 -06:00
<i className="bi-list text-2xl leading-none"></i>
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">
2023-12-16 08:46:29 -06:00
<ToggleDarkMode className="hidden sm:inline-grid" />
2023-11-27 15:38:38 -06:00
2024-01-14 09:09:09 -06:00
<div className="dropdown dropdown-end sm:inline-block hidden">
2024-03-10 05:08:28 -05:00
<div className="tooltip tooltip-bottom" data-tip="Create New...">
2023-11-29 08:41:24 -06:00
<div
tabIndex={0}
role="button"
2024-01-14 09:09:09 -06:00
onMouseDown={dropdownTriggerer}
2023-12-17 22:32:33 -06:00
className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
2023-11-29 08:41:24 -06:00
>
2023-12-16 08:46:29 -06:00
<span>
2023-12-17 22:32:33 -06:00
<i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
2023-12-16 08:46:29 -06:00
</span>
<span>
2023-12-17 22:32:33 -06:00
<i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
2023-12-16 08:46:29 -06:00
</span>
2023-11-29 08:41:24 -06:00
</div>
</div>
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
2023-11-29 08:41:24 -06:00
<li>
<div
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
setNewLinkModal(true);
}}
2023-11-29 08:41:24 -06:00
tabIndex={0}
role="button"
>
New Link
</div>
</li>
2024-03-20 08:56:14 -05:00
<li>
<div
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
setUploadFileModal(true);
}}
tabIndex={0}
role="button"
>
Upload File
</div>
2024-03-20 08:56:14 -05:00
</li>
2023-11-29 08:41:24 -06:00
<li>
<div
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
setNewCollectionModal(true);
}}
2023-11-29 08:41:24 -06:00
tabIndex={0}
role="button"
>
New Collection
</div>
</li>
</ul>
</div>
2023-11-16 02:22:16 -06:00
2024-04-19 05:16:11 -05:00
<ProfileDropdown />
2023-02-08 18:32:20 -06:00
</div>
2024-01-14 09:09:09 -06:00
2024-01-14 10:16:42 -06:00
<MobileNavigation />
2024-01-14 09:09:09 -06:00
2023-11-29 14:17:51 -06:00
{sidebar ? (
2023-12-23 18:00:53 -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-40">
2023-11-29 14:17:51 -06:00
<ClickAwayHandler className="h-full" onClickOutside={toggleSidebar}>
<div className="slide-right h-full shadow-lg">
<Sidebar />
</div>
</ClickAwayHandler>
</div>
) : null}
2023-12-01 16:42:45 -06:00
{newLinkModal ? (
<NewLinkModal onClose={() => setNewLinkModal(false)} />
) : undefined}
{newCollectionModal ? (
<NewCollectionModal onClose={() => setNewCollectionModal(false)} />
) : undefined}
{uploadFileModal ? (
<UploadFileModal onClose={() => setUploadFileModal(false)} />
) : undefined}
2023-02-08 18:32:20 -06:00
</div>
);
2023-02-08 17:58:55 -06:00
}