xxxxxxxxxx1
<body>2
<div class="bg">3
<!-- SideNav slide-out button -->4
<a href="#" data-activates="slide-out" class="btn btn-dark p-3 button-collapse"><i5
class="fas fa-bars"></i></a>6
</div>7
8
9
<!-- Sidebar navigation -->10
<div id="slide-out" class="side-nav2 side stylish-color">11
<ul class="custom-scrollbar">12
<!-- Logo -->13
<li>14
<div class="logo-wrapper waves-light">15
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png"16
class="img-fluid flex-center"></a>17
</div>18
</li>19
<!--/. Logo -->20
<!--Social-->21
<li>22
<ul class="social">23
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>24
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>25
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>26
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>27
</ul>28
</li>29
<!--/Social-->30
<!--Search Form-->31
<li>32
<form class="search-form" role="search">33
<div class="form-group md-form mt-0 pt-1 waves-light">34
<input type="text" class="form-control" placeholder="Search">35
</div>36
</form>37
</li>38
<!--/.Search Form-->39
<!-- Side navigation links -->40
<li>41
<ul class="collapsible collapsible-accordion">42
<li><a class="collapsible-header waves-effect arrow-r active"><i class="fas fa-chevron-right"></i> Submit43
blog<i class="fas fa-angle-down rotate-icon"></i></a>44
<div class="collapsible-body">45
<ul>46
<li><a href="#" class="waves-effect">Submit listing</a>47
</li>48
<li><a href="#" class="waves-effect">Registration form</a>49
</li>50
</ul>51
</div>52
</li>53
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>54
Instruction<i class="fas fa-angle-down rotate-icon"></i></a>55
<div class="collapsible-body">56
<ul>57
<li><a href="#" class="waves-effect">For bloggers</a>58
</li>59
<li><a href="#" class="waves-effect">For authors</a>60
</li>61
</ul>62
</div>63
</li>64
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i65
class="fas fa-angle-down rotate-icon"></i></a>66
<div class="collapsible-body">67
<ul>68
<li><a href="#" class="waves-effect">Introduction</a>69
</li>70
<li><a href="#" class="waves-effect">Monthly meetings</a>71
</li>72
</ul>73
</div>74
</li>75
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i76
class="fas fa-angle-down rotate-icon"></i></a>77
<div class="collapsible-body">78
<ul>79
<li><a href="#" class="waves-effect">FAQ</a>80
</li>81
<li><a href="#" class="waves-effect">Write a message</a>82
</li>83
<li><a href="#" class="waves-effect">FAQ</a>84
</li>85
<li><a href="#" class="waves-effect">Write a message</a>86
</li>87
<li><a href="#" class="waves-effect">FAQ</a>88
</li>89
<li><a href="#" class="waves-effect">Write a message</a>90
</li>91
<li><a href="#" class="waves-effect">FAQ</a>92
</li>93
<li><a href="#" class="waves-effect">Write a message</a>94
</li>95
</ul>96
</div>97
</li>98
</ul>99
</li>100
<!--/. Side navigation links -->101
</ul>102
<div class="sidenav-bg"></div>103
</div>104
<!--/. Sidebar navigation -->105
</body>106
xxxxxxxxxx1
body, html {2
height: 100%;3
}4
.bg {5
/* The image used */6
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");7
8
/* Full height */9
height: 100%;10
11
/* Center and scale the image nicely */12
background-position: center;13
background-repeat: no-repeat;14
background-size: cover;15
}xxxxxxxxxx1
$(document).ready(() => {2
// SideNav Button Initialization3
$(".button-collapse").sideNav2();4
// SideNav Scrollbar Initialization5
var sideNavScrollbar = document.querySelector('.custom-scrollbar');6
var ps = new PerfectScrollbar(sideNavScrollbar);7
}); Console errors: 0