fix build error

app/about/page.tsx

@@ -1,5 +1,3 @@
-import { link } from "fs"
-
 import { about } from "@/config/pages"
 
 export default function About() {

app/layout.tsx

@@ -50,10 +50,6 @@ export const metadata: Metadata = {
       template: `%s - ${siteConfig.name}`,
     },
   },
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
   icons: {
     icon: "/icons/favicon.ico",
     shortcut: ["/icons/favicon-16x16.png", "/icons/favicon-32x32.png"],

components/Navbar/NavigationDrawer/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { Suspense } from "react"
 import Link from "next/link"
 
 import { siteConfig } from "@/config/site"
-import useRouteChanged from "@/hooks/useRouteChanged"
 import { Separator } from "@/components/ui/separator"
 import {
   Sheet,
@@ -18,10 +17,8 @@ import CustomIcon from "@/components/icons"
 import DonationCard from "./DonationCard"
 
 const NavigationDrawer = () => {
-  const [open, setOpen] = useState(false)
-  useRouteChanged(() => setOpen(false))
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet>
       <SheetTrigger>
         <CustomIcon name="Menu" size={22} className="cursor-pointer" />
       </SheetTrigger>

components/Navbar/SettingDrawer/index.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import React, { useState } from "react"
+import React from "react"
 import { Settings } from "lucide-react"
 
-import useRouteChanged from "@/hooks/useRouteChanged"
 import { Separator } from "@/components/ui/separator"
 import {
   Sheet,
@@ -18,10 +17,8 @@ import ThemeToggle from "./ThemeToggle"
 import VerseSetting from "./VerseSetting"
 
 const SettingDrawer = () => {
-  const [open, setOpen] = useState(false)
-  useRouteChanged(() => setOpen(false))
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet>
       <SheetTrigger>
         <Settings className="size-5 md:size-6" />
       </SheetTrigger>

components/Navbar/index.tsx

@@ -10,7 +10,6 @@ import {
 } from "@supabase/auth-helpers-nextjs"
 import { Github, Search } from "lucide-react"
 
-import useRouteChanged from "@/hooks/useRouteChanged"
 import useScrollDirection from "@/hooks/useScrollDirection"
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 import Command from "@/components/Command"
@@ -21,19 +20,13 @@ import { UserAccount } from "./UserAccount"
 
 const Navbar = () => {
   const [user, setUser] = useState<User | null>(null)
-  const [open, setOpen] = useState(false)
   const { setVisible, visible } = useStore(navbarSelector)
   const supabase = createClientComponentClient()
 
   useEffect(() => {
     supabase.auth.getUser().then(({ data }) => setUser(data.user))
   }, [supabase])
 
-  useRouteChanged(() => {
-    setOpen(false)
-    setVisible(true)
-  })
-
   const onDirectionChange = useCallback(
     (direction: string, newYPosition: number) => {
       if (newYPosition > 80 && direction === "down") setVisible(false)
@@ -65,7 +58,7 @@ const Navbar = () => {
         >
           <Github className="size-5 md:size-6" />
         </a>
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog>
           <DialogTrigger asChild>
             <Search className="size-5 cursor-pointer md:size-6" />
           </DialogTrigger>