feat(navigation): create template for navigation bar

src/App.tsx

@@ -1,17 +1,25 @@
 import { useEffect } from 'react';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
 import { HomeIcon } from '@heroicons/react/24/outline';
+import { AppSkeleton } from '@components';
 import { AppLayout, AuthLayout } from '@layouts';
 import { AuthPage, HomePage } from '@pages';
 import { useUserStore } from '@states';
-import { AppSkeleton } from '@components';
 
 export default function App() {
+  const navigate: NavigateFunction = useNavigate();
   const { userStatus, getUserData } = useUserStore();
 
   useEffect(() => {
     getUserData();
   }, [getUserData]);
 
+  useEffect(() => {
+    if (userStatus === 'SUCCESS') {
+      navigate('/home');
+    }
+  }, [userStatus, navigate]);
+
   if (userStatus === 'UNINIT' || userStatus === 'PENDING') {
     return <AppSkeleton />;
   }
@@ -27,10 +35,15 @@ export default function App() {
   return (
     <AppLayout
       menu={[
+        {
+          type: 'skeleton',
+          path: '/',
+          element: <AppSkeleton />
+        },
         {
           type: 'item',
           icon: <HomeIcon className='h-5 w-5' />,
-          path: '/',
+          path: '/home',
           name: 'Trang chủ',
           element: <HomePage />
         }

src/components/AppDrawer.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { Drawer } from '@material-tailwind/react';
+
+export const AppDrawer: Component<{
+  open: boolean;
+  children: ReactNode;
+  onClose: () => void;
+}> = ({ open, children, onClose }) => {
+  return (
+    <React.Fragment>
+      <Drawer open={open} className='p-0' onClose={onClose} size={256}>
+        {children}
+      </Drawer>
+    </React.Fragment>
+  );
+};

src/components/AppNavigation.tsx

@@ -0,0 +1,17 @@
+import { useMemo, useState } from 'react';
+import { AppDrawer } from './AppDrawer';
+//import { ToggleSidebarBtn } from "./ToggleSidebarBtn";
+
+// Tue's task in here. Feel free to be creative, not strict, you can do anything.
+export const AppNavigation: Component<{ menu: RouteMenu }> = ({ menu }) => {
+  const [openSidebar, setOpenSidebar] = useState<boolean>(true);
+  console.log(menu); // Do somthing with menu???
+
+  const SideMenu = useMemo(() => <></>, []);
+
+  return (
+    <AppDrawer open={openSidebar} onClose={() => setOpenSidebar(false)}>
+      {SideMenu}
+    </AppDrawer>
+  );
+};

src/components/index.ts

@@ -2,5 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './AppDrawer';
+export * from './AppNavigation';
 export * from './AppSkeleton';
 export * from './ToggleSidebarBtn';

src/layouts/AppLayout.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { AppNavigation } from '@components';
 
 export const AppLayout: Component<{ menu: RouteMenu }> = ({ menu }) => {
   const routeItems = useMemo(() => {
@@ -20,6 +21,7 @@ export const AppLayout: Component<{ menu: RouteMenu }> = ({ menu }) => {
 
   return (
     <div className='flex flex-col h-screen sm:min-h-screen'>
+      <AppNavigation menu={menu} />
       <div className='lg:p-4 flex-1 h-full'>
         <Routes>
           {routeItems.map((item) => (

src/pages/AuthPage.tsx

@@ -35,7 +35,7 @@ export const AuthPage = () => {
     try {
       await authService.login(data);
       await getUserData();
-      navigate('/');
+      navigate('/home');
     } catch (err) {
       const errorMessage = (err as ResponseError).message;
       toast.error(errorMessage);

src/pages/HomePage.tsx

@@ -1,3 +1,5 @@
+// Tan's task in here
+
 export function HomePage() {
   return <div>Đăng nhập thành công</div>;
 }

src/types/routeSetting.d.ts

@@ -19,6 +19,12 @@ type LogoutBtn = BaseRoute & {
   onClick: () => void;
 };
 
-type RouteMenuItem = RouteItem | RoutesList | 'divider' | LogoutBtn;
+type RouteSkeleton = {
+  type: 'skeleton';
+  path: string;
+  element: React.ReactElement;
+};
+
+type RouteMenuItem = RouteItem | RoutesList | 'divider' | RouteSkeleton | LogoutBtn;
 
 type RouteMenu = RouteMenuItem[];