Update various components

lib/component/nav/DarkModeSwitch.tsx

@@ -8,7 +8,7 @@ export default function DarkModeSwitch(){
 
 	const updateTheme = () => {
 		if(theme === "system"){
-			if(window.document.documentElement.classList.contains("dark")){
+			if(globalThis.document.documentElement.classList.contains("dark")){
 				setTheme("light");
 			}
 			else{

lib/component/nav/NavBar.tsx

@@ -2,13 +2,11 @@ import type { NavBarProps } from "$/types/NavTypes";
 import clsx from "clsx";
 
 
-export default function NavBar(props: NavBarProps){
-	const {
-		className,
-		children
-	} = props;
-
-
+export default function NavBar({
+	className,
+	children,
+	...props
+}: Readonly<NavBarProps>){
 	return (
 		<nav
 			className={clsx(
@@ -16,6 +14,7 @@ export default function NavBar(props: NavBarProps){
 				"fixed top-0 left-0 w-full z-10",
 				"flex flex-row flex-nowrap items-center justify-center"
 			)}
+			{...props}
 		>
 			{children}
 		</nav>

lib/component/nav/PopoverMenu.tsx

@@ -3,14 +3,11 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import clsx from "clsx";
 import { RiArrowRightSLine } from "react-icons/ri";
 
-export default function PopoverMenu(props: PopoverMenuProps){
-	const {
-		buttonContent,
-		anchor,
-		children
-	} = props;
-
-
+export default function PopoverMenu({
+	buttonContent,
+	anchor,
+	children
+}: Readonly<PopoverMenuProps>){
 	return (
 		<Popover>
 			<PopoverButton