Change account router

resources/scripts/routers/DashboardRouter.tsx

@@ -4,10 +4,12 @@ import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import TransitionRouter from '@/TransitionRouter';
-import SubNavigation from '@/components/elements/SubNavigation';
 import { useLocation } from 'react-router';
 import Spinner from '@/components/elements/Spinner';
 import routes from '@/routers/routes';
+import Sidebar from '@/components/Sidebar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export default () => {
     const location = useLocation();
@@ -16,17 +18,18 @@ export default () => {
         <>
             <NavigationBar />
             {location.pathname.startsWith('/account') && (
-                <SubNavigation>
-                    <div>
-                        {routes.account
-                            .filter((route) => !!route.name)
-                            .map(({ path, name, exact = false }) => (
-                                <NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
-                                    {name}
-                                </NavLink>
-                            ))}
-                    </div>
-                </SubNavigation>
+                <Sidebar>
+                    {routes.account
+                        .filter((route) => !!route.name)
+                        .map(({ path, name, exact = false, iconProp }) => (
+                            <NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
+                                <div className='icon'>
+                                    <FontAwesomeIcon icon={iconProp as IconProp} />
+                                </div>
+                                {name}
+                            </NavLink>
+                        ))}
+                </Sidebar>
             )}
 
             <TransitionRouter>