feat: adds responsive web design and refactors Home test

SmartHomeCapstone/frontend/src/components/header/Header.css

@@ -12,7 +12,7 @@
 }
 
 main {
-  padding-top: 100px; 
+  padding-top: 100px;
 }
 
 .header-top-menu {
@@ -29,8 +29,8 @@ main {
 }
 
 h1.header-title a {
-    color: #fff;
-    text-decoration: none;
+  color: #fff;
+  text-decoration: none;
 }
 
 /* ==================== Header Center (Search) ==================== */
@@ -104,7 +104,10 @@ h1.header-title a {
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
-  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    background-color 0.3s ease,
+    color 0.3s ease;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
@@ -182,10 +185,196 @@ h1.header-title a {
   padding: 10px 15px;
   text-decoration: none;
   font-size: 0.85rem;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
 }
 
 .dropdown-menu a:hover {
   background: linear-gradient(90deg, #a0c4ff, #bdb2ff);
   color: #111;
 }
+
+/* ====================  Responsive Design ==================== */
+
+/* Tablet styles (768px - 1024px) */
+@media (max-width: 1024px) {
+  .header {
+    padding: 16px 24px;
+  }
+
+  .search-input {
+    width: 200px;
+  }
+
+  .header-right {
+    gap: 20px;
+  }
+
+  .dropdown-menu {
+    top: calc(100% + 8px);
+    min-width: 160px;
+  }
+}
+
+/* Mobile styles (up to 768px) */
+@media (max-width: 768px) {
+  .header {
+    padding: 12px 16px;
+  }
+
+  .header-left .header-title {
+    font-size: 1.2rem;
+  }
+
+  /* Mobile search - show as icon, expand when clicked */
+  .header-center {
+    display: flex;
+  }
+
+  .search-input {
+    width: 120px;
+    padding: 6px 10px;
+    font-size: 0.8rem;
+  }
+
+  .search-input.expanded {
+    width: 180px;
+    padding: 8px 12px;
+    opacity: 1;
+    background-color: #282828;
+    border: 1px solid #444;
+  }
+
+  .search-icon {
+    cursor: pointer;
+    padding: 8px;
+    color: #ccc;
+    transition: color 0.2s ease;
+  }
+
+  .search-icon:hover {
+    color: #fff;
+  }
+
+  .header-right {
+    gap: 16px;
+  }
+
+  /* Profile dropdown mobile adjustments */
+  .profile-dropdown {
+    padding: 6px 10px;
+  }
+
+  .profile-name {
+    display: none; /* Hide name on mobile to save space */
+  }
+
+  .dropdown-menu {
+    position: absolute !important;
+    top: calc(100% + 8px);
+    right: 0;
+    min-width: 140px;
+    max-width: calc(100vw - 32px);
+    z-index: 7000;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .dropdown-menu a {
+    padding: 12px 16px;
+    font-size: 0.9rem;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Adjust toggle switch for mobile */
+  .toggle-switch {
+    width: 48px;
+    height: 26px;
+  }
+
+  .toggle-slider {
+    width: 20px;
+    height: 20px;
+    top: 3px;
+    left: 3px;
+  }
+
+  .toggle-switch input:checked + .toggle-label .toggle-slider {
+    transform: translateX(20px);
+  }
+}
+
+/* Small mobile (up to 480px) */
+@media (max-width: 480px) {
+  .header {
+    padding: 10px 12px;
+  }
+
+  .search-input {
+    width: 100px;
+    padding: 5px 8px;
+    font-size: 0.75rem;
+  }
+
+  .search-input.expanded {
+    width: 140px;
+    padding: 6px 10px;
+    font-size: 0.85rem;
+  }
+
+  .header-left .header-title {
+    font-size: 1.1rem;
+  }
+
+  .header-right {
+    gap: 12px;
+  }
+
+  .profile-dropdown {
+    padding: 5px 8px;
+  }
+
+  .profile-picture {
+    width: 24px;
+    height: 24px;
+  }
+
+  .dropdown-menu {
+    min-width: 120px;
+    max-width: calc(100vw - 24px);
+    right: 0;
+  }
+
+  .dropdown-menu a {
+    padding: 10px 12px;
+    font-size: 0.85rem;
+  }
+
+  /* Smaller toggle for very small screens */
+  .toggle-switch {
+    width: 44px;
+    height: 24px;
+  }
+
+  .toggle-slider {
+    width: 18px;
+    height: 18px;
+  }
+
+  .toggle-switch input:checked + .toggle-label .toggle-slider {
+    transform: translateX(18px);
+  }
+}
+
+/* Landscape mobile adjustments */
+@media (max-width: 896px) and (orientation: landscape) {
+  .header {
+    padding: 8px 16px;
+  }
+
+  main {
+    padding-top: 80px;
+  }
+}