HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8"/>5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>6
<meta http-equiv="x-ua-compatible" content="ie=edge"/>7
<title>Material Design for Bootstrap</title>8
<!-- MDB icon -->9
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"/>10
<!-- Font Awesome -->11
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"/>12
<!-- Google Fonts Roboto -->13
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>14
<!-- MDB -->15
<link rel="stylesheet" href="css/mdb.min.css"/>16
</head>17
<body>18
<!-- Start your project here-->19
<!--Main Navigation-->20
<header>21
<!-- Sidenav -->22
<div id="sidenav-1" class="sidenav" role="navigation" data-hidden="false" data-mode="side" data-accordion="true">23
<a class="ripple d-flex justify-content-center py-4" href="#!" data-ripple-color="primary">24
<img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" alt="MDB Logo" draggable="false"/>25
</a>26
27
<ul class="sidenav-menu">28
<li class="sidenav-item">29
<a class="sidenav-link" href="">30
<i class="fas fa-chart-area fa-fw mr-3"></i><span>Webiste traffic</span>31
</a>32
</li>33
<li class="sidenav-item">34
<a class="sidenav-link">35
<i class="fas fa-cogs fa-fw mr-3"></i><span>Settings</span>36
</a>37
<ul class="sidenav-collapse">38
<li class="sidenav-item">39
<a class="sidenav-link">Profile</a>40
</li>41
<li class="sidenav-item">42
<a class="sidenav-link">Account</a>43
</li>44
</ul>45
</li>46
<li class="sidenav-item">47
<a class="sidenav-link">48
<i class="fas fa-lock fa-fw mr-3"></i><span>Password</span>49
</a>50
<ul class="sidenav-collapse">51
<li class="sidenav-item">52
<a class="sidenav-link">Request password</a>53
</li>54
<li class="sidenav-item">55
<a class="sidenav-link">Reset password</a>56
</li>57
</ul>58
</li>59
</ul>60
</div>61
<!-- Sidenav -->62
63
<!-- Navbar -->64
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">65
<!-- Container wrapper -->66
<div class="container-fluid">67
<!-- Toggler -->68
<button data-toggle="sidenav" data-target="#sidenav-1" class="btn shadow-0 p-0 mr-3 d-block d-xxl-none" aria-controls="#sidenav-1" aria-haspopup="true">69
<i class="fas fa-bars fa-lg"></i>70
</button>71
72
<!-- Search form -->73
<form class="d-none d-md-flex input-group w-auto my-auto">74
<input autocomplete="off" type="search" class="form-control rounded" placeholder='Search (ctrl + "/" to focus)' style="min-width: 225px"/>75
<span class="input-group-text border-0"><i class="fas fa-search"></i></span>76
</form>77
78
<!-- Right links -->79
<ul class="navbar-nav ml-auto d-flex flex-row">80
<!-- Notification dropdown -->81
<li class="nav-item dropdown">82
<a class="nav-link mr-3 mr-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">83
<i class="fas fa-bell"></i><span class="badge rounded-pill badge-notification bg-danger">1</span>84
</a>85
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">86
<li>87
<a class="dropdown-item" href="#">Some news</a>88
</li>89
<li>90
<a class="dropdown-item" href="#">Another news</a>91
</li>92
<li>93
<a class="dropdown-item" href="#">Something else here</a>94
</li>95
</ul>96
</li>97
98
<!-- Icon -->99
<li class="nav-item">100
<a class="nav-link mr-3 mr-lg-0" href="#">101
<i class="fas fa-fill-drip"></i>102
</a>103
</li>104
<!-- Icon -->105
<li class="nav-item mr-3 mr-lg-0">106
<a class="nav-link" href="#">107
<i class="fab fa-github"></i>108
</a>109
</li>110
111
<!-- Icon dropdown -->112
<li class="nav-item dropdown">113
<a class="nav-link mr-3 mr-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">114
<i class="united kingdom flag m-0"></i>115
</a>116
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">117
<li>118
<a class="dropdown-item" href="#"><i class="united kingdom flag"></i>English<i class="fa fa-check text-success ml-2"></i></a>119
</li>120
<li>121
<hr class="dropdown-divider"/>122
</li>123
<li>124
<a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>125
</li>126
<li>127
<a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>128
</li>129
<li>130
<a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>131
</li>132
<li>133
<a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>134
</li>135
<li>136
<a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>137
</li>138
<li>139
<a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>140
</li>141
<li>142
<a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>143
</li>144
<li>145
<a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>146
</li>147
</ul>148
</li>149
150
<!-- Avatar -->151
<li class="nav-item dropdown">152
<a class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">153
<img src="img/avatar.jpg" class="rounded-circle" height="22" alt="" loading="lazy"/>154
</a>155
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">156
<li><a class="dropdown-item" href="#">My profile</a></li>157
<li><a class="dropdown-item" href="#">Settings</a></li>158
<li><a class="dropdown-item" href="#">Logout</a></li>159
</ul>160
</li>161
</ul>162
</div>163
<!-- Container wrapper -->164
</nav>165
<!-- Navbar -->166
</header>167
<!--Main Navigation-->168
169
<!--Main layout-->170
<main style="margin-top: 58px">171
<div class="container">172
173
</div>174
</main>175
<!--Main layout-->176
177
<!--Footer-->178
<footer></footer>179
<!--Footer-->180
<!-- End your project here-->181
</body>182
183
<!-- MDB -->184
<script type="text/javascript" src="js/mdb.min.js"></script>185
</html>CSS
xxxxxxxxxx1
@media (min-width: 1400px) {2
main,3
header,4
#main-navbar {5
padding-left: 240px;6
}7
}JS
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
// Check necessary for Android devices8
if (window.innerWidth === innerWidth) {9
return;10
}11
12
innerWidth = window.innerWidth;13
14
if (window.innerWidth < 1400) {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