xxxxxxxxxx1
2
<!-- Navbar -->3
<nav class="navbar navbar-expand-lg navbar-light bg-white">4
<div class="container-fluid">5
<button6
class="navbar-toggler"7
type="button"8
data-mdb-toggle="collapse"9
data-mdb-target="#navbarExample01"10
aria-controls="navbarExample01"11
aria-expanded="false"12
aria-label="Toggle navigation"13
>14
<i class="fas fa-bars"></i>15
</button>16
<div class="collapse navbar-collapse" id="navbarExample01">17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<li class="nav-item active">19
<a class="nav-link" aria-current="page" href="#">Home</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="#">Features</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="#">Pricing</a>26
</li>27
<li class="nav-item">28
<a class="nav-link" href="#">About</a>29
</li>30
</ul>31
</div>32
</div>33
</nav>34
<!-- Navbar -->35
36
<main class="position-relative" id="main-content">37
<!-- Sidenav -->38
<nav39
id="full-screen-example"40
class="sidenav bg-light"41
data-mdb-color="dark"42
data-mdb-position="absolute"43
data-mdb-mode="side"44
data-mdb-hidden="false"45
data-mdb-scroll-container="#scrollContainer"46
>47
<div class="mt-4">48
<div id="header-content" class="ps-3">49
<img50
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(23).webp"51
alt="Avatar"52
class="rounded-circle img-fluid mb-3"53
style="max-width: 50px;"54
/>55
56
<h4>57
<span style="white-space: nowrap;">Ann Smith</span>58
</h4>59
<p>ann_s@mdbootstrap.com</p>60
</div>61
<hr class="mb-0" />62
</div>63
<div id="scrollContainer">64
<ul class="sidenav-menu">65
<li class="sidenav-item">66
<a class="sidenav-link" href="/">67
<i class="fas fa-envelope fa-fw me-3"></i>Inbox</a68
>69
</li>70
<li class="sidenav-item">71
<a class="sidenav-link">72
<i class="fas fa-paper-plane fa-fw me-3"></i>Outbox</a73
>74
</li>75
<li class="sidenav-item">76
<a class="sidenav-link">77
<i class="fas fa-address-book fa-fw me-3"></i>Contacts</a78
>79
<ul class="sidenav-collapse">80
<li class="sidenav-item">81
<a class="sidenav-link">Family</a>82
</li>83
<li class="sidenav-item">84
<a class="sidenav-link" href="/previews/mdb-ui-kit/sidenav/2.html">Friends</a>85
</li>86
<li class="sidenav-item">87
<a class="sidenav-link">Work</a>88
</li>89
</ul>90
</li>91
<li class="sidenav-item">92
<a class="sidenav-link">93
<i class="fas fa-file fa-fw me-3"></i>Drafts</a94
>95
</li>96
<li class="sidenav-item">97
<a class="sidenav-link">98
<i class="fas fa-heart fa-fw me-3"></i>Favourites</a99
>100
</li>101
<li class="sidenav-item">102
<a class="sidenav-link">103
<i class="fas fa-star fa-fw me-3"></i>Starred</a104
>105
</li>106
<li class="sidenav-item">107
<a class="sidenav-link">108
<i class="fas fa-trash fa-fw me-3"></i>Trash</a109
>110
</li>111
<li class="sidenav-item">112
<a class="sidenav-link">113
<i class="fas fa-ban fa-fw me-3"></i>Spam</a114
>115
</li>116
<li class="sidenav-item">117
<a class="sidenav-link"118
><i class="fas fa-tag fa-fw me-3"></i>Categories</a119
>120
<ul class="sidenav-collapse">121
<li class="sidenav-item">122
<a class="sidenav-link">Social</a>123
</li>124
<li class="sidenav-item">125
<a class="sidenav-link">Notifications</a>126
</li>127
<li class="sidenav-item">128
<a class="sidenav-link">Recent</a>129
</li>130
<li class="sidenav-item">131
<a class="sidenav-link">Uploads</a>132
</li>133
<li class="sidenav-item">134
<a class="sidenav-link">Backups</a>135
</li>136
<li class="sidenav-item">137
<a class="sidenav-link">Offers</a>138
</li>139
</ul>140
</li>141
<li class="sidenav-item">142
<a class="sidenav-link">143
<i class="fas fa-sticky-note fa-fw me-3"></i>Notes</a144
>145
</li>146
<li class="sidenav-item">147
<a class="sidenav-link">148
<i class="fas fa-user-circle fa-fw me-3"></i>Personal</a149
>150
</li>151
<li class="sidenav-item">152
<a class="sidenav-link">153
<i class="fas fa-ellipsis-h fa-fw me-3"></i>More</a154
>155
</li>156
</ul>157
<hr class="m-0" />158
<ul class="sidenav-menu">159
<li class="sidenav-item">160
<a class="sidenav-link">161
<i class="fas fa-cogs fa-fw me-3"></i>Settings</a162
>163
</li>164
<li class="sidenav-item">165
<a class="sidenav-link">166
<i class="fas fa-user fa-fw me-3"></i>Profile</a167
>168
</li>169
<li class="sidenav-item">170
<a class="sidenav-link">171
<i class="fas fa-shield-alt fa-fw me-3"></i>Privacy</a172
>173
</li>174
<li class="sidenav-item">175
<a class="sidenav-link">176
<i class="fas fa-user-astronaut fa-fw me-3"></i>Log out</a177
>178
</li>179
</ul>180
</div>181
<div class="text-center" style="height: 100px;">182
<hr class="mb-4 mt-0" />183
<p>MDBootstrap.com</p>184
</div>185
</nav>186
<!-- Sidenav -->187
188
<!-- Content -->189
<div class="mdb-page-content text-center page-intro bg-light">190
<div class="text-center py-5">191
<h3 class="my-5">Resize to change the mode</h3>192
<div>193
<img class="rounded" src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(53).webp" />194
</div>195
<button196
id="toggler"197
class="btn btn-dark mt-5"198
data-mdb-toggle="sidenav"199
data-mdb-target="#full-screen-example"200
>201
<i class="fas fa-bars"></i>202
</button>203
</div>204
</div>205
<!-- Content -->206
</main>207
<!-- Copyright -->208
<footer class="text-center bg-light p-3">209
© 2020 Copyright:210
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>211
</footer>212
<!-- Copyright -->213
xxxxxxxxxx1
img {2
max-width: 80%;3
}4
5
.mdb-page-content {6
padding-left: 240px;7
transition: padding 0.3s linear;8
}9
10
body {11
overflow: hidden;12
height: 100vh;13
display: flex;14
flex-direction: column;15
align-items: stretch;16
}17
18
#main-content {19
flex-grow: 1;20
}21
22
header, main, footer {23
flex-shrink: 0;24
}25
26
#toggler {27
display: none;28
}29
30
@media (max-width: 660px) {31
.mdb-page-content {32
padding-left: 0px;33
}34
35
#toggler {36
display: unset;37
}38
39
.mask img {40
width: 100%;41
}42
43
.sidenav[data-mdb-hidden='false'] {44
transform: translateX(-100%);45
}46
}xxxxxxxxxx1
const sidenav = document.getElementById('full-screen-example');2
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);3
4
let innerWidth = null;5
6
const setMode = (e) => {7
// Check necessary for Android devices8
if (window.innerWidth === innerWidth) {9
return;10
}11
12
innerWidth = window.innerWidth;13
14
if (window.innerWidth < 660) {15
sidenavInstance.changeMode('over');16
sidenavInstance.hide();17
} else {18
sidenavInstance.changeMode('side');19
sidenavInstance.show();20
}21
};22
23
setMode();24
25
// Event listeners26
window.addEventListener('resize', setMode); Console errors: 0