refactor: Reorganize sidebar navigation and add personal settings route

web/src/App.js

@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next';
 import { StatusContext } from './context/Status';
 import { setStatusData } from './helpers/data.js';
 import { API, showError } from './helpers';
+import PersonalSetting from './components/PersonalSetting.js';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -177,6 +178,16 @@ function App() {
             </PrivateRoute>
           }
         />
+        <Route
+          path='/personal'
+          element={
+            <PrivateRoute>
+              <Suspense fallback={<Loading></Loading>}>
+                <PersonalSetting />
+              </Suspense>
+            </PrivateRoute>
+          }
+        />
         <Route
           path='/topup'
           element={