3.1 Xây dựng MainLayout (ok)

C:\Users\Administrator\Desktop\start\src\pages\Home\index.tsx

import React from "react";
import MainLayout from './../../layouts/MainLayout';
function Home() {
	return (
		<MainLayout>
			<h2 className="mb-4">Home</h2>
		</MainLayout>
	)
}
export default Home;

C:\Users\Administrator\Desktop\start\src\components\Header\index.tsx

import React from 'react';
function Header() {
	return (
		<header className="d-flex bg-light justify-content-between p-3 shadow-sm">
			<button className="btn btn-primary">
        <svg  width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
				  <path fillRule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
				</svg>
      </button>
      <span className="LogoutButton">Logout</span>
		</header>
	)
}
export default Header;

C:\Users\Administrator\Desktop\start\src\components\SideNav\index.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import home from './../../assets/images/home.svg'
import list from './../../assets/images/list.svg'
function SideNav() {
	return (
		<nav className="navi close">
			<h3 className="text-center w-100 mt-3">
        <a href="https://xdevclass.com/" target="_blank" rel="noopener noreferrer" className="text-white d-block">Visit website X</a>
      </h3>
      <ul className="list-unstyled mb-5">
      	<li>
          <NavLink exact to="/"> <img src={home} alt="" /> <span>Home</span></NavLink>
        </li>
        <li>
          <NavLink to="/product"><img src={list} alt="" /><span>Product</span></NavLink>
        </li>
      </ul>
		</nav>
	)
}
export default SideNav;

C:\Users\Administrator\Desktop\start\src\layouts\MainLayout.tsx

import React, { ReactNode } from 'react';
import Header from './../components/Header';
import SideNav from './../components/SideNav';
interface Props {
  children: ReactNode
}
export default function MainLayout(props: Props) {
  const { children } = props;
  return (
    <div className="wrapper d-flex align-items-stretch">
      <SideNav />
      <main className="flex-grow-1 mw-100 overflow-auto min-vh-100">
        <Header />
        <div className="content mt-3 p-3">{children}</div>
      </main>
    </div>
  )
}

C:\Users\Administrator\Desktop\start\src\index.css

#login {
  width: 450px;
  margin-top: 100px;
  margin-right: auto;
  margin-left: auto;
}
.LogoutButton:hover {
  cursor: pointer;
  color: #dc3545;
}
.navi {
  min-width: 270px;
  max-width: 270px;
  background: #3e64ff;
  color: #fff;
  display: block;
}
.navi img {
  width: 15px;
  height:15px;
  margin-right: 15px;
}
.navi a {
  display: block;
  color: #fff;
  font-weight: 900;
  padding: 10px 30px;
  transition: 0.3s;
}