layout changes

src/App.js

 import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import Home from "./pages/home";
 import Dashboard from './pages/dashboard';
-import Layout from './pages/layout';
+import WithLayout from './utils/withLayout/index'
 import Viewreportee from './pages/viewReportee';
 import './App.css';
 import PageNotFound from './pages/pagenotfound/PageNotFound';
@@ -15,17 +15,20 @@ function App() {
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<Home />}/>
-        {/* profile  page */}
-        <Route path="/dashboard" element={<Layout><AdminProfile/></Layout>}/>
-         {/* reportees  page */}
-         <Route path="/myreportees" element={<Layout><Dashboard/></Layout>}/>
-          {/*adding activities*/}
-        <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
-         {/* fetch reports */}
-        <Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
-        <Route path="/adminreportees" element={<Layout><Adminreports/></Layout>}/>
-        <Route path="/Admin" element={<Layout><Admin/></Layout>}/>
-
+        <Route path='/' element={<WithLayout/>}>
+          {/* profile  page */}
+          <Route path="/dashboard" element={<AdminProfile/>}/>
+          {/* reportees  page */}
+          <Route path="/myreportees" element={<Dashboard/>}/>
+            {/*adding activities*/}
+          <Route path="/viewreportee" element={<Viewreportee/>}/>
+          {/* fetch reports */}
+          <Route path="/reportees" element={<Exporttable/>}/>
+          {/* Admin reports */}
+          <Route path="/adminreportees" element={<Adminreports/>}/>
+          {/* Activity List */}
+          <Route path="/Admin" element={<Admin/>}/>
+        </Route>
         <Route path="/*" element={<PageNotFound/>}/>
       </Routes>
     </BrowserRouter>

src/components/accordion/index.jsx

@@ -59,7 +59,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
             Score: {title === "Duties" ? defaultAvgScore : initiativeAvgScore}
           <ModalButton type={`${title === "Duties" ? "duties" : "initiative"}`} handleAddActivity={handleAddActivity}/>
           </span>
-          <svg data-accordion-icon className="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <svg data-accordion-icon className={`w-3 h-3 ${!open ? 'rotate-180' : 'rotate-360'} shrink-0`} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
             <path
               stroke="currentColor"
               strokeLinecap="round"

src/components/sidebar/index.jsx

 import React from "react";
-import { Link, useParams } from "react-router-dom";
 import { useSelector } from 'react-redux'
+import { Link, useParams, useLocation  } from "react-router-dom";
 import SetWindowSize from '../../utils/SetWindowSize';
 import DashboardIcon from '../../assets/icons/dashboardIcon';
 import ReportsIcon from '../../assets/icons/reportsIcon';
@@ -9,19 +9,18 @@ import Admin from "../../pages/admin";
 
 
 const menus = [
-  { title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard'], icon: <DashboardIcon />, role:[2, 3] },
-  { title: "My Reportees", path: '/myreportees', selectPaths: ['myreportees', 'viewreportee'], icon: <ReportsIcon />, role:[2] },
-  { title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon />, role:[2] },
-  { title: "Activity List", path: '/admin', selectPaths:['admin'], icon: <ReportsIcon />, role:[1] },
-  { title: "Reports", path: '/adminreportees', selectPaths:['adminreportees'], icon: <ReportsIcon />, role:[1] },
+  { title: "Dashboard", path: '/dashboard', selectPaths: ['/dashboard'], icon: <DashboardIcon />, role:[2, 3] },
+  { title: "My Reportees", path: '/myreportees', selectPaths: ['/myreportees', '/viewreportee'], icon: <ReportsIcon />, role:[2] },
+  { title: "Reports", path: '/reportees', selectPaths:['/reportees'], icon: <ReportsIcon />, role:[2] },
+  { title: "Activity List", path: '/admin', selectPaths:['/admin'], icon: <ReportsIcon />, role:[1] },
+  { title: "Reports", path: '/adminreportees', selectPaths:['/adminreportees'], icon: <ReportsIcon />, role:[1] },
 ]
 
 function Sidebar() {
   const userDetails = useSelector((state) => state.userDetails?.user);
-  const url = window.location.href;
-  const  [windowWidth, windowHeight] = SetWindowSize();
-  const selected = url.split('/').at(-1);
   const roleId = userDetails.roleId ?? 0
+  const  [windowWidth, windowHeight] = SetWindowSize();
+  const location = useLocation();
 
   return (
     <div className="w-[20%] flex bg-blue-700 text-white items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
@@ -36,7 +35,7 @@ function Sidebar() {
                 return (
                   <li key={menu.path}>
                     <Link
-                      className={`flex  ${menu.selectPaths.includes(selected) && 'bg-blue-500 ' } gap-x-3.5 py-2 lg:px-5 min-sm:px-4  text-sm text-slate-700  hover:bg-blue-500 text-white`}
+                      className={`flex  ${menu.selectPaths.includes(location.pathname) && 'bg-blue-500 ' } gap-x-3.5 py-2 lg:px-5 min-sm:px-4  text-sm text-slate-700  hover:bg-blue-500 text-white`}
                       to={menu.path}
                     >
                       <p className="flex items-center">{menu.icon}  <span className="ps-2"> {menu.title}</span></p>

src/pages/layout/index.jsx

-import React, { useState } from 'react'
+import React, { useState } from 'react';
+import { useLocation  } from "react-router-dom";
 import Header from '../../components/header';
 import Sidebar from '../../components/sidebar';
 import LeftSidebar from '../../components/leftSidebar';
 import SetWindowSize from '../../utils/SetWindowSize';
 
 function Layout({children}) {
+    const location = useLocation();
     const  [isOpen, setIsOpen] = useState(false);
     const  [windowWidth, windowHeight] = SetWindowSize();
 
     const handleLogoutOpen=()=>{
        setIsOpen(false)
     }
-    const url = window.location.href;
+    const url = location.pathname;
     return (
         <div className='max-h-[84vh]' onClick={handleLogoutOpen}>
             <Header isOpen={isOpen} />

src/utils/withLayout/index.jsx

+import { Outlet } from 'react-router-dom';
+import Layout from '../../pages/layout';
+
+function WithLayout() {
+        return <Layout><Outlet/></Layout> 
+}
+
+export default WithLayout;