Tried to add a Root.js to separate the navbar, header, footer from the other route path

src/components/Root.js

@@ -0,0 +1,36 @@
+import { useDisclosure } from "@mantine/hooks";
+import { useLocation } from "react-router-dom";
+import NavBar from './components/NavBar';
+import Header from './components/Header';
+import RouterSwitcher from './components/RouterSwitcher';
+import {AppShell} from '@mantine/core';
+
+
+export default function Root({ logout }) {
+    const location = useLocation();
+
+    const [active, setActive] = useState(
+        data.findIndex((item) => item.link === location.pathname)
+    );
+
+    const [opened, {toggle}] = useDisclosure();
+
+    return(
+        <div className='App' style={{marginTop: '20px' }}>
+        <AppShell
+            header={{height: 50}}
+            navbar={{width: 300, breakpoint: 'sm', collapsed: {mobile: !opened}}}
+            padding="md">
+                <Header toggle={toggle} opened={opened}/>
+                <NavBar />
+                    <AppShell.Main>
+                    <RouterSwitcher>
+                        </RouterSwitcher>
+                    </ AppShell.Main>
+                <AppShell.Footer zIndex={opened ? 'auto': 201}>
+                    Built by Maritoni V. Benjamin
+                </AppShell.Footer>
+        </AppShell>
+        </div>
+    );
+}