MainLayout for theme persistence

src/pages/homepage/components/SettingsButton.tsx

@@ -2,6 +2,7 @@ import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
 import { useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
 import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
 
 function SettingsButton({
@@ -12,7 +13,7 @@ function SettingsButton({
 }: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
-
+	const navigate = useNavigate();
 	useEffect(() => {
 		if (data) {
 			const list: [any] =
@@ -42,9 +43,9 @@ function SettingsButton({
 				<NavLink
 					label='Settings'
 					component='a'
-					href={`/${import.meta.env.VITE_BASE_URL}/settings`}
 					className={navLinkClasses.defaultNavLink}
 					classNames={navLinkClasses}
+					onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
 				/>
 				<NavLink
 					label='Quick Actions'