feat: add SidePeek

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -0,0 +1,94 @@
+.sidePeek {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0px;
+  width: 600px;
+  background-color: var(--Base-Background-Normal);
+  z-index: 100;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+}
+
+.sidePeek[data-entering] {
+  animation: slide-in 250ms;
+}
+
+.sidePeek[data-exiting] {
+  animation: slide-in 250ms reverse;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.title {
+  text-transform: uppercase;
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}
+
+.closeIcon {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.dialog {
+  height: 100%;
+}
+
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+@keyframes slide-in {
+  from {
+    right: -600px;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    top: 100vh;
+  }
+
+  to {
+    top: 70.047px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .sidePeek {
+    right: auto;
+    top: 70.047px;
+    width: 100%;
+    height: calc(100vh - 70.047px);
+  }
+
+  .sidePeek[data-entering] {
+    animation: slide-up 300ms;
+  }
+
+  .sidePeek[data-exiting] {
+    animation: slide-up 300ms reverse;
+  }
+}