Refactor: Extract sidebar into a reusable component

views/components/header/header.css

@@ -144,7 +144,8 @@
   margin: 0 15px; /* space around separator */
 
   /* stacked dots */
-  box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6),
+  box-shadow:
+    0 6px 0 rgba(255, 255, 255, 0.6),
     0 -6px 0 rgba(255, 255, 255, 0.6);
 }
 
@@ -328,7 +329,7 @@
     flex-grow: 1;
   }
 
-  .contact-section {
+  .header-contact-section {
     display: none; /* Hide contact info on mobile - it will be in sidebar */
   }
 

views/components/header/header.html

@@ -55,7 +55,7 @@
           </div>
 
           <!-- Contact Info - Horizontal Layout -->
-          <div class="col-lg-6 col-md-6 col-12 contact-section">
+          <div class="col-lg-6 col-md-6 col-12 header-contact-section">
             <div class="row g-3">
               <!-- Address -->
               <div class="col-md-6 col-12">