<div className='hpad'>

<section id="body-pd" className={show ? 'body-pd' : null}>

<header className={`header ${show ? 'body-pd' : null}`}
id="header">
<div className="header__toggle">
<i className={`bx bx-menu ${show ? 'bx-x' : null}`}
id="header-toggle" onClick={() => {
setShow(!show)
}}></i>
</div>
</header>
<div className={`l-navbar show_des ${show ? 'show' : null}`}
id="nav-bar">
<nav className="nav">
<div>
<div className="nav__link" style={{ textDecoration:
'none' }} >
{/* Small and second Full*/}
{
show
? <span className="nav__icon"><img
src={loader_ppsuLogo} alt="ppsu" width={25} /></span>
: <span className="nav__logo-name"><img
src={ppsuLogo} alt="ppsu" width={120} /></span>
}
</div>
<div className="nav__list">
<NavLink to="/" className="nav__link"
style={{ textDecoration: 'none' }}>
<i className={`nav__icon bx iocn_name`}
style={{ marginTop: '1.5px' }}></i>
<span className="nav__name">About</span>
</NavLink>
</div>
</div>
<Link to='#' className="nav__link"
style={{ textDecoration: 'none' }}>
<i className='bx bx-log-out nav__icon' ></i>
<span className="nav__name">Log Out</span>
</Link>
</nav>
</div>
</section>
</div>

/*===== GOOGLE FONTS =====*/

/* @import url("https://fonts.googleapis.com/css2?
family=Nunito:wght@400;600;700&display=swap"); */

/*===== VARIABLES CSS =====*/

:root {
--header-height: 2rem;
--nav-width: 68px;

/*===== Colors =====*/

--first-color: #F2F5FF;
--first-color-light: #606060;
--white-color: #FFFFFF;
--hover: black;

/*===== z index =====*/

--z-fixed: 100;
}

/*===== BASE =====*/

*,
::before,
::after {
box-sizing: border-box;
}

body {
position: relative;
margin: var(--header-height) 0 0 0;
transition: .5s;
}

a {
text-decoration: none;
}

/*===== HEADER =====*/

.hpad .header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s;
}

.hpad .header__toggle {
color: var(--hover);
font-size: 1.5rem;
cursor: pointer;
}

.hpad .header__img {
width: 35px;
 height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}

.hpad .header__img img {

width: 40px;
}

/*===== NAV =====*/

.hpad .l-navbar {
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100%;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed);
}

.hpad .nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}

.hpad .nav__logo,
.hpad .nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
}

.hpad .nav__logo {
margin-bottom: 2rem;
}

.hpad .nav__logo-icon {
font-size: 1.25rem;
color: var(--white-color);
}

.hpad .nav__logo-name {
color: var(--white-color);
font-weight: 700;
}

.hpad .nav__list {
margin-top: 2rem;
}
.hpad .nav__link {
position: relative;
color: var(--first-color-light);
margin-bottom: .5rem;
transition: .3s;
}

.hpad .nav__link:hover {
color: var(--hover);
}

.hpad .nav__icon {
font-size: 1.25rem;
}

/*Show navbar movil*/

.hpad .show {
left: 0;
}

/*Add padding body movil*/

.hpad .body-pd {
padding-left: calc(var(--nav-width) + 1rem);
}

/*Active links*/
.hpad .active {
color: black;
}

.hpad .active::before {
content: '';
position: absolute;
left: 0;
width: 3px;
height: 32px;
background-color: black;
border-radius: 3px;
}

@media screen and (max-width: 1300px) {

.hpad .nav__logo-name img {
display: none;
}
}

/* ===== MEDIA QUERIES=====*/

@media screen and (min-width: 1300px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 12rem);
}

.hpad .header {
height: calc(var(--header-height) + 0.1rem);
 padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
}

.hpad .header__img {
width: 40px;
height: 40px;
}

.hpad .header__img img {

width: 45px;
}

.hpad .l-navbar {
left: 0;
padding: 1rem 1rem 0 0;
}

/*Show navbar desktop*/

/* .show {
width: calc(var(--nav-width) + 156px);
} */

.hpad .show_des {
width: calc(var(--nav-width) + 156px);
}

/*Add padding body desktop*/

.hpad .body-pd {
padding-left: calc(var(--nav-width) + 188px);
}
}

@media screen and (min-width: 1700px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 20rem);
}
}

@media screen and (min-width: 1800px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 25rem);
}
}

@media screen and (min-width: 1900px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 30rem);
}
}

@media screen and (min-width: 2000px) {

.main_container {
 margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 35rem);
}
}

@media screen and (min-width: 2100px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 40rem);
}
}

@media screen and (min-width: 2200px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 45rem);
}
}

@media screen and (min-width: 2300px) {

.main_container {
margin: calc(var(--header-height) + 1rem) 0 0 0;
margin-left: calc(var(--nav-width) + 50rem);
}
}

@media screen and (min-width: 2500px) {

.main_container {
justify-content: center;
}
}