Menu overlay

src/pages/homepage/components/SettingsButton.tsx

@@ -4,6 +4,7 @@ import {
 	Group,
 	Menu,
 	MultiSelect,
+	Overlay,
 	Select,
 	Stack,
 	Text,
@@ -43,7 +44,7 @@ function SettingsButton() {
 	} = useCommonHooks();
 
 	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
-
+	const [overlayOpened, setOverlayOpened] = useState(false);
 	const handleWakeRequest = () => {
 		wakeRequest({
 			method: 'POST',
@@ -63,12 +64,16 @@ function SettingsButton() {
 	}, [data, isFetched]);
 
 	return (
+		<>
+			{overlayOpened && <Overlay />}
 			<Menu
 				classNames={menuClasses}
 				withinPortal={false}
 				withArrow
 				shadow='md'
 				position='top'
+				onOpen={() => setOverlayOpened(true)}
+				onClose={() => setOverlayOpened(false)}
 			>
 				<Menu.Target>
 					<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
@@ -154,7 +159,9 @@ function SettingsButton() {
 														: theme.primaryColor,
 											}}
 											onClick={() => {
-											setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
+												setCurrentTheme(
+													currentTheme === 'random' ? theme.name : 'random',
+												);
 											}}
 										>
 											<FiShuffle />
@@ -236,6 +243,7 @@ function SettingsButton() {
 					</Stack>
 				</Menu.Dropdown>
 			</Menu>
+		</>
 	);
 }