Floatingmenu i stedet for knapp i toppen av arrangementsiden.

Tatt i bruk komponenten i omOss siden også

Aria-label på dark mode knapper

Author: emberal

app/(root)/arrangement/page.tsx

@@ -2,7 +2,7 @@ import { getFutureEvents, getPastAndFutureEvents, getPastEvents } from "@/sanity
 import EventCardPaginated from "@/app/(root)/arrangement/eventCardPaginated"
 import { type Metadata } from "next"
 import CalendarModal from "@/components/modals/calendarModal"
-import { ButtonGroup } from "@nextui-org/react"
+import FloatingMenu from "@/components/floatingMenu"
 
 export const metadata: Metadata = {
     title: "Arrangementer | Root Linjeforening",
@@ -26,9 +26,11 @@ const EventsPage: AsyncPage = async () => {
     const { past, future } = await getPastAndFutureEvents(nrOfEvents)
     return (
         <div className={"pt-3 sm:px-10"}>
-            <ButtonGroup className={"px-1 pb-3 sm:pb-0"}>
-                <CalendarModal />
-            </ButtonGroup>
+            <FloatingMenu>
+                <div className={"rounded-lg bg-white p-2"}>
+                    <CalendarModal />
+                </div>
+            </FloatingMenu>
             <div className={"flex flex-wrap items-baseline justify-center gap-5 sm:p-5"}>
                 <EventCardPaginated
                     cardTitle={"Kommende arrangementer"}

components/buttons/darkModeToggle.tsx

@@ -31,6 +31,7 @@ const DarkModeToggle = () => {
                     key={theme}
                     onClick={() => setTheme(theme)}
                     size="sm"
+                    aria-label={text}
                     className={selectedTheme === theme ? "bg-root-primary text-white" : undefined}>
                     {icon}
                     {text}

components/floatingMenu.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { ChevronRightIcon } from "@heroicons/react/24/outline"
+import { defaultIconSize } from "@/components/icons/icon"
+import useToggle from "@/hooks/useToggle"
+
+// 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.
+ * @param children Innholdet som skal vises i menyen.
+ * @param className Klassenavn som skal legges til menyen.
+ * @param props Andre props som sendes til menyen.
+ */
+const FloatingMenu: Component<ChildProps> = ({ children, className, ...props }) => {
+    const [isMenuOpen, toggleMenu] = useToggle()
+
+    return (
+        <div 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`}
+                    title={`${isMenuOpen ? "Lukk" : "Åpne"} meny`}
+                    onClick={() => toggleMenu()}>
+                    <ChevronRightIcon
+                        width={defaultIconSize}
+                        className={`transition-all duration-200 ${isMenuOpen && "rotate-180"}`}
+                    />
+                </button>
+                <div
+                    className={`sticky h-full w-fit transition-all duration-200 ${
+                        isMenuOpen ? "translate-x-0" : "-translate-x-full"
+                    }`}>
+                    {children}
+                </div>
+            </div>
+            <div className={"hidden 2xl:block"}>{children}</div>
+        </div>
+    )
+}
+
+export default FloatingMenu

components/modals/calendarModal.tsx

@@ -6,12 +6,17 @@ import Select from "@/components/select/select"
 import { getEventTypeLabel } from "@/sanity/lib/utils"
 import AddToCalendarDropdown from "@/components/dropdown/addToCalendarDropdown"
 
-const CalendarModal = () => (
+const CalendarModal: Component = () => (
     <Modal
         size={"xl"}
-        label={"Abonner på kalender"}
-        modalTitle={"Abonner på kalender"}
+        label={"Abonner på arrangementer"}
+        modalTitle={"Abonner på arrangementer i kalenderen din"}
         modalContent={<ModalContent />}
+        trigger={toggle => (
+            <button onClick={toggle} className={"text-root-primary"} aria-label={"Åpne meny"}>
+                Abonner på arrangementer
+            </button>
+        )}
     />
 )
 

components/modals/modal.tsx

@@ -16,9 +16,26 @@ interface ModalProps extends DefaultProps {
     modalTitle?: string
     modalContent?: ReactNode
     size?: _ModalProps["size"]
+    trigger?: (toggle: VoidFunction) => ReactNode
 }
 
-const Modal: Component<ModalProps> = ({ label, size, modalTitle, modalContent, ...props }) => {
+/**
+ * En modal som flyter over innholdet på siden.
+ * @param label Tittelen på knappen som åpner modalen. Vises kun hvis trigger ikke er satt.
+ * @param size Størrelsen på modalen.
+ * @param modalTitle Tittelen på modalen. Vises på toppen av modalen.
+ * @param modalContent Innholdet i modalen.
+ * @param trigger En funksjon som returnerer en knapp som åpner modalen. Når denne er satt vil standard knappen ikke vises.
+ * @param props Andre props som sendes til Modal komponenten.
+ */
+const Modal: Component<ModalProps> = ({
+    label,
+    size,
+    modalTitle,
+    modalContent,
+    trigger,
+    ...props
+}) => {
     const [isOpen, toggleOpen] = useToggle()
 
     function closeModal() {
@@ -27,9 +44,13 @@ const Modal: Component<ModalProps> = ({ label, size, modalTitle, modalContent, .
 
     return (
         <>
-            <Button onClick={() => toggleOpen()} aria-label={"Åpne dialogboks"}>
-                {label}
-            </Button>
+            {trigger ? (
+                trigger(toggleOpen)
+            ) : (
+                <Button onClick={() => toggleOpen()} aria-label={"Åpne dialogboks"}>
+                    {label}
+                </Button>
+            )}
             <_Modal
                 isOpen={isOpen}
                 onClose={closeModal}

components/omOss/InfoPageContent.tsx

@@ -3,9 +3,8 @@ import SingleInfoCard from "@/components/cards/singleInfoCard"
 import type { InfoSide } from "@/sanity/types"
 import SideNavigator from "@/components/omOss/sideNavigator"
 import { useMemo } from "react"
-import { ChevronRightIcon } from "@heroicons/react/24/outline"
 import useToggle from "@/hooks/useToggle"
-import { defaultIconSize } from "@/components/icons/icon"
+import FloatingMenu from "@/components/floatingMenu"
 
 /**
  * Representerer klient-siden av siden som viser informasjon om Root Linjeforeningen.
@@ -49,28 +48,7 @@ export const InfoPageContent: Component<{
         <div onClick={() => isMenuOpen && toggleMenu(false)}>
             {infoSider.length > 0 ? (
                 <div className={`mt-24 flex justify-center`}>
-                    <div className={`fixed left-0 z-50 hidden h-full w-fit pr-1 2xl:flex`}>
-                        {navigator}
-                    </div>
-                    <div className={`fixed left-0 z-50 2xl:hidden`}>
-                        <button
-                            className={`h-fit w-fit divide-y rounded-r-2xl bg-white p-2 opacity-70 dark:bg-default-dark-background`}
-                            title={`${isMenuOpen ? "Lukk" : "Åpne"} meny`}
-                            onClick={() => toggleMenu()}>
-                            <ChevronRightIcon
-                                width={defaultIconSize}
-                                className={`transition-all duration-200 ${
-                                    isMenuOpen && "rotate-180"
-                                }`}
-                            />
-                        </button>
-                        <div
-                            className={`sticky h-full w-fit transition-all duration-200 ${
-                                isMenuOpen ? "translate-x-0" : "-translate-x-full"
-                            }`}>
-                            {navigator}
-                        </div>
-                    </div>
+                    <FloatingMenu>{navigator}</FloatingMenu>
                     {infoPages}
                 </div>
             ) : (