refactor: Reorganize sidebar navigation and add personal settings route

Author: Calcium-Ion

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={

web/src/components/PersonalSetting.js

@@ -393,7 +393,7 @@ const PersonalSetting = () => {
                             </div>
                         </div>
                     </Modal>
-                    <div style={{marginTop: 20}}>
+                    <div>
                         <Card
                             title={
                                 <Card.Meta