Merge pull request #21 from rtCamp/feature/adding-shared-header

Adding shared header to the demo site
rtCamp · Jan 23, 2024 · cc802ac · cc802ac
2 parents c985194 + 4a43b4b
commit cc802ac
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -590,6 +590,10 @@ video {
   top: 2rem;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -647,6 +651,14 @@ video {
   display: grid;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -663,6 +675,10 @@ video {
   width: 50%;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -916,6 +932,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -928,6 +950,10 @@ video {
   transition-duration: 300ms;
 }
 
+.last\:fixed:last-child {
+  position: fixed;
+}
+
 .hover\:bg-blue-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));

diff --git a/src/common/header.ejs b/src/common/header.ejs
@@ -9,5 +9,23 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="/assets/styles/style.css">
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const mainHeader = document.querySelector('.main-header');
+            const isIframe = window.self !== window.top;
+
+            if (mainHeader && isIframe) {
+                mainHeader.remove(); 
+            }
+        });
+    </script>
 </head>
 <body class="<%= backgroundColor %> flex flex-col min-h-screen">
+    <header class="main-header last:fixed w-full bg-white z-50 shadow-md">
+        <div class="container mx-auto flex items-center h-20 gap-4 p-4">
+            <img src="/assets/imgs/PS_Logo.svg" class="w-14 h-14" alt="Logo">
+            <a href="/">
+                <h1 class="text-xl font-bold">Privacy Sandbox Demos</h1>
+            </a>
+        </div>
+    </header>
diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -8,10 +8,6 @@
 <% } %>
 
 <div class="container-lg mx-auto py-8">
-    <div class="flex justify-center">
-        <img src="/assets/imgs/PS_Logo.svg" class="mx-auto w-24 h-24 mb-4" alt="Logo">
-    </div>
-    <h1 class="text-3xl font-bold mb-8 text-center">Privacy Sandbox</h1>
     <section class="text-center mb-4">
         <h2 class="text-3xl font-bold mb-4 text-center">Scenarios</h2>
         <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">