xxxxxxxxxx
1
<main>
2
<div class="container">
3
<div class="row">
4
<div class="col-xl-3">
5
<div class="list-group list-group-naked rounded-0 mt-1">
6
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
7
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="25" alt=""
8
loading="lazy" />
9
</a>
10
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3 active">
11
<i class="fab fa-earlybirds fa-lg fa-fw me-3 text-primary"></i>
12
<strong>Home</strong>
13
</a>
14
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
15
<i class="fas fa-hashtag fa-lg fa-fw me-3 text-primary"></i>
16
<strong>Explore</strong>
17
</a>
18
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
19
<i class="far fa-bell fa-lg fa-fw me-3 text-primary"></i>
20
<strong>Notifications</strong>
21
</a>
22
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
23
<i class="far fa-envelope fa-lg fa-fw me-3 text-primary"></i>
24
<strong>Messages</strong>
25
</a>
26
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
27
<i class="far fa-bookmark fa-lg fa-fw me-3 text-primary"></i>
28
<strong>Bookmarks</strong>
29
</a>
30
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
31
<i class="far fa-list-alt fa-lg fa-fw me-3 text-primary"></i>
32
<strong>Lists</strong>
33
</a>
34
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
35
<i class="far fa-user fa-lg fa-fw me-3 text-primary"></i>
36
<strong>Profile</strong>
37
</a>
38
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-3">
39
<i class="fas fa-ellipsis-h fa-lg fa-fw me-3 text-primary"></i>
40
<strong>More</strong>
41
</a>
42
<a class="btn btn-primary btn-block btn-rounded btn-lg ripple-surface mt-3" data-mdb-toggle="collapse"
43
href="#collapse1" role="button" aria-expanded="true" aria-controls="collapse1">
44
Tweet
45
</a>
46
</div>
47
<div class="list-group list-group-naked list-group-naked-dark rounded-0 mt-4">
48
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center py-2">
49
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="50"
50
alt="" loading="lazy" />
51
<div class="d-flex align-items-center w-100 ps-3">
52
<div class="d-flex flex-column w-100">
53
<span class="font-weight-bold">Maria Campbell</span>
54
<span class="small">@mariacampbell</span>
55
</div>
56
</div>
57
<div class="d-flex align-items-center">
58
<i class="fas fa-angle-down float-end"></i>
59
</div>
60
</a>
61
</div>
62
</div>
63
<div class="col-xl-5 border border-left border-right px-0">
64
<div class="p-3 border-bottom">
65
<h4 class="d-flex align-items-center mb-0">
66
Home <i class="far fa-xs fa-star ms-auto text-primary"></i>
67
</h4>
68
</div>
69
<div>
70
<div class="card shadow-0">
71
<div class="card-body border-bottom pb-2">
72
<div class="d-flex">
73
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="50"
74
alt="" loading="lazy" />
75
<div class="d-flex align-items-center w-100 ps-3">
76
<div class="w-100">
77
<input type="text" id="form143" class="form-control form-status border-0 py-1 px-0"
78
placeholder="What's happening" />
79
</div>
80
</div>
81
</div>
82
<div class="d-flex justify-content-between">
83
<ul class="list-unstyled d-flex flex-row ps-3 pt-3" style="margin-left: 50px;">
84
<li>
85
<a href=""><i class="far fa-image pe-2"></i></a>
86
</li>
87
<li>
88
<a href=""><i class="fas fa-photo-video px-2"></i></a>
89
</li>
90
<li>
91
<a href=""><i class="fas fa-chart-bar px-2"></i></a>
92
</li>
93
<li>
94
<a href=""><i class="far fa-smile px-2"></i></a>
95
</li>
96
<li>
97
<a href=""><i class="far fa-calendar-check px-2"></i></a>
98
</li>
99
</ul>
100
<div class="d-flex align-items-center">
101
<button type="button" class="btn btn-primary btn-rounded">Tweet</button>
102
</div>
103
</div>
104
</div>
105
</div>
106
<div>
107
<div class="d-flex p-3 border-bottom">
108
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (29).jpg" class="rounded-circle" height="50"
109
alt="" loading="lazy" />
110
<div class="d-flex w-100 ps-3">
111
<div>
112
<a href="">
113
<h6 class="text-body">
114
Miley Cyrus
115
<span class="small text-muted font-weight-normal">@mileycyrus</span>
116
<span class="small text-muted font-weight-normal"> • </span>
117
<span class="small text-muted font-weight-normal">2h</span>
118
<span><i class="fas fa-angle-down float-end"></i></span>
119
</h6>
120
</a>
121
<p style="line-height: 1.2;">
122
Lorem ipsum dolor, sit amet <a href="">#consectetur</a> adipisicing elit.
123
Nobis assumenda eveniet ipsum libero mollitia vero doloremque
124
<a href="">#perspiciatis</a> molestiae omnis, quam iure dicta reprehenderit
125
distinctio facere labore atque, sit <a href="">#ratione</a> quo.
126
</p>
127
<ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
128
<li>
129
<i class="far fa-comment"></i>
130
</li>
131
<li><i class="fas fa-retweet"></i><span class="small ps-2">7</span></li>
132
<li><i class="far fa-heart"></i><span class="small ps-2">35</span></li>
133
<li>
134
<i class="far fa-share-square"></i>
135
</li>
136
</ul>
137
</div>
138
</div>
139
</div>
140
<div class="d-flex p-3 border-bottom">
141
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (29).jpg" class="rounded-circle" height="50"
142
alt="" loading="lazy" />
143
<div class="d-flex w-100 ps-3">
144
<div>
145
<a href="#">
146
<h6 class="text-body">
147
Miley Cyrus
148
<span class="small text-muted font-weight-normal">@mileycyrus</span>
149
<span class="small text-muted font-weight-normal"> • </span>
150
<span class="small text-muted font-weight-normal">3h</span>
151
<span><i class="fas fa-angle-down float-end"></i></span>
152
</h6>
153
</a>
154
<p style="line-height: 1.2;">
155
Nobis assumenda eveniet ipsum libero mollitia vero doloremque molestiae
156
reprehenderit.
157
</p>
158
<div class="card border mb-3 shadow-0" style="max-width: 540px;">
159
<div class="row g-0">
160
<div class="col-md-3">
161
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg" alt="..."
162
class="img-fluid rounded-left" />
163
</div>
164
<div class="col-md-9">
165
<div class="card-body">
166
<p class="card-text" style="line-height: 1;">
167
Title of the news
168
</p>
169
<p class="card-text small mb-0" style="line-height: 1.2;">
170
This is a wider card with supporting text below as a natural lead-in
171
to additional content.
172
</p>
173
<p class="card-text small mb-0" style="line-height: 1.2;">
174
<i class="fas fa-link fa-xs pe-1"></i>example.pl
175
</p>
176
</div>
177
</div>
178
</div>
179
</div>
180
<ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
181
<li>
182
<i class="far fa-comment"></i>
183
</li>
184
<li><i class="fas fa-retweet"></i><span class="small ps-2">51</span></li>
185
<li><i class="far fa-heart"></i><span class="small ps-2">185</span></li>
186
<li>
187
<i class="far fa-share-square"></i>
188
</li>
189
</ul>
190
</div>
191
</div>
192
</div>
193
<div class="d-flex p-3 border-bottom">
194
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (22).jpg" class="rounded-circle" height="50"
195
alt="" loading="lazy" />
196
<div class="d-flex w-100 ps-3">
197
<div>
198
<a href="#">
199
<h6 class="text-body">
200
Bob Marley
201
<span class="small text-muted font-weight-normal">@bobmarley</span>
202
<span class="small text-muted font-weight-normal"> • </span>
203
<span class="small text-muted font-weight-normal">5h</span>
204
<span><i class="fas fa-angle-down float-end"></i></span>
205
</h6>
206
</a>
207
<p style="line-height: 1.2;">
208
Lorem ipsum dolor, sit amet <a href="">#consectetur</a> adipisicing elit.
209
Officiis, <a href="">#repellat</a>. Error cumque temporibus eum pariatur
210
ducimus facere? Obcaecati fugit, nobis eos <a href="">#deserunt</a> odit
211
libero voluptatibus, iste laudantium, tempore ratione ut.
212
</p>
213
<div class="card border mb-3 shadow-0" style="max-width: 540px;">
214
<div class="row g-0">
215
<div class="col-md-3">
216
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="..."
217
class="img-fluid rounded-left" />
218
</div>
219
<div class="col-md-9">
220
<div class="card-body">
221
<p class="card-text" style="line-height: 1;">
222
Title of the news
223
</p>
224
<p class="card-text small mb-0" style="line-height: 1.2;">
225
This is a wider card with supporting text below as a natural lead-in
226
to additional content.
227
</p>
228
<p class="card-text small mb-0" style="line-height: 1.2;">
229
<i class="fas fa-link fa-xs pe-1"></i>example.pl
230
</p>
231
</div>
232
</div>
233
</div>
234
</div>
235
<ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
236
<li>
237
<i class="far fa-comment"></i>
238
</li>
239
<li><i class="fas fa-retweet"></i><span class="small ps-2">8</span></li>
240
<li><i class="far fa-heart"></i><span class="small ps-2">97</span></li>
241
<li>
242
<i class="far fa-share-square"></i>
243
</li>
244
</ul>
245
</div>
246
</div>
247
</div>
248
<div class="d-flex p-3 border-bottom">
249
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (24).jpg" class="rounded-circle" height="50"
250
alt="" loading="lazy" />
251
<div class="d-flex w-100 ps-3">
252
<div>
253
<a href="">
254
<h6 class="text-body">
255
Anna Doe
256
<span class="small text-muted font-weight-normal">@annadoe</span>
257
<span class="small text-muted font-weight-normal"> • </span>
258
<span class="small text-muted font-weight-normal">7h</span>
259
<span><i class="fas fa-angle-down float-end"></i></span>
260
</h6>
261
</a>
262
<p style="line-height: 1.2;">
263
Error cumque temporibus eum pariatur ducimus facere? Obcaecati fugit, nobis
264
eos <a href="">#deserunt</a> odit libero voluptatibus, iste laudantium,
265
tempore ratione ut.
266
</p>
267
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid rounded mb-3"
268
alt="..." />
269
<ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
270
<li>
271
<i class="far fa-comment"></i>
272
</li>
273
<li><i class="fas fa-retweet"></i><span class="small ps-2">11</span></li>
274
<li><i class="far fa-heart"></i><span class="small ps-2">65</span></li>
275
<li>
276
<i class="far fa-share-square"></i>
277
</li>
278
</ul>
279
</div>
280
</div>
281
</div>
282
<div class="d-flex p-3 border-bottom mb-5">
283
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (3).jpg" class="rounded-circle" height="50"
284
alt="" loading="lazy" />
285
<div class="d-flex w-100 ps-3">
286
<div>
287
<a href="">
288
<h6 class="text-body">
289
Mark Twain
290
<span class="small text-muted font-weight-normal">@marktawin</span>
291
<span class="small text-muted font-weight-normal"> • </span>
292
<span class="small text-muted font-weight-normal">10h</span>
293
<span><i class="fas fa-angle-down float-end"></i></span>
294
</h6>
295
</a>
296
<p style="line-height: 1.2;">
297
Obcaecati fugit, nobis eos odit libero voluptatibus, iste laudantium,
298
tempore ratione ut.
299
</p>
300
<div class="ratio ratio-16x9 mb-3">
301
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video"
302
allowfullscreen></iframe>
303
</div>
304
<ul class="list-unstyled d-flex justify-content-between mb-0 pe-xl-5">
305
<li>
306
<i class="far fa-comment"></i>
307
</li>
308
<li><i class="fas fa-retweet"></i><span class="small ps-2">34</span></li>
309
<li><i class="far fa-heart"></i><span class="small ps-2">159</span></li>
310
<li>
311
<i class="far fa-share-square"></i>
312
</li>
313
</ul>
314
</div>
315
</div>
316
</div>
317
</div>
318
</div>
319
</div>
320
<div class="col-xl-4">
321
<div class="mt-2">
322
<div class="input-group form-outline mb-3">
323
<span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
324
<input type="text" class="form-control" id="input1" placeholder="Search" aria-label="Search"
325
aria-describedby="basic-addon1" />
326
</div>
327
</div>
328
<div class="list-group list-group-flush mb-4">
329
<h5 class="d-flex align-items-center list-group-item mb-0 py-3" aria-current="true">
330
Trends for you <i class="fas fa-xs fa-cog ms-auto text-primary"></i>
331
</h5>
332
<a href="#" class="list-group-item list-group-item-action d-flex flex-column">
333
<span class="small">Trending in Poland <i class="fas fa-angle-down float-end"></i></span>
334
<span class="font-weight-bold">Dapibus ac facilisis in</span>
335
</a>
336
<a href="#" class="list-group-item list-group-item-action d-flex flex-column">
337
<span class="small">Music • Trends <i class="fas fa-angle-down float-end"></i></span>
338
<span class="font-weight-bold">Morbi leo risu</span>
339
<span class="small">897 Tweets</span>
340
</a>
341
<a href="#" class="list-group-item list-group-item-action d-flex flex-column">
342
<span class="small">Music • Trends <i class="fas fa-angle-down float-end"></i></span>
343
<span class="font-weight-bold">Porta ac consectetur ac</span>
344
</a>
345
<a href="#" class="list-group-item list-group-item-action d-flex flex-column">
346
<span class="small">Trending in Poland <i class="fas fa-angle-down float-end"></i></span>
347
<span class="font-weight-bold">Vestibulum at eros</span>
348
<span class="small">1,345 Tweets</span>
349
</a>
350
<a href="#" class="list-group-item list-group-item-action d-flex flex-column">
351
<span class="small">Trending in Poland <i class="fas fa-angle-down float-end"></i></span>
352
<span class="font-weight-bold">Lorem ipsum dolor</span>
353
</a>
354
<a href="#" class="list-group-item list-group-item-action py-3 link-primary">
355
Show more
356
</a>
357
</div>
358
<div class="list-group list-group-flush mb-4">
359
<h5 class="d-flex align-items-center list-group-item mb-0 py-3" aria-current="true">
360
Who to follow
361
</h5>
362
<a href="#" class="list-group-item list-group-item-action d-flex">
363
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" class="rounded-circle" height="50"
364
alt="" loading="lazy" />
365
<div class="d-flex align-items-center w-100 ps-3">
366
<div class="d-flex flex-column w-100">
367
<span class="font-weight-bold">Katy Perry <i class="fas fa-certificate text-primary"></i></span>
368
<span class="small">@katyperry</span>
369
</div>
370
</div>
371
<div class="d-flex align-items-center">
372
<button type="button" class="btn btn-outline-primary btn-rounded" data-mdb-ripple-color="dark">
373
Follow
374
</button>
375
</div>
376
</a>
377
<a href="#" class="list-group-item list-group-item-action d-flex">
378
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg" class="rounded-circle" height="50"
379
alt="" loading="lazy" />
380
<div class="d-flex align-items-center w-100 ps-3">
381
<div class="d-flex flex-column w-100">
382
<span class="font-weight-bold">Justin Bieber <i class="fas fa-certificate text-primary"></i></span>
383
<span class="small">@justinbieber</span>
384
</div>
385
</div>
386
<div class="d-flex align-items-center">
387
<button type="button" class="btn btn-outline-primary btn-rounded" data-mdb-ripple-color="dark">
388
Follow
389
</button>
390
</div>
391
</a>
392
<a href="#" class="list-group-item list-group-item-action py-3 link-primary">
393
Show more
394
</a>
395
</div>
396
<div>
397
<div class="px-3 mb-4 pb-2">
398
<a href="" class="text-muted small me-3">Terms</a>
399
<a href="" class="text-muted small me-3">Privacy</a>
400
<a href="" class="text-muted small me-3">Policy & Safety</a>
401
<a href="" class="text-muted small me-3">How YouTube works</a>
402
<a href="" class="text-muted small me-3">Test new features</a>
403
<a href="" class="text-muted small me-3">© 2020 MDBootstrap</a>
404
</div>
405
</div>
406
</div>
407
</div>
408
</div>
409
</main>
xxxxxxxxxx
1
.list-group-naked .list-group-item {
2
background-color: transparent;
3
border: none;
4
}
5
6
.list-group-naked .list-group-item-action:focus,
7
.list-group-naked .list-group-item-action:hover {
8
background-color: rgba(18, 102, 241, 0.1);
9
color: #1266f1;
10
border-radius: 10rem;
11
}
12
.list-group-naked-dark .list-group-item-action:focus,
13
.list-group-naked-dark .list-group-item-action:hover {
14
background-color: rgba(0, 0, 0, 0.1);
15
color: #424242;
16
}
17
18
.list-group-naked .list-group-item.active {
19
color: #1266f1;
20
}
21
22
.form-control.form-status:focus {
23
box-shadow: none;
24
}
25
26
.input-group-text {
27
border: 0;
28
}
29
30
.form-outline .form-control:focus ~ .form-notch .form-notch-middle {
31
border-top: 0.125rem solid;
32
border-color: #1266f1;
33
}
34
35
.list-group-flush {
36
border-radius: 1rem;
37
}
38
.list-group-flush .list-group-item {
39
background-color: #f5f8fa;
40
}
41
.list-group-flush .list-group-item-action:hover {
42
background-color: rgba(0, 0, 0, 0.07);
43
}
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 < 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 listeners
26
window.addEventListener('resize', setMode);
Console errors: 0