Updated the sidebar

Author: BobsProgrammingAcademy

README.md

@@ -1,6 +1,6 @@
 # Responsive Sales Dashboard
 
-This is a responsive sales dashboard built using **HTML 5**, **CSS 3** and **JavaScript**. Charts are built using **ApexCharts 3**.
+This is a responsive sales dashboard built using **HTML 5**, **CSS 3**, and **JavaScript**. Charts are built using **ApexCharts 3**.
 
 ![plot](https://github.com/BobsProgrammingAcademy/responsive-sales-dashboard/blob/master/images/large.png?raw=true)
 

css/styles.css

@@ -84,9 +84,20 @@ body {
   cursor: pointer;
 }
 
+.sidebar-list-item > a {
+  text-decoration: none;
+  color: #9e9ea4;
+}
+
 .sidebar-responsive {
   display: inline !important;
   position: absolute;
+  /*
+    the z-index of the ApexCharts is 11
+    we want the z-index of the sidebar higher so that
+    the charts are not showing over the sidebar 
+    on small screens
+  */
   z-index: 12 !important;
 }
 

index.html

@@ -44,25 +44,39 @@
 
         <ul class="sidebar-list">
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">dashboard</span> Dashboard
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">dashboard</span> Dashboard
+            </a>
           </li>
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">inventory_2</span> Products
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">inventory_2</span> Products
+            </a>
           </li>
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">category</span> Categories
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">category</span> Categories
+            </a>
           </li>
-          <li class="sidebar-list-item"> 
-            <span class="material-icons-outlined">groups</span> Customers
+          <li class="sidebar-list-item">
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">groups</span> Customers
+            </a>
           </li>
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">fact_check</span> Inventory
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">fact_check</span> Inventory
+            </a>
           </li>
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">poll</span> Reports
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">poll</span> Reports
+            </a>
           </li>
           <li class="sidebar-list-item">
-            <span class="material-icons-outlined">settings</span> Settings
+            <a href="#" target="_blank">
+              <span class="material-icons-outlined">settings</span> Settings
+            </a>
           </li>
         </ul>
       </aside>