feat: APPS-2891 add header to page layout (#34)

* feat: add header to page layout * fix: build * chore: comment * fix: create space above events page sidebar column for sticky header --------- Co-authored-by: Jess Divers <[email protected]> Co-authored-by: JenDiamond <[email protected]>
UCLALibrary · Sep 3, 2024 · 9816519 · 9816519 · github-actions · Sep 3, 2024
1 parent 1371a86
commit 9816519
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 59 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -7,10 +7,9 @@ const classes = ref(['layout',
   'layout-default',])
 
 const primaryMenuItems = computed(() => {
-  return globalStore.header.primary
-})
-const secondaryMenuItems = computed(() => {
-  return globalStore.header.secondary
+  // convert file to typescript if we want to use '?' operator to avoid this
+  // ex: return globalStore?.header?.primary
+  return globalStore && (globalStore.header && globalStore.header.primary) ? globalStore.header.primary : null
 })
 
 const isMobile = ref(false)
@@ -24,36 +23,15 @@ onMounted(() => {
 </script>
 <template lang="html">
   <div :class="classes">
-    <!--header
-      v-show="!isMobile"
-      class="header-main"
-    >
-      <site-brand-bar class="brand-bar" />
-      <nav-secondary
-        :items="secondaryMenuItems"
-        :is-microsite="true"
-      />
-      <nav-primary
-        class="primary"
-        :items="primaryMenuItems"
-        title="Film And Telivision Archive"
-        acronym="FTVA"
-      />
-    </header>
-    <header v-show="isMobile">
-      <site-brand-bar class="brand-bar" />
-      <header-main-responsive
-        :primary-nav="primaryMenuItems"
-        :secondary-nav="secondaryMenuItems"
-        current-path="/about/foo/bar"
-        title="Film And Telivision Archive"
-        acronym="FTVA"
-      />
-    </header-->
+    <!-- site brand bar only shows on desktop -->
+    <site-brand-bar class="brand-bar" />
+    <header-sticky
+      v-if="primaryMenuItems"
+      class="primary"
+      :primary-items="primaryMenuItems"
+    />
 
     <slot />
-    <!-- <pre>PRIMARY-- {{ globalStore.footerPrimary }}</pre>
-    <pre>PRIMARY 2--- {{ globalStore.footerPrimary.nodes }}</pre> -->
     <div
       v-if="$route.path === '/'"
       style="padding: 50px 250px"
@@ -88,29 +66,24 @@ onMounted(() => {
 
   flex: 1 1 auto;
 
-}
-
-.vue-skip-to {
-  z-index: 300;
-}
-
-.header-main {
-  z-index: 200;
-
-  position: relative;
-  height: 168px;
+  .brand-bar {
+    width: 100%;
+    z-index: 100;
+  }
 
   .primary {
-    position: absolute;
+    position: sticky;
+    will-change: top;
   }
 
-  // TODO nav on smaller viewports
+  @media #{$small} {
+    .brand-bar {
+      display: none;
+    }
+  }
 }
 
-@media #{$medium} {
-  .brand-bar {
-    position: absolute;
-    width: 100%;
-  }
+.vue-skip-to {
+  z-index: 300;
 }
 </style>
diff --git a/package.json b/package.json
@@ -41,4 +41,4 @@
 		"ucla-library-design-tokens": "^5.22.0",
 		"ucla-library-website-components": "3.10.0"
 	}
-}
+}
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
@@ -241,10 +241,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // VARS - TO DO move to global? reference tokens?
 // WIDTH, HEIGHT, SPACING
 $max-width: 1160px;
@@ -325,7 +322,7 @@ $pale-blue: #E7EDF2;
 
       .sidebar-content-wrapper {
         position: sticky;
-        top: 0;
+        top: 85px;
         will-change: top;
       }
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,4 +41,4 @@ @@
     		"ucla-library-design-tokens": "^5.22.0",
     		"ucla-library-website-components": "3.10.0"
     	}
-    }
+    }