Responsive Sidebar Navigation for Dashboard

1<input type="checkbox" id="check">
2    <!--header area start-->
3    <header>
4      <label for="check">
5        <i class="fas fa-bars" id="sidebar_btn"></i>
6      </label>
7      <div class="left_area">
8        <h3>Go<span>Snippets</span></h3>
9      </div>
10      <div class="right_area">
11        <a href="#" class="logout_btn">Logout</a>
12      </div>
13    </header>
14    <!--header area end-->
15    <!--mobile navigation bar start-->
16    <div class="mobile_nav">
17      <div class="nav_bar">
18        <img src="1.png" class="mobile_profile_image" alt="">
19        <i class="fa fa-bars nav_btn"></i>
20      </div>
21      <div class="mobile_nav_items">
22        <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
23        <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
24        <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
25        <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
26        <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
27        <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
28      </div>
29    </div>
30    <!--mobile navigation bar end-->
31    <!--sidebar start-->
32    <div class="sidebar">
33      <div class="profile_info">
34        <img src="https://i.imgur.com/iQpdHb2.jpg" class="profile_image" alt="">
35        <h4>Williamson</h4>
36      </div>
37      <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
38      <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
39      <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
40      <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
41      <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
42      <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
43    </div>
44    <!--sidebar end-->
45
46    <div class="content">
47      <div class="card">
48        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
49      </div>
50      <div class="card">
51        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
52      </div>
53      <div class="card">
54        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
55      </div>
56    </div>
57