60 lines
2.3 KiB
React
60 lines
2.3 KiB
React
|
import React, { useState } from 'react';
|
||
|
|
import { Nav, Button } from 'react-bootstrap';
|
||
|
|
import { NavLink } from 'react-router-dom';
|
||
|
|
import avatar from '../../../assets/images/default-avatar.jpg';
|
||
|
|
import { API_URL } from '../../../utils/Constant';
|
||
|
|
|
||
|
|
function validName(fullName) {
|
||
|
|
const nameArray = fullName.split(" ");
|
||
|
|
const firstTwoWords = nameArray.slice(0, 2).join(" ");
|
||
|
|
|
||
|
|
return firstTwoWords;
|
||
|
|
}
|
||
|
|
|
||
|
|
const UserSideNav = () => {
|
||
|
|
const { username, picture } = JSON.parse(localStorage.getItem('userData'));
|
||
|
|
|
||
|
|
const [isMinimized, setIsMinimized] = useState(false);
|
||
|
|
const toggleMinimize = () => {
|
||
|
|
setIsMinimized(!isMinimized);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav id="sidebarMenu" className={`col-md-3 col-lg-2 sticky-top d-none d-md-block bg-blue sidebar ${isMinimized ? 'minimized' : ''}`}>
|
||
|
|
<Button variant='white-outline-blue' className="toggle-sidebar" onClick={toggleMinimize}>
|
||
|
|
<i className="bi bi-chevron-double-left"></i>
|
||
|
|
</Button>
|
||
|
|
<div className="position-sticky pt-4">
|
||
|
|
<div className="d-flex flex-column items-center mb-3 border-bottom">
|
||
|
|
<img src={picture ? `${API_URL}/uploads/avatar/${picture}` : avatar} alt=""
|
||
|
|
className="img-avatar"
|
||
|
|
height={72} width={72}
|
||
|
|
style={{objectFit:'cover'}}
|
||
|
|
/>
|
||
|
|
<h6 className='display-username text-white text-center truncate truncate-2 my-3'>{validName(username)}</h6>
|
||
|
|
</div>
|
||
|
|
<Nav className="flex-column">
|
||
|
|
<Nav.Link as={NavLink} to="home" className="mb-2 text-white rounded">
|
||
|
|
<i className="bi bi-house me-2"></i>
|
||
|
|
<span className='text-truncate'>Home</span>
|
||
|
|
</Nav.Link>
|
||
|
|
<Nav.Link as={NavLink} to="module" className="mb-2 text-white rounded">
|
||
|
|
<i className="bi bi-book-half me-2"></i>
|
||
|
|
<span className='text-truncate'>Learning</span>
|
||
|
|
</Nav.Link>
|
||
|
|
<Nav.Link as={NavLink} to="history" className="mb-2 text-white rounded">
|
||
|
|
<i className="bi bi-clock-history me-2"></i>
|
||
|
|
<span className='text-truncate'>History</span>
|
||
|
|
</Nav.Link>
|
||
|
|
<Nav.Link as={NavLink} to="setting" className="mb-2 text-white rounded">
|
||
|
|
<i className="bi bi-gear-fill me-2"></i>
|
||
|
|
<span className='text-truncate'>Setting</span>
|
||
|
|
</Nav.Link>
|
||
|
|
</Nav>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UserSideNav;
|