refactor: Move Sidepeek param logic to SidePeekProvider

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -1,38 +1,9 @@
-.sidePeek {
-  position: fixed;
-  top: var(--current-mobile-site-header-height);
-  right: auto;
-  bottom: 0;
-  width: 100%;
-  height: calc(100vh - var(--current-mobile-site-header-height));
-  background-color: var(--Base-Background-Primary-Normal);
-  z-index: 100;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
-}
-
-.sidePeek[data-entering] {
-  animation: slide-up 300ms;
-}
-
-.sidePeek[data-exiting] {
-  animation: slide-up 300ms reverse;
-}
-
-.dialog {
-  height: 100%;
-}
-
-.overlay {
-  position: absolute;
-  top: var(--current-mobile-site-header-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 99;
+.modal {
+  --sidepeek-desktop-width: 600px;
 }
 @keyframes slide-in {
   from {
-    right: -600px;
+    right: calc(-1 * var(--sidepeek-desktop-width));
   }
 
   to {
@@ -46,24 +17,84 @@
   }
 
   to {
-    top: var(--current-mobile-site-header-height);
+    top: 0;
   }
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--Base-Background-Primary-Normal);
+  z-index: 100;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+}
+
+.modal[data-entering] {
+  animation: slide-up 300ms;
+}
+
+.modal[data-exiting] {
+  animation: slide-up 300ms reverse;
+}
+
+.dialog {
+  height: 100%;
+}
+
+.sidePeek {
+  display: grid;
+  grid-template-rows: min-content auto;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  align-items: center;
+  padding: var(--Spacing-x4);
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeButton {
+  padding: 0;
+}
+
+.sidePeekContent {
+  padding: var(--Spacing-x4);
+}
 @media screen and (min-width: 1367px) {
-  .sidePeek {
+  .modal {
     top: 0;
     right: 0px;
-    width: 600px;
+    width: var(--sidepeek-desktop-width);
     height: 100vh;
   }
-  .sidePeek[data-entering] {
+
+  .modal[data-entering] {
     animation: slide-in 250ms;
   }
 
-  .sidePeek[data-exiting] {
+  .modal[data-exiting] {
     animation: slide-in 250ms reverse;
   }
+
   .overlay {
     top: 0;
   }