xxxxxxxxxx1
<!-- Sidenav -->2
<nav3
data-mdb-sidenav-init4
id="nav-side-1"5
class="sidenav bg-light"6
data-mdb-mode="over"7
data-mdb-hidden="false"8
data-mdb-scroll-container="#scrollContainer"9
>10
<div class="mt-4">11
<div id="header-content" class="ps-3">12
<img13
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(23).webp"14
alt="Avatar"15
class="rounded-circle img-fluid mb-3"16
style="max-width: 50px;"17
/>18
19
<h4>20
<span style="white-space: nowrap;">dssddssd</span>21
</h4>22
<p>ann_s@mdbootstrap.com</p>23
</div>24
<hr class="mb-0" />25
</div>26
<div id="scrollContainer">27
<ul class="sidenav-menu">28
<li class="sidenav-item">29
<a class="sidenav-link" href="/">30
<i class="fas fa-envelope fa-fw me-3"></i>Inbox</a31
>32
</li>33
<li class="sidenav-item">34
<a class="sidenav-link">35
<i class="fas fa-paper-plane fa-fw me-3"></i>Outbox</a36
>37
</li>38
<li class="sidenav-item">39
<a class="sidenav-link">40
<i class="fas fa-address-book fa-fw me-3"></i>Contacts</a41
>42
<ul class="sidenav-collapse">43
<li class="sidenav-item">44
<a class="sidenav-link">Family</a>45
</li>46
<li class="sidenav-item">47
<a class="sidenav-link" href="/previews/mdb-ui-kit/sidenav/2.html">Friends</a>48
</li>49
<li class="sidenav-item">50
<a class="sidenav-link">Work</a>51
</li>52
</ul>53
</li>54
<li class="sidenav-item">55
<a class="sidenav-link">56
<i class="fas fa-file fa-fw me-3"></i>Drafts</a57
>58
</li>59
<li class="sidenav-item">60
<a class="sidenav-link">61
<i class="fas fa-heart fa-fw me-3"></i>Favourites</a62
>63
</li>64
<li class="sidenav-item">65
<a class="sidenav-link">66
<i class="fas fa-star fa-fw me-3"></i>Starred</a67
>68
</li>69
<li class="sidenav-item">70
<a class="sidenav-link">71
<i class="fas fa-trash fa-fw me-3"></i>Trash</a72
>73
</li>74
<li class="sidenav-item">75
<a class="sidenav-link">76
<i class="fas fa-ban fa-fw me-3"></i>Spam</a77
>78
</li>79
<li class="sidenav-item">80
<a class="sidenav-link"81
><i class="fas fa-tag fa-fw me-3"></i>Categories</a82
>83
<ul class="sidenav-collapse">84
<li class="sidenav-item">85
<a class="sidenav-link">Social</a>86
</li>87
<li class="sidenav-item">88
<a class="sidenav-link">Notifications</a>89
</li>90
<li class="sidenav-item">91
<a class="sidenav-link">Recent</a>92
</li>93
<li class="sidenav-item">94
<a class="sidenav-link">Uploads</a>95
</li>96
<li class="sidenav-item">97
<a class="sidenav-link">Backups</a>98
</li>99
<li class="sidenav-item">100
<a class="sidenav-link">Offers</a>101
</li>102
</ul>103
</li>104
<li class="sidenav-item">105
<a class="sidenav-link">106
<i class="fas fa-sticky-note fa-fw me-3"></i>Notes</a107
>108
</li>109
<li class="sidenav-item">110
<a class="sidenav-link">111
<i class="fas fa-user-circle fa-fw me-3"></i>Personal</a112
>113
</li>114
<li class="sidenav-item">115
<a class="sidenav-link">116
<i class="fas fa-ellipsis-h fa-fw me-3"></i>More</a117
>118
</li>119
</ul>120
<hr class="m-0" />121
<ul class="sidenav-menu">122
<li class="sidenav-item">123
<a class="sidenav-link">124
<i class="fas fa-cogs fa-fw me-3"></i>Settings</a125
>126
</li>127
<li class="sidenav-item">128
<a class="sidenav-link">129
<i class="fas fa-user fa-fw me-3"></i>Profile</a130
>131
</li>132
<li class="sidenav-item">133
<a class="sidenav-link">134
<i class="fas fa-shield-alt fa-fw me-3"></i>Privacy</a135
>136
</li>137
<li class="sidenav-item">138
<a class="sidenav-link">139
<i class="fas fa-user-astronaut fa-fw me-3"></i>Log out</a140
>141
</li>142
</ul>143
</div>144
<div class="text-center" style="height: 100px;">145
<hr class="mb-4 mt-0" />146
<p>MDBootstrap.com</p>147
</div>148
</nav>149
<!-- Sidenav -->150
151
<!-- Content -->152
<div class="mdb-page-content text-center page-intro bg-light">153
<div class="text-center py-5">154
<h3 class="my-5">Resize to change the mode</h3>155
<div>156
<img class="rounded" src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(53).webp" />157
</div>158
<button159
data-mdb-ripple-init160
id="toggler"161
class="btn btn-dark mt-5"162
data-mdb-toggle="sidenav"163
data-mdb-target="#nav-side-1"164
>165
<i class="fas fa-bars"></i>166
</button>167
</div>168
</div>169
<!-- Content -->xxxxxxxxxx1
.page-intro {2
background-color: white;3
width: 100vw;4
min-height: 100vh;5
}6
7
img {8
max-width: 80%;9
}10
11
.mdb-page-content {12
padding-left: 240px;13
transition: padding 0.3s linear;14
}15
16
#toggler {17
display: none;18
}19
20
@media (max-width: 992px) {21
.mdb-page-content {22
padding-left: 0px;23
}24
25
#toggler {26
display: unset;27
}28
29
.mask img {30
width: 100%;31
}32
33
.sidenav[data-mdb-hidden='false'] {34
transform: translateX(-100%);35
}36
}xxxxxxxxxx1
const sidenav = document.getElementById('nav-side-1');2
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);3
4
const sidenavul = sidenav.querySelectorAll('ul');5
const sidenavli = sidenav.querySelectorAll('ul li');6
const sidenava = sidenav.querySelectorAll('ul li a');7
8
let innerWidth = null;9
10
const setMode = (e) => {11
// Check necessary for Android devices12
if (window.innerWidth === innerWidth) {13
return;14
}15
16
innerWidth = window.innerWidth;17
18
if (window.innerWidth < 992) {19
sidenavInstance.changeMode('over');20
sidenavInstance.hide();21
sidenav.classList.add('sidenav');22
sidenav.classList.remove('navbar');23
sidenavul.classList.add('sidenav-menu');24
sidenavul.classList.remove('navbar-nav');25
sidenavli.classList.add('sidenav-item');26
sidenavli.classList.remove('nav-item');27
sidenava.classList.add('sidenav-link');28
sidenava.classList.remove('nav-link');29
} else {30
sidenav.classList.remove('sidenav');31
sidenav.classList.add('navbar');32
sidenavul.classList.remove('sidenav-menu');33
sidenavul.classList.add('navbar-nav');34
sidenavli.classList.remove('sidenav-item');35
sidenavli.classList.add('nav-item');36
sidenava.classList.remove('sidenav-link');37
sidenava.classList.add('nav-link');38
sidenavInstance.dispose(); 39
}40
};41
42
setMode();43
44
// Event listeners45
window.addEventListener('resize', setMode); Console errors: 0