xxxxxxxxxx
1
<!--Main Navigation-->
2
<header>
3
<!-- Sidenav -->
4
<nav
5
id="sidenav-1"
6
class="sidenav"
7
data-mdb-hidden="false"
8
data-mdb-accordion="true"
9
>
10
<a
11
class="ripple d-flex justify-content-center py-4"
12
href="#!"
13
data-mdb-ripple-color="primary"
14
>
15
<img
16
id="MDB-logo"
17
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
18
alt="MDB Logo"
19
draggable="false"
20
/>
21
</a>
22
23
<ul class="sidenav-menu">
24
<li class="sidenav-item">
25
<a class="sidenav-link" href="">
26
<i class="fas fa-chart-area fa-fw me-3"></i
27
><span>Webiste traffic</span></a
28
>
29
</li>
30
<li class="sidenav-item">
31
<a class="sidenav-link"
32
><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a
33
>
34
<ul class="sidenav-collapse">
35
<li class="sidenav-item">
36
<a class="sidenav-link">Profile</a>
37
</li>
38
<li class="sidenav-item">
39
<a class="sidenav-link">Account</a>
40
</li>
41
</ul>
42
</li>
43
<li class="sidenav-item">
44
<a class="sidenav-link"
45
><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a
46
>
47
<ul class="sidenav-collapse">
48
<li class="sidenav-item">
49
<a class="sidenav-link">Request password</a>
50
</li>
51
<li class="sidenav-item">
52
<a class="sidenav-link">Reset password</a>
53
</li>
54
</ul>
55
</li>
56
</ul>
57
</nav>
58
<!-- Sidenav -->
59
60
<!-- Navbar -->
61
<nav
62
id="main-navbar"
63
class="navbar navbar-expand-lg navbar-light bg-white fixed-top"
64
>
65
<!-- Container wrapper -->
66
<div class="container-fluid">
67
<!-- Toggler -->
68
<button
69
data-mdb-toggle="sidenav"
70
data-mdb-target="#sidenav-1"
71
class="btn shadow-0 p-0 me-3 d-block d-xxl-none"
72
aria-controls="#sidenav-1"
73
aria-haspopup="true"
74
>
75
<i class="fas fa-bars fa-lg"></i>
76
</button>
77
78
<!-- Search form -->
79
<form class="d-none d-md-flex input-group w-auto my-auto">
80
<input
81
autocomplete="off"
82
type="search"
83
class="form-control rounded"
84
placeholder='Search (ctrl + "/" to focus)'
85
style="min-width: 225px"
86
/>
87
<span class="input-group-text border-0"
88
><i class="fas fa-search"></i
89
></span>
90
</form>
91
92
<!-- Right links -->
93
<ul class="navbar-nav ms-auto d-flex flex-row">
94
<!-- Notification dropdown -->
95
<li class="nav-item dropdown">
96
<a
97
class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
98
href="#"
99
id="navbarDropdownMenuLink"
100
role="button"
101
data-mdb-toggle="dropdown"
102
aria-expanded="false"
103
>
104
<i class="fas fa-bell"></i>
105
<span class="badge rounded-pill badge-notification bg-danger"
106
>1</span
107
>
108
</a>
109
<ul
110
class="dropdown-menu dropdown-menu-end"
111
aria-labelledby="navbarDropdownMenuLink"
112
>
113
<li><a class="dropdown-item" href="#">Some news</a></li>
114
<li><a class="dropdown-item" href="#">Another news</a></li>
115
<li>
116
<a class="dropdown-item" href="#">Something else here</a>
117
</li>
118
</ul>
119
</li>
120
121
<!-- Icon -->
122
<li class="nav-item">
123
<a class="nav-link me-3 me-lg-0" href="#">
124
<i class="fas fa-fill-drip"></i>
125
</a>
126
</li>
127
<!-- Icon -->
128
<li class="nav-item me-3 me-lg-0">
129
<a class="nav-link" href="#">
130
<i class="fab fa-github"></i>
131
</a>
132
</li>
133
134
<!-- Icon dropdown -->
135
<li class="nav-item dropdown">
136
<a
137
class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
138
href="#"
139
id="navbarDropdown"
140
role="button"
141
data-mdb-toggle="dropdown"
142
aria-expanded="false"
143
>
144
<i class="united kingdom flag m-0"></i>
145
</a>
146
<ul
147
class="dropdown-menu dropdown-menu-end"
148
aria-labelledby="navbarDropdown"
149
>
150
<li>
151
<a class="dropdown-item" href="#"
152
><i class="united kingdom flag"></i>English
153
<i class="fa fa-check text-success ms-2"></i
154
></a>
155
</li>
156
<li><hr class="dropdown-divider" /></li>
157
<li>
158
<a class="dropdown-item" href="#"
159
><i class="poland flag"></i>Polski</a
160
>
161
</li>
162
<li>
163
<a class="dropdown-item" href="#"
164
><i class="china flag"></i>中文</a
165
>
166
</li>
167
<li>
168
<a class="dropdown-item" href="#"
169
><i class="japan flag"></i>日本語</a
170
>
171
</li>
172
<li>
173
<a class="dropdown-item" href="#"
174
><i class="germany flag"></i>Deutsch</a
175
>
176
</li>
177
<li>
178
<a class="dropdown-item" href="#"
179
><i class="france flag"></i>Français</a
180
>
181
</li>
182
<li>
183
<a class="dropdown-item" href="#"
184
><i class="spain flag"></i>Español</a
185
>
186
</li>
187
<li>
188
<a class="dropdown-item" href="#"
189
><i class="russia flag"></i>Русский</a
190
>
191
</li>
192
<li>
193
<a class="dropdown-item" href="#"
194
><i class="portugal flag"></i>Português</a
195
>
196
</li>
197
</ul>
198
</li>
199
200
<!-- Avatar -->
201
<li class="nav-item dropdown">
202
<a
203
class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
204
href="#"
205
id="navbarDropdownMenuLink"
206
role="button"
207
data-mdb-toggle="dropdown"
208
aria-expanded="false"
209
>
210
<img
211
src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
212
class="rounded-circle"
213
height="22"
214
alt=""
215
loading="lazy"
216
/>
217
</a>
218
<ul
219
class="dropdown-menu dropdown-menu-end"
220
aria-labelledby="navbarDropdownMenuLink"
221
>
222
<li><a class="dropdown-item" href="#">My profile</a></li>
223
<li><a class="dropdown-item" href="#">Settings</a></li>
224
<li><a class="dropdown-item" href="#">Logout</a></li>
225
</ul>
226
</li>
227
</ul>
228
</div>
229
<!-- Container wrapper -->
230
</nav>
231
<!-- Navbar -->
232
</header>
233
<!--Main Navigation-->
234
235
<!--Main layout-->
236
<main style="margin-top: 58px">
237
<div class="container">
238
239
</div>
240
</main>
241
<!--Main layout-->
242
243
<!--Footer-->
244
<footer></footer>
245
<!--Footer-->
xxxxxxxxxx
1
@media (min-width: 1400px) {
2
main,
3
header,
4
#main-navbar {
5
padding-left: 240px;
6
}
7
}
xxxxxxxxxx
1
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 devices
8
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 listeners
26
window.addEventListener("resize", setMode);
Console errors: 0