xxxxxxxxxx1
<header>2
<!-- Sidenav -->3
<nav id="sidenav-1" class="sidenav bg-dark text-white pt-5" style="--mdb-bg-opacity: 0.7;" role="navigation" data-mdb-mode="side" data-mdb-hidden="true" data-mdb-accordion="true" data-mdb-color="success">4
<ul class="sidenav-menu mt-4">5
<li class="sidenav-item">6
<a class="sidenav-link" href=".">7
<i class="fas fa-home fa-2x me-3" style="width:50px"></i><span>Home</span>8
</a>9
</li>10
<li class="sidenav-item">11
<a class="sidenav-link" href=".">12
<i class="fas fa-chart-line fa-2x me-3" style="width:50px"></i><span>Dashboard</span>13
</a>14
</li>15
<li class="sidenav-item">16
<a class="sidenav-link" href=".">17
<i class="fas fa-calendar-check fa-2x me-3" style="width:50px"></i><span>Appointment</span></a>18
</li>19
<li class="sidenav-item">20
<a class="sidenav-link">21
<i class="fas fa-file-medical fa-2x me-3" style="width:50px"></i><span>EMR</span></a>22
</li>23
<li class="sidenav-item">24
<a class="sidenav-link" href=".">25
<i class="fas fa-flask fa-2x me-3" style="width:50px"></i><span>Laboratory</span></a>26
</li>27
<li class="sidenav-item">28
<a class="sidenav-link" href=".">29
<i class="fas fa-radiation fa-2x me-3" style="width:50px"></i><span>Radiology</span></a>30
</li>31
<li class="sidenav-item">32
<a class="sidenav-link">33
<i class="fas fa-pills fa-2x me-3" style="width:50px"></i><span>Medication</span></a>34
</li>35
<li class="sidenav-item">36
<a class="sidenav-link">37
<i class="far fa-credit-card fa-2x me-3" style="width:50px"></i><span>Payment</span></a>38
</li>39
<li class="sidenav-item">40
<a class="sidenav-link">41
<i class="fas fa-cogs fa-2x me-3" style="width:50px"></i><span>Settings</span></a>42
</li>43
<li class="sidenav-item">44
<a class="sidenav-link">45
<i class="fas fa-globe fa-2x me-3" style="width:50px"></i><span>Contact Us</span></a>46
</li>47
</ul>48
</nav>49
<!-- Sidenav -->50
<!-- Navbar -->51
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-teal fixed-top text-white">52
<!-- Container wrapper -->53
<div class="container-fluid">54
<a href=".">55
</a>56
<a class="navbar-brand text-white" href="/home/index">Logo</a>57
<button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" class="btn shadow-0 p-0 me-3 d-block d-xxl-none" aria-controls="#sidenav-1" aria-haspopup="true">58
<i class="fas fa-bars fa-lg" style='color: white'></i>59
</button>60
<button id="slim-toggler" class="btn shadow-0 p-0 me-3 d-none d-xxl-block">61
<i class="fas fa-bars fa-lg" style='color: white'></i>62
</button>63
64
65
<!-- Right links -->66
<ul class="navbar-nav ms-auto d-flex flex-row">67
<!-- Avatar -->68
69
<li class="nav-item dropdown">70
Login User71
</li>72
</ul>73
</div>74
<!-- Container wrapper -->75
</nav>76
<!-- Navbar -->77
</header>78
xxxxxxxxxx1
html {2
font-size: 14px;3
}4
5
@media (min-width: 768px) {6
html {7
font-size: 16px;8
}9
}10
11
html {12
position: relative;13
min-height: 100%;14
}15
16
body {17
margin-bottom: 60px;18
background-color: #fbfbfb;19
}20
21
.navbar {22
padding-left: 0 !important;23
z-index: 1041;24
}25
26
.navbar-teal {27
background-color: #20c997;28
}29
30
.btn {31
text-transform: unset !important;32
}xxxxxxxxxx1
const sidenav = document.getElementById("sidenav-1");2
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);3
4
let innerWidth = null;5
6
const setMode = (e) => {7
8
if (window.innerWidth === innerWidth) {9
return;10
}11
12
innerWidth = window.innerWidth;13
14
if (window.innerWidth < 992) {15
sidenavInstance.update({slimCollapsed: false, slim: true})16
sidenavInstance.changeMode("over");17
sidenavInstance.hide();18
} else {19
sidenavInstance.update({slim:true, slimCollapsed: true})20
sidenavInstance.changeMode("push");21
sidenavInstance.show();22
}23
};24
25
setMode();26
27
28
window.addEventListener("resize", setMode);29
30
document.getElementById('slim-toggler').addEventListener('click', () => {31
sidenavInstance.toggleSlim();32
}); Console errors: 0