HTML
xxxxxxxxxx1
2
<!DOCTYPE html>3
<html lang="en">4
<head>5
<meta charset="UTF-8" />6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />7
<meta http-equiv="x-ua-compatible" content="ie=edge" />8
<title>Material Design for Bootstrap</title>9
<!-- MDB icon -->10
<link rel="icon" href="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/img/mdb-favicon.ico" type="image/x-icon" />11
<!-- Font Awesome -->12
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />13
<!-- Google Fonts Roboto -->14
<link15
rel="stylesheet"16
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"17
/>18
<!-- MDB -->19
<link rel="stylesheet" href="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/css/mdb.min.css" />20
<!-- PRISM -->21
<link rel="stylesheet" href="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/dev/css/new-prism.css" />22
<!-- Custom styles -->23
<style>24
.page-intro {25
background-color: white;26
width: 100vw;27
min-height: 100vh;28
}29
30
img {31
max-width: 80%;32
}33
34
.mdb-page-content {35
padding-left: 240px;36
transition: padding 0.3s linear;37
}38
39
#toggler {40
display: none;41
}42
43
@media (max-width: 660px) {44
.mdb-page-content {45
padding-left: 0px;46
}47
48
#toggler {49
display: unset;50
}51
52
.mask img {53
width: 100%;54
}55
}56
</style>57
</head>58
59
<body>60
61
62
<!-- Sidenav -->63
64
65
66
<!-- Sidenav-->67
<nav68
id="sidenav-4"69
class="sidenav"70
data-mdb-mode="side"71
data-mdb-slim="true"72
data-mdb-slim-collapsed="true"73
data-mdb-content="#slim-content"74
>75
<ul class="sidenav-menu">76
<li class="sidenav-item">77
<a class="sidenav-link">78
<i class="far fa-smile me-3"></i79
><span data-mdb-slim="false">Link 1</span></a80
>81
</li>82
<li class="sidenav-item">83
<a class="sidenav-link"84
><i class="fas fa-grin me-3"></i85
><span data-mdb-slim="false">Category 1</span></a86
>87
<ul class="sidenav-collapse">88
<li class="sidenav-item">89
<a class="sidenav-link">Link 2</a>90
</li>91
<li class="sidenav-item">92
<a class="sidenav-link">Link 3</a>93
</li>94
</ul>95
</li>96
<li class="sidenav-item">97
<a class="sidenav-link"98
><i class="fas fa-grin-wink me-3"></i99
><span data-mdb-slim="false">Category 2</span></a100
>101
<ul class="sidenav-collapse">102
<li class="sidenav-item">103
<a class="sidenav-link">Link 4</a>104
</li>105
<li class="sidenav-item">106
<a class="sidenav-link">Link 5</a>107
</li>108
</ul>109
</li>110
</ul>111
</nav>112
<!-- Sidenav-->113
114
<!-- Togglers -->115
<div id="slim-content">116
<button117
data-mdb-toggle="sidenav"118
data-mdb-target="#sidenav-4"119
class="btn btn-primary"120
aria-controls="#sidenav-4"121
aria-haspopup="true"122
>123
<i class="fas fa-bars"></i>124
</button>125
<button id="slim-toggler" class="btn btn-primary">126
Toggle slim127
</button>128
</div>129
<!-- Togglers -->130
131
132
<script>133
//Initialize it with JS to make it instantly visible134
135
const slimInstance = new mdb.Sidenav(document.getElementById('sidenav-4'));136
slimInstance.show();137
138
document.getElementById('slim-toggler').addEventListener('click', () => {139
slimInstance.toggleSlim();140
})141
</script>142
143
<!-- PRISM -->144
<script type="text/javascript" src="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/dev/js/new-prism.js"></script>145
<!-- MDB SNIPPET -->146
<script type="text/javascript" src="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/dev/js/dist/mdbsnippet.min.js"></script>147
<!-- MDB -->148
<script type="text/javascript" src="https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/js/mdb.min.js"></script>149
150
<!-- Custom scripts -->151
<script type="text/javascript">152
const sidenav = document.getElementById('full-screen-example');153
const instance = mdb.Sidenav.getInstance(sidenav);154
155
let innerWidth = null;156
157
const setMode = (e) => {158
// Check necessary for Android devices159
if (window.innerWidth === innerWidth) {160
return;161
}162
163
innerWidth = window.innerWidth;164
165
if (window.innerWidth < 660) {166
instance.changeMode('over');167
instance.hide();168
} else {169
instance.changeMode('side');170
instance.show();171
}172
};173
174
setMode();175
176
// Event listeners177
178
window.addEventListener('resize', setMode);179
</script>180
</body>181
</html>182
CSS
1
1
JS
1
1
Console errors: 0