Updated sidebar to include image icons

HTML and CSS Files/mainFridgeList.css

@@ -24,8 +24,8 @@ body {
 }
 .sidebar {
   height: 100%;
-  position:fixed;
-  width:265px;
+  position: fixed;
+  width: 265px;
   background-color: rgba(196, 196, 196, 1);
   display: grid;
   grid-template-rows: repeat(16, 6.25vh);
@@ -35,35 +35,71 @@ body {
   left:0;
 }
 .sideItem {
-  grid-template-columns: repeat(2, 12.5vw);
+  display: grid;
+  grid-template-columns: repeat(4);
   text-align: center;
   background-color: rgba(104, 104, 104, 1);
+  opacity: .8;
+  transform: none;
+}
+.sideItem:hover {
+  opacity: 1;
+  transition: opacity .5s;
 }
-.text {
+.sideText {
   font-family: "Roboto";
   font-size: 24px;
   color: white;
-  grid-column: 2/3;
+  grid-column: 6/7;
+  text-align: center;
+}
+#fridgeIcon {
+  background-color: white;
+	clip-path: circle();
+	height: 100px;
+  grid-row: 2/6;
+  grid-column: 1/2;
+  margin: 10px;
 }
-.icon {
+#recipesIcon {
+  background-color: white;
+	clip-path: circle();
+	height: 100px;
+  grid-row: 5/9;
   grid-column: 1/2;
+  margin: 10px;
 }
-.circle {
-  margin: 5px;
+#statsIcon {
+  background-color: white;
 	clip-path: circle();
+	height: 100px;
+  grid-row: 8/12;
+  grid-column: 1/2;
+  margin: 10px;
+}
+#toBuyIcon {
   background-color: white;
+	clip-path: circle();
+	height: 100px;
+  grid-row: 11/15;
+  grid-column: 1/2;
+  margin: 10px;
 }
 .fridge {
   grid-row: 3/4;
+  grid-column: 1/3;
 }
 .recipes {
   grid-row: 6/7;
+  grid-column: 1/3;
 }
 .stats {
   grid-row: 9/10;
+  grid-column: 1/3;
 }
 .toBuy {
   grid-row: 12/13;
+  grid-column: 1/3;
 }
 
 @font-face {