changes

public/styles.css

@@ -24,7 +24,6 @@
 
 .qrcode-image {
   object-fit: contain;
-  grid-column:2;
 }
 
 /* Close button */
@@ -36,63 +35,30 @@
   cursor: pointer;
 }
 
-.grid {
-}
 
-
-/* General Reset */
 body {
-  margin: 0;
-  font-family: Arial, sans-serif;
   display: grid;
-  grid-template-columns: 1fr 3fr;
-  height: 100vh; /* Full viewport height */
+  grid-template-columns: 240px auto;
+  grid-template-rows: 40px auto;
+  font-family: Arial, sans-serif;
 }
 
-/* Sidebar (Nav Links) */
-.nav-links {
-  background-color: #f4f4f4; /* Light gray background */
-  padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Add a slight shadow for separation */
+.nav {
   grid-column: 1;
-  min-height: 100vh; /* Stretch to full viewport height */
+  grid-row: 1 / 3;
+  background-color: #FFC0C0;
 }
 
-.nav-links nav ul {
-  list-style: none; /* Remove bullet points */
-  padding: 0;
-}
-
-.nav-links nav ul li {
-  margin: 10px 0; /* Add spacing between links */
-}
-
-.nav-links nav ul li a {
-  text-decoration: none; /* Remove underline */
-  color: #333;
-}
-
-.nav-links nav ul li a:hover {
-  color: #007BFF; /* Change link color on hover */
+.message {
+  grid-column: 2;
+  grid-row: 1;
+  background-color: #C0FFC0;
+  align-content: center;
+  justify-items: center;
 }
 
 .content {
   grid-column: 2;
-  flex-grow: 1; /* Allow content to fill the remaining space */
-  padding: 20px;
+  grid-row: 2;
+  background-color: #C0C0FF;
 }
-
-.menu-icon {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.menu-icon span {
-  display: block;
-  width: 25px;
-  height: 3px;
-  margin: 5px 0;
-  background: #fff;
-  transition: 0.4s;
-}
-