Add comments, constants for path and tag element

hotel-management/src/App.tsx

@@ -1,22 +1,27 @@
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+
+// Components
 import AppLayout from './ui/AppLayout';
 import User from './pages/User';
 import Dashboard from './pages/Dashboard';
 import Room from './pages/Room';
 import NotFound from './pages/NotFound';
 
+// Constants
+import * as PATH from './constants/path';
+
 function App() {
   return (
     <>
       <BrowserRouter>
         <Routes>
           <Route element={<AppLayout />}>
-            <Route index element={<Navigate replace to="user" />} />
-            <Route path="dashboard" element={<Dashboard />} />
-            <Route path="user" element={<User />} />
-            <Route path="room" element={<Room />} />
+            <Route index element={<Navigate replace to={PATH.USER} />} />
+            <Route path={PATH.DASHBOARD} element={<Dashboard />} />
+            <Route path={PATH.USER} element={<User />} />
+            <Route path={PATH.ROOM} element={<Room />} />
           </Route>
-          <Route path="*" element={<NotFound />} />
+          <Route path={PATH.OTHER_PATH} element={<NotFound />} />
         </Routes>
       </BrowserRouter>
     </>

hotel-management/src/constants/path.ts

@@ -0,0 +1,4 @@
+export const DASHBOARD: string = '/dashboard';
+export const USER: string = '/user';
+export const ROOM: string = '/room';
+export const OTHER_PATH: string = '*';

hotel-management/src/ui/AppLayout.tsx

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
+import { Outlet } from 'react-router-dom';
+
+// Components
 import Header from './Header';
 import Sidebar from './Sidebar';
-import { Outlet } from 'react-router-dom';
 
 const StyledAppLayout = styled.div`
   display: grid;

hotel-management/src/ui/Header.tsx

@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+
+// Components
 import HeaderMenu from './HeaderMenu';
 
 const StyledHeader = styled.header`

hotel-management/src/ui/HeaderMenu.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
-import ButtonIcon from './ButtonIcon';
 import { IoPersonCircleOutline } from 'react-icons/io5';
 import { HiOutlineLogout } from 'react-icons/hi';
 
+// Components
+import ButtonIcon from './ButtonIcon';
+
 const StyledHeaderMenu = styled.ul`
   display: flex;
   gap: 10px;

hotel-management/src/ui/Nav.tsx

@@ -4,7 +4,7 @@ import { MdSpaceDashboard } from 'react-icons/md';
 import { HiUsers } from 'react-icons/hi2';
 import { BsHouseDoorFill } from 'react-icons/bs';
 
-const StyledNav = styled.div`
+const StyledNav = styled.nav`
   margin-top: 70px;
   display: flex;
   flex-direction: column;

hotel-management/src/ui/Sidebar.tsx

@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+
+// Components
 import Nav from './Nav';
 
 const StyledSidebar = styled.aside`