Updated the css of fridge list view

Fixed the sidebar
Note: the dropdown menu for switching views is not yet working

HTML and CSS Files/mainFridgeList.css

@@ -19,20 +19,18 @@ body {
 .lowerPage {
   width: 100vw;
   display: grid;
-  grid-template-columns: repeat(6, 25vw);
+  grid-template-columns: repeat(6, 16.67vw);
   grid-template-rows: 12.5vh 87.5vh;
   text-align: left;
-  position: fixed;
-  background-color: white;
+  background-color: rgba(196, 196, 196, 1);
 }
 
 .sidebar {
-  height: 100%;
-  position: fixed;
+  height: 200vh;
   background-color: rgba(196, 196, 196, 1);
   display: grid;
   grid-template-rows: repeat(16, 6.25vh);
-  grid-template-columns: repeat(2, 12.5vw);
+  grid-template-columns: repeat(2, 8.33vw);
   grid-column: 1/2;
   
   z-index:1;
@@ -40,21 +38,17 @@ body {
 }
 .sideItem {
   display: grid;
-  text-align: center;
   background-color: rgba(104, 104, 104, 1);
-  opacity: 0.8;
+  opacity: 0.7;
   transform: none;
 }
-.sideItem:hover {
-  opacity: 1;
-  transition: opacity .5s;
-}
 .sideText {
   font-family: "Roboto";
   font-size: 24px;
   color: white;
   grid-column: 2/3;
-  text-align: center;
+  margin-right: 5px;
+  text-align: right;
 }
 #fridgeIcon {
   background-color: white;
@@ -119,18 +113,29 @@ body {
   text-align: center;
 }
 .addItem {
+  grid-column: 3/4;
+}
+.addItemButton {
+  margin-top: 35px;
+  margin-left: 20px;
+  margin-right: 20px;
+  background-color: rgba(175, 175, 175, 1);
+  border-radius: 100px;
+  opacity: 0.7;
+  transform: none;
+}
+.addItemText {
   font-family: "Roboto Medium";
   font-size: 18px;
-  grid-column: 3/5;
-  margin-top: 40px;
-  margin-left: 54px;
+  color: white;
   text-align: center;
 }
 .changeView {
+  background-color: rgba(228, 228, 228, 1);
   font-family: "Roboto Medium";
   font-size: 14px;
-  grid-column: 5/7;
-  margin-top: 40px;
+  grid-column: 5/6;
+  margin-top: 35px;
   text-align: center;
 }
 
@@ -139,13 +144,101 @@ body {
   grid-row: 2/3;
   background-color: white;
   display: grid;
+  grid-template-columns: 3vw repeat(3, 23vw) 3vw;
+  grid-template-rows: repeat(4, 20vh);
+  grid-column-gap: 3vw;
+  grid-row-gap: 3vw;
+}
+.listItem {
+  background-color: rgba(237, 237, 237, 1);
+  display: grid;
+  grid-template-columns: 10vw 15vw;
+  grid-template-rows: repeat(5, 5vh);
+  opacity: 0.7;
+  transform: none;
+}
+#listIcon {
+  grid-column: 1/2;
+  grid-row: 1/5;
+  text-align: center;
+  clip-path: circle();
+  background-color: rgba(196, 196, 196, 1);
+  margin: 5px;
+}
+.listText {
+  grid-column: 2/3;
+  text-align: left;
+  margin: 10px;
+}
+.daysLeft {
+  font-family: "Roboto Black";
+  font-size: 24px;
+}
+.product {
+  font-family: "Roboto Regular";
+  font-size: 20px;
+}
+.category {
+  font-family: "Roboto Regular";
+  font-size: 14px;
+}
+.one {
+  grid-column: 2/3;
+  grid-row: 1/2;
+}
+.two {
+  grid-column: 2/3;
+  grid-row: 2/3;
+}
+.three {
+  grid-column: 2/3;
+  grid-row: 3/4;
+}
+.four {
+  grid-column: 2/3;
+  grid-row: 4/5;
+}
+.five {
+  grid-column: 3/4;
+  grid-row: 1/2;
+}
+.six {
+  grid-column: 3/4;
+  grid-row: 2/3;
+}
+.seven {
+  grid-column: 3/4;
+  grid-row: 3/4;
+}
+.eight {
+  grid-column: 3/4;
+  grid-row: 4/5;
+}
+.nine {
+  grid-column: 4/5;
+  grid-row: 1/2;
+}
+.ten {
+  grid-column: 4/5;
+  grid-row: 2/3;
+}
+.eleven {
+  grid-column: 4/5;
+  grid-row: 3/4;
+}
+.twelve {
+  grid-column: 4/5;
+  grid-row: 4/5;
 }
-
 
 @font-face {
   font-family: Roboto Bold;
   src: url(Roboto-Bold.ttf);
 }
+@font-face {
+  font-family: Roboto Black;
+  src: url(Roboto-Black.ttf);
+}
 @font-face {
   font-family: Roboto Medium;
   src: url(Roboto-Medium.ttf);
@@ -155,6 +248,20 @@ body {
   src: url(Roboto-Regular.ttf);
 }
 
+
+.sideItem:hover {
+  opacity: 1;
+  transition: opacity .5s;
+}
+.listItem:hover {
+  opacity: 1;
+  transition: opacity .5s;
+}
+.addItemButton:hover {
+  opacity: 1;
+  transition: opacity .5s;
+}
+
 .main{
-  margin-left:23%;
+  margin-left: 23%;
 }
\ No newline at end of file