Dark mode på bakgrunn og lukk meny når man trykker utenfor

Author: emberal

app/(root)/arrangement/page.tsx

@@ -3,6 +3,7 @@ import EventCardPaginated from "@/app/(root)/arrangement/eventCardPaginated"
 import { type Metadata } from "next"
 import CalendarModal from "@/components/modals/calendarModal"
 import FloatingMenu from "@/components/floatingMenu"
+import { Card } from "@nextui-org/card"
 
 export const metadata: Metadata = {
     title: "Arrangementer | Root Linjeforening",
@@ -27,9 +28,9 @@ const EventsPage: AsyncPage = async () => {
     return (
         <div className={"pt-3 sm:px-10"}>
             <FloatingMenu>
-                <div className={"rounded-lg bg-white p-2"}>
+                <Card className={"rounded-lg p-2"}>
                     <CalendarModal />
-                </div>
+                </Card>
             </FloatingMenu>
             <div className={"flex flex-wrap items-baseline justify-center gap-5 sm:p-5"}>
                 <EventCardPaginated

components/floatingMenu.tsx

@@ -3,8 +3,8 @@
 import { ChevronRightIcon } from "@heroicons/react/24/outline"
 import { defaultIconSize } from "@/components/icons/icon"
 import useToggle from "@/hooks/useToggle"
+import { useEffect, useRef } from "react"
 
-// TODO lukk når man trykker utenfor
 /**
  * En meny som flyter over innholdet på venstre side av skjermen. Dersom skjermen er for liten, vil menyen kunne åpnes og lukkes.
  * Ellers vil menyen alltid være åpen.
@@ -14,9 +14,21 @@ import useToggle from "@/hooks/useToggle"
  */
 const FloatingMenu: Component<ChildProps> = ({ children, className, ...props }) => {
     const [isMenuOpen, toggleMenu] = useToggle()
+    const menuRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        function onClick(e: MouseEvent): void {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+                toggleMenu(false)
+            }
+        }
+
+        document.addEventListener("click", onClick)
+        return () => document.removeEventListener("click", onClick)
+    }, [])
 
     return (
-        <div className={`fixed left-0 z-50 ${className}`} {...props}>
+        <div ref={menuRef} className={`fixed left-0 z-50 ${className}`} {...props}>
             <div className={"2xl:hidden"}>
                 <button
                     className={`h-fit w-fit divide-y rounded-r-2xl bg-white p-2 opacity-70 dark:bg-default-dark-background`}

components/modals/calendarModal.tsx

@@ -13,7 +13,10 @@ const CalendarModal: Component = () => (
         modalTitle={"Abonner på arrangementer i kalenderen din"}
         modalContent={<ModalContent />}
         trigger={toggle => (
-            <button onClick={toggle} className={"text-root-primary"} aria-label={"Åpne meny"}>
+            <button
+                onClick={toggle}
+                className={"text-root-primary dark:text-root-light"}
+                aria-label={"Åpne meny"}>
                 Abonner på arrangementer
             </button>
         )}