diff --git a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx index e838aa60..0254349a 100644 --- a/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/[documentTypeId]/[documentId]/page.tsx @@ -87,7 +87,7 @@ const DocumentDetailsPage = () => { case "file-upload": return ; case "switcher": - return ; + return ; case "radio": return ; case "checkbox": diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx index 3344ad42..20d4e1f1 100644 --- a/hosting/src/app/(protected)/settings/page.tsx +++ b/hosting/src/app/(protected)/settings/page.tsx @@ -24,13 +24,70 @@ export default function Settings() {
-
-
-
-

Personal Information

+
+
+
+
+

System

+
+
+
+ +
+ +
+
+
-
-
+
+ + +
+
+

Personal Information

+
+
+
+
+
+
+ User +
+
+ Edit your photo + + + + +
+
+ +
+ +
+ +

+ Click to upload or drag and drop +

+

SVG, PNG, JPG or GIF

+

(max, 800 X 800px)

+
+
+
+
+
- -
-
-
- -
-
-
-

Your Photo

-
-
-
-
-
- User -
-
- Edit your photo - - - - -
-
- -
- -
- -

- Click to upload or drag and drop -

-

SVG, PNG, JPG or GIF

-

(max, 800 X 800px)

-
-
- -
- - -
-
-
-
-
- -
-
-
-

System

-
-
-
- -
- -
-
+
diff --git a/hosting/src/assets/scss/layout-default.scss b/hosting/src/assets/scss/layout-default.scss index e3444bef..359687e5 100644 --- a/hosting/src/assets/scss/layout-default.scss +++ b/hosting/src/assets/scss/layout-default.scss @@ -1,3 +1,10 @@ .l-default { - // + & .overlay { + position: absolute; + width: 100%; + height: 100vh; + content: ""; + background: rgba(0, 0, 0, 0.5); + z-index: 10; + } } diff --git a/hosting/src/components/DarkModeSwitcher.tsx b/hosting/src/components/DarkModeSwitcher.tsx index 4204218e..5e139f25 100644 --- a/hosting/src/components/DarkModeSwitcher.tsx +++ b/hosting/src/components/DarkModeSwitcher.tsx @@ -18,7 +18,7 @@ const DarkModeSwitcher = () => { return ( await saveColorMode(checked ? "dark" : "light")} onIcon="i-ri-moon-clear-fill text-white" offIcon="i-ri-sun-line" diff --git a/hosting/src/components/Form/Switcher.tsx b/hosting/src/components/Form/Switcher.tsx index d01ee698..168924cc 100644 --- a/hosting/src/components/Form/Switcher.tsx +++ b/hosting/src/components/Form/Switcher.tsx @@ -1,10 +1,10 @@ "use client"; -import {useState} from "react"; import {clsx} from "clsx"; +import {useEffect, useState} from "react"; interface SwitcherProps { style?: "default" | "rounded"; - defaultChecked?: boolean; + initialValue?: boolean; disabled?: boolean; onIcon?: string; offIcon?: string; @@ -13,13 +13,17 @@ interface SwitcherProps { export function Switcher({ style = "default", - defaultChecked = false, + initialValue = false, disabled = false, onIcon, offIcon, onChange, }: SwitcherProps) { - const [enabled, setEnabled] = useState(defaultChecked); + const [enabled, setEnabled] = useState(false); + + useEffect(() => { + setEnabled(initialValue); + }, []); const handleToggle = () => { if (!disabled) { @@ -34,14 +38,16 @@ export function Switcher({ return ( <>
{onIcon && offIcon && (
{onIcon && offIcon && ( +
{/* */} diff --git a/hosting/src/components/Sidebar/Sidebar.tsx b/hosting/src/components/Sidebar/Sidebar.tsx index e0a3cc7a..dfff5578 100644 --- a/hosting/src/components/Sidebar/Sidebar.tsx +++ b/hosting/src/components/Sidebar/Sidebar.tsx @@ -1,13 +1,13 @@ "use client"; - +import {SidebarExpandableMenu, SidebarExpandableMenuSubItem} from "@/components/Sidebar/SidebarExpandableMenu"; +import {SidebarMenuGroup} from "@/components/Sidebar/SidebarMenuGroup"; +import {SidebarMenuItem} from "@/components/Sidebar/SidebarMenuItem"; +import {useAuthentication} from "@/hooks/useAuthentication"; +import {useTanamDocumentTypes} from "@/hooks/useTanamDocumentTypes"; import Image from "next/image"; import Link from "next/link"; import {usePathname} from "next/navigation"; -import {useEffect, useRef, useState} from "react"; -import {useTanamDocumentTypes} from "../../hooks/useTanamDocumentTypes"; -import {SidebarExpandableMenu, SidebarExpandableMenuSubItem} from "./SidebarExpandableMenu"; -import {SidebarMenuGroup} from "./SidebarMenuGroup"; -import {SidebarMenuItem} from "./SidebarMenuItem"; +import {useEffect, useState} from "react"; interface SidebarProps { sidebarOpen: boolean; @@ -16,25 +16,12 @@ interface SidebarProps { const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => { const pathname = usePathname() ?? "/"; - const trigger = useRef(null); - const sidebar = useRef(null); const {data: documentTypes} = useTanamDocumentTypes(); + const {authUser, signout} = useAuthentication(); - const storedSidebarExpanded = "true"; - - const [sidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === "true"); - - // close on click outside - useEffect(() => { - const clickHandler = ({target}: MouseEvent) => { - if (!sidebar.current || !trigger.current) return; - if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) { - return; - } - setSidebarOpen(false); - }; - document.addEventListener("click", clickHandler); - return () => document.removeEventListener("click", clickHandler); + const [windowSize, setWindowSize] = useState({ + width: 0, + height: 0, }); // close if the esc key is pressed @@ -47,19 +34,33 @@ const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => { return () => document.removeEventListener("keydown", keyHandler); }); + // close sidebar when page is changed or window resize useEffect(() => { - localStorage.setItem("sidebar-expanded", sidebarExpanded.toString()); - if (sidebarExpanded) { - document.querySelector("body")?.classList.add("sidebar-expanded"); - } else { - document.querySelector("body")?.classList.remove("sidebar-expanded"); - } - }, [sidebarExpanded]); + setSidebarOpen(false); + }, [pathname, windowSize]); + + useEffect(() => { + // Handler to call on window resize + const handleResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + // Add event listener + window.addEventListener("resize", handleResize); + + // Call handler right away so state gets updated with initial window size + handleResize(); + + // Clean up the event listener on component unmount + return () => window.removeEventListener("resize", handleResize); + }, []); // Empty array ensures that effect is only run on mount and unmount return (