Refactor code

hotel-management/src/components/AppLayout.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Outlet } from 'react-router-dom';
+
+// Components
+import Header from './Header';
+import Sidebar from './Sidebar';
+
+const StyledAppLayout = styled.div`
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+`;
+
+const Main = styled.main`
+  border: 1px solid var(--border-color);
+
+  overflow: scroll;
+`;
+
+const AppLayout = () => {
+  return (
+    <StyledAppLayout>
+      <Header />
+      <Sidebar />
+      <Main>
+        <Outlet />
+      </Main>
+    </StyledAppLayout>
+  );
+};
+
+export default AppLayout;

hotel-management/src/components/Header.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+// Components
+import HeaderMenu from './HeaderMenu';
+
+const StyledHeader = styled.header`
+  border-bottom: 1px solid var(--border-color);
+  padding: 20px 40px;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 30px;
+`;
+
+const Header = () => {
+  return (
+    <StyledHeader>
+      <p>Hi, Admin!</p>
+      <HeaderMenu />
+    </StyledHeader>
+  );
+};
+
+export default Header;

hotel-management/src/components/HeaderMenu.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+// Components
+import { IoPersonCircleOutline } from 'react-icons/io5';
+import { HiOutlineLogout } from 'react-icons/hi';
+import ButtonIcon from '../commons/styles/ButtonIcon';
+
+const StyledHeaderMenu = styled.ul`
+  display: flex;
+  gap: 10px;
+`;
+
+const HeaderMenu = () => {
+  return (
+    <StyledHeaderMenu>
+      <ButtonIcon>
+        <IoPersonCircleOutline />
+      </ButtonIcon>
+      <ButtonIcon>
+        <HiOutlineLogout />
+      </ButtonIcon>
+    </StyledHeaderMenu>
+  );
+};
+
+export default HeaderMenu;

hotel-management/src/components/Nav.tsx

@@ -0,0 +1,60 @@
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+// Components
+import { MdSpaceDashboard } from 'react-icons/md';
+import { HiUsers } from 'react-icons/hi2';
+import { BsHouseDoorFill } from 'react-icons/bs';
+
+const StyledNav = styled.nav`
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 15px;
+  border-radius: var(--radius-md);
+  transition: all 0.3s;
+
+  & svg {
+    width: 25px;
+    height: 25px;
+    transition: all 0.3s;
+  }
+
+  &:hover,
+  &.active {
+    background-color: var(--hover-background-color);
+  }
+
+  &:hover svg,
+  &.active svg {
+    color: var(--primary-color);
+  }
+`;
+
+const Nav = () => {
+  return (
+    <StyledNav>
+      <StyledNavLink to={'/dashboard'}>
+        <MdSpaceDashboard />
+        <span>Dashboard</span>
+      </StyledNavLink>
+      <StyledNavLink to={'/user'}>
+        <HiUsers />
+        <span>User</span>
+      </StyledNavLink>
+      <StyledNavLink to={'/room'}>
+        <BsHouseDoorFill />
+        <span>Room</span>
+      </StyledNavLink>
+    </StyledNav>
+  );
+};
+
+export default Nav;

hotel-management/src/components/Sidebar.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+// Components
+import Nav from './Nav';
+
+const StyledSidebar = styled.aside`
+  padding: 50px 20px;
+
+  grid-row: 1 / 3;
+  border: 1px solid var(--border-color);
+`;
+
+const Heading = styled.h1`
+  font-size: var(--fs-md);
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--primary-color);
+`;
+
+const Sidebar = () => {
+  return (
+    <StyledSidebar>
+      <Heading>Hotel Management</Heading>
+      <Nav />
+    </StyledSidebar>
+  );
+};
+
+export default Sidebar;