diff --git a/package-lock.json b/package-lock.json
index 1a624e5..e895457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
"query-string": "^9.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-icons": "^5.3.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"sass": "^1.75.0",
@@ -17305,6 +17306,14 @@
}
}
},
+ "node_modules/react-icons": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+ "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 58036ed..0151ff4 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"query-string": "^9.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-icons": "^5.3.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"sass": "^1.75.0",
diff --git a/src/components/Drawers/RightSidebarForStudent.jsx b/src/components/Drawers/RightSidebarForStudent.jsx
new file mode 100644
index 0000000..265dde7
--- /dev/null
+++ b/src/components/Drawers/RightSidebarForStudent.jsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import {
+ Box,
+ VStack,
+ Text,
+ Image,
+ Avatar,
+ Drawer,
+ DrawerBody,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerOverlay,
+ DrawerContent,
+ Skeleton,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+import styles from './Drawer.module.scss';
+
+import { useNavigate } from 'react-router-dom';
+import {
+ MdOutlineAssignment,
+ MdOutlineShoppingBag,
+ MdNotificationsNone,
+ MdLogout
+} from 'react-icons/md';
+import { PiCertificate } from "react-icons/pi";
+import { IoBookOutline } from "react-icons/io5";
+import MenuBookOutlinedIcon from '@mui/icons-material/MenuBookOutlined';
+import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';
+import ShoppingBagOutlinedIcon from '@mui/icons-material/ShoppingBagOutlined';
+import WorkspacePremiumOutlinedIcon from '@mui/icons-material/WorkspacePremiumOutlined';
+import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
+import LogoutIcon from '@mui/icons-material/Logout';
+import config from '~/config';
+import { isLoggedIn, removeLoginResponse } from '~/utils/authUtils';
+import SidebarItem from '~/components/Drawers/SidebarItem';
+
+DrawerRightDefault.propTypes = {
+ isOpen: PropTypes.bool,
+ onClose: PropTypes.func,
+ user: PropTypes.object,
+ isUserLoading: PropTypes.bool,
+};
+
+DrawerRightDefault.defaultProps = {
+ user: {
+ username: 'john',
+ fullName: 'john',
+ email: 'john@gmail.com',
+ phoneNumber: '+84972640891',
+ bio: 'A student.',
+ gender: 'MALE',
+ dob: '2024-08-05',
+ role: 'ADMIN',
+ createdAt: '2024-08-05T13:47:06.794Z',
+ avatarSrc: '',
+ },
+};
+
+function DrawerRightDefault(props) {
+ const user = props.user;
+ const navigate = useNavigate();
+
+ const handleLogout = () => {
+ removeLoginResponse();
+ navigate(config.routes.login);
+ };
+
+ return (
+
+
+
+
+ navigate(config.routes.user_profile_edit)}
+ _hover={{
+ transform: 'scale(1.05)',
+ transition: 'transform 0.2s ease',
+ backgroundColor: '#f8f8f8',
+ cursor: 'pointer',
+ }}
+ >
+
+ {!isLoggedIn() || props?.isUserLoading ? (
+
+ ) : (
+ {user?.fullName}
+ )}
+
+
+
+
+
+ navigate(config.routes.course_management_for_student)}
+ />
+
+ navigate('')}
+ />
+
+ navigate('')}
+ />
+
+ navigate('')}
+ />
+
+ navigate(config.routes.notifications_for_student)}
+ />
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DrawerRightDefault;
diff --git a/src/components/Drawers/SidebarItem.jsx b/src/components/Drawers/SidebarItem.jsx
new file mode 100644
index 0000000..75e1374
--- /dev/null
+++ b/src/components/Drawers/SidebarItem.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+const SidebarItem = ({ icon: Icon, text, isActive, handleClick, size = 22 }) => {
+ return (
+
+ {Icon && }
+ {text}
+
+ );
+};
+
+export default SidebarItem;
diff --git a/src/components/Navbars/HomeNavbar/HomeNavbar.jsx b/src/components/Navbars/HomeNavbar/HomeNavbar.jsx
index f961d9c..c7d79c9 100644
--- a/src/components/Navbars/HomeNavbar/HomeNavbar.jsx
+++ b/src/components/Navbars/HomeNavbar/HomeNavbar.jsx
@@ -7,8 +7,11 @@ import DrawerRightDefault from '~/components/Drawers/DrawerRightDefault';
import AuthService from '~/services/authService';
import { isLoggedIn } from '~/utils/authUtils';
import useCustomToast from '~/hooks/useCustomToast';
+import { useNavigate } from 'react-router-dom';
+import config from '~/config';
function HomeNavbar(props) {
+ const navigate = useNavigate();
const { errorToast } = useCustomToast();
const { isOpen, onOpen, onClose } = useDisclosure();
const [user, setUser] = useState(null);
@@ -37,7 +40,7 @@ function HomeNavbar(props) {
-