feat: site header and nav on desktop

data-preservation-programs · Sep 5, 2023 · 889af12 · 889af12
1 parent 3dfea05
commit 889af12
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 27 deletions.
diff --git a/assets/scss/settings.scss b/assets/scss/settings.scss
@@ -16,7 +16,7 @@
  * project-to-project.
  */
 
-$gridWidth: 60rem;
+$gridWidth: 79.125rem;
 $standardGutter: 0.75rem;
 $baseFontSize: 16;
 $baseLeading: 1.2;

diff --git a/assets/scss/theme/utilities.scss b/assets/scss/theme/utilities.scss
@@ -93,6 +93,10 @@ $tundora: #414141;
   border-radius: 0.125rem;
 }
 
+@mixin transitionDefault {
+  transition: 200ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
+}
+
 @mixin tooltipMobilePosition {
   &:hover {
     &:before,

diff --git a/components/button/cta.vue b/components/button/cta.vue
@@ -5,6 +5,31 @@
     :class="['button-x', `theme__${props.theme}`]">
     <div class="inner-content">
 
+      <svg
+        v-if="theme === 'primary'"
+        width="25"
+        height="41"
+        viewBox="0 0 25 41"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="detail">
+        <path
+          d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
+          fill="#070707"
+          fill-opacity="0.2"
+          shape-rendering="crispEdges" />
+        <path
+          d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
+          fill="#FFC582"
+          shape-rendering="crispEdges"
+          class="fill-path" />
+        <path
+          d="M 24 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1"
+          stroke="#FFC582"
+          stroke-width="2"
+          shape-rendering="crispEdges" />
+      </svg>
+
       <div :class="['button-content', { hide: loading }]">
         <slot />
       </div>
@@ -62,7 +87,7 @@ const props = defineProps({
   &:not([disabled="true"]) {
     &:hover {
       .button-content {
-        transition: 150ms ease-in;
+        @include transitionDefault;
         text-decoration: none;
       }
     }
@@ -97,16 +122,71 @@ const props = defineProps({
 }
 
 .button-content {
-  transition: 150ms ease-out;
+  @include transitionDefault;
   &.hide {
     opacity: 0;
   }
 }
 
+.detail {
+  position: absolute;
+  top: 0;
+  right: calc(100% - 1px);
+  .fill-path {
+    opacity: 0;
+    @include transitionDefault;
+  }
+}
+
 // ////////////////////////////////////////////////////////////////////// Themes
 .theme__primary {
+  display: block;
+  width: fit-content;
+  filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
+  padding-left: toRem(25);
+  &:before {
+    content: '';
+    position: absolute;
+    left: toRem(25);
+    top: 0;
+    width: calc(100% - 25px);
+    height: 100%;
+    box-sizing: border-box;
+    border-top: solid 2px $chardonnay;
+    border-bottom: solid 2px $chardonnay;
+    border-right: solid 2px $chardonnay;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    background-color: rgba(7, 7, 7, 0.2);
+    @include transitionDefault;
+  }
+  .inner-content {
+    position: relative;
+    height: toRem(41);
+    padding: toRem(10) toRem(17) toRem(10) toRem(3);
+  }
   .button-content {
+    display: flex;
+    align-items: center;
+    width: fit-content;
     @include b1;
+    :deep(div) {
+      @include b1;
+      @include transitionDefault;
+    }
+  }
+  &:hover {
+    .detail {
+      .fill-path {
+        opacity: 1;
+      }
+    }
+    &:before {
+      background-color: $chardonnay;
+    }
+    .button-content {
+      color: $codGray;
+    }
   }
 }
 
@@ -115,4 +195,13 @@ const props = defineProps({
     @include b2;
   }
 }
+
+.theme__icon {
+  padding: toRem(9);
+  border-radius: 50%;
+  border: 2px solid $sageGreen;
+  .button-content {
+    display: flex;
+  }
+}
 </style>
diff --git a/components/icon/github-icon.vue b/components/icon/github-icon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 0C4.475 0 0 4.58819 0 10.2529C0 14.7899 2.8625 18.6219 6.8375 19.9804C7.3375 20.0701 7.525 19.7625 7.525 19.4934C7.525 19.2499 7.5125 18.4425 7.5125 17.5838C5 18.058 4.35 16.9558 4.15 16.3791C4.0375 16.0843 3.55 15.1743 3.125 14.9308C2.775 14.7386 2.275 14.2644 3.1125 14.2516C3.9 14.2388 4.4625 14.9949 4.65 15.3025C5.55 16.8533 6.9875 16.4175 7.5625 16.1484C7.65 15.4819 7.9125 15.0334 8.2 14.777C5.975 14.5207 3.65 13.6364 3.65 9.71466C3.65 8.59965 4.0375 7.67689 4.675 6.95918C4.575 6.70286 4.225 5.65193 4.775 4.24215C4.775 4.24215 5.6125 3.97301 7.525 5.29308C8.325 5.06239 9.175 4.94704 10.025 4.94704C10.875 4.94704 11.725 5.06239 12.525 5.29308C14.4375 3.9602 15.275 4.24215 15.275 4.24215C15.825 5.65193 15.475 6.70286 15.375 6.95918C16.0125 7.67689 16.4 8.58684 16.4 9.71466C16.4 13.6492 14.0625 14.5207 11.8375 14.777C12.2 15.0975 12.5125 15.7126 12.5125 16.6738C12.5125 18.0452 12.5 19.1474 12.5 19.4934C12.5 19.7625 12.6875 20.0829 13.1875 19.9804C15.1728 19.2935 16.8979 17.9854 18.12 16.2403C19.3421 14.4953 19.9997 12.4012 20 10.2529C20 4.58819 15.525 0 10 0Z" fill="#D3D3D3" />
+  </svg>
+</template>
diff --git a/components/icon/github.vue b/components/icon/github.vue
diff --git a/components/icon/slack-icon.vue b/components/icon/slack-icon.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.15188 9.47812C3.15188 10.3462 2.44313 11.0541 1.57594 11.0541C0.70875 11.0541 0 10.3463 0 9.47906C0 8.61187 0.70875 7.90313 1.575 7.90313H3.15188V9.47812ZM3.945 9.47812C3.945 8.61187 4.65375 7.90313 5.52094 7.90313C6.38812 7.90313 7.09688 8.61187 7.09688 9.47812V13.425C7.09688 14.2912 6.38812 15 5.52187 15C5.10421 14.9993 4.70384 14.8331 4.40834 14.538C4.11283 14.2428 3.94624 13.8427 3.945 13.425V9.47812ZM5.52187 3.15188C4.65375 3.15188 3.945 2.44313 3.945 1.57594C3.945 0.70875 4.65375 0 5.52187 0C6.39 0 7.09688 0.70875 7.09688 1.575V3.15188H5.52187ZM5.52187 3.945C6.38812 3.945 7.09688 4.65375 7.09688 5.52094C7.09688 6.38812 6.38812 7.09688 5.52187 7.09688H1.575C0.709687 7.09688 0 6.38812 0 5.52187C0 4.65375 0.70875 3.945 1.575 3.945H5.52187ZM11.8491 5.52187C11.8491 4.65375 12.5569 3.945 13.4241 3.945C14.2913 3.945 15 4.65375 15 5.52094C15 6.38812 14.2912 7.09688 13.425 7.09688H11.8491V5.52187ZM11.0541 5.52187C11.0541 6.38812 10.3463 7.09688 9.47906 7.09688C9.06156 7.09589 8.66143 6.92966 8.36613 6.63453C8.07083 6.3394 7.90436 5.93937 7.90313 5.52187V1.575C7.90313 0.709687 8.61187 0 9.47812 0C10.3462 0 11.0541 0.70875 11.0541 1.575V5.52187ZM9.47812 11.8481C10.3462 11.8481 11.055 12.5569 11.055 13.4241C11.055 14.2913 10.3462 15 9.47812 15C8.61 15 7.90219 14.2912 7.90219 13.425V11.8481H9.47812ZM9.47812 11.0541C8.61187 11.0541 7.90313 10.3463 7.90313 9.47906C7.90313 8.61187 8.61187 7.90313 9.47812 7.90313H13.425C14.2912 7.90313 15 8.61187 15 9.47812C15 10.3462 14.2912 11.0541 13.425 11.0541H9.47812Z" fill="#D3D3D3" />
+  </svg>
+</template>
diff --git a/components/navbar.vue b/components/navbar.vue
@@ -18,6 +18,7 @@
 
 <script setup>
 // ======================================================================= Props
+// eslint-disable-next-line
 const props = defineProps({
   links: {
     type: Array,
@@ -47,5 +48,38 @@ const props = defineProps({
 
 .nav-link {
   @include navButton;
+  @include transitionDefault;
+  position: relative;
+  padding: 0.25rem 0.5rem;
+  transform: translateY(0);
+  &:before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: toRem(17);
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    top: calc(100% + 5px);
+    left: calc(50% - 0.25rem);
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: $chardonnay;
+    opacity: 0;
+    transition: inherit;
+  }
+  &:hover {
+    transform: translateY(-1.125rem);
+    &:before {
+      height: toRem(30);
+    }
+    &:after {
+      opacity: 1;
+    }
+  }
 }
 </style>
diff --git a/components/site-header.vue b/components/site-header.vue
@@ -23,9 +23,11 @@
         </NuxtLink>
       </div>
 
-      <div class="col-7 nav-items" data-push-left="off-2">
-
+      <div class="col-4" data-push-left="off-2">
         <Navbar :links="navigation" class="desktop" />
+      </div>
+
+      <div class="col-3">
 
         <div class="nav-ctas">
           <ButtonCta
@@ -34,9 +36,13 @@
             :tag="cta.tag"
             :target="cta.target"
             :theme="cta.theme">
-            <component :is="getCtaComponent(cta)">
-              {{ cta.text || null }}
-            </component>
+            <component
+              :is="getCtaComponent(cta.icon)"
+              v-if="cta.icon"
+              class="icon" />
+            <span v-if="cta.text">
+              {{ cta.text }}
+            </span>
           </ButtonCta>
         </div>
 
@@ -61,7 +67,8 @@
 // ===================================================================== Imports
 import { storeToRefs } from 'pinia'
 import GeneralSiteData from '@/content/core/general.json'
-import IconGithub from '@/components/icon/github'
+const GithubIcon = resolveComponent('icon/github-icon')
+const SlackIcon = resolveComponent('icon/slack-icon')
 
 // ======================================================================== Data
 const generalStore = useGeneralStore()
@@ -88,7 +95,8 @@ watch(navigationOpen, (val) => {
 
 // ======================================================================= Hooks
 onMounted(() => {
-  console.log(navigation.value)
+  const instance = getCurrentInstance()
+  console.log(instance.appContext.components)
 })
 
 // ===================================================================== Methods
@@ -101,11 +109,13 @@ const toggleNav = () => {
 /**
  * @method getCtaComponent
  */
-const getCtaComponent = (cta) => {
-  if (cta.component) {
-    return cta.component
+const getCtaComponent = (icon) => {
+  switch (icon) {
+    case 'github' : return GithubIcon;
+    case 'slack' : return SlackIcon;
+    default : return 'span'
   }
-  return 'div'
+  
 }
 
 </script>
@@ -159,8 +169,9 @@ const getCtaComponent = (cta) => {
   justify-content: space-between;
 }
 
-:deep(.navigation) {
+:deep(.navbar) {
   &.desktop {
+    margin-right: 0.5rem;
     @include small {
       display: none;
     }
@@ -172,13 +183,19 @@ const getCtaComponent = (cta) => {
   justify-content: space-between;
   height: 100%;
   align-items: center;
+  padding: 0 toRem(28);
 }
 
 .desktop,
 .nav-ctas {
   flex-grow: 1;
 }
 
+.icon {
+  width: toRem(20);
+  height: toRem(20);
+}
+
 // /////////////////////////////////////////////////////////////////// Hamburger
 .nav-toggle-wrapper {
   display: none;

diff --git a/content/core/general.json b/content/core/general.json
@@ -35,14 +35,14 @@
     "ctas": [
       {
         "to": "https://github.com/data-preservation-programs/singularity",
-        "component": "IconGithub",
+        "icon": "github",
         "target": "_blank",
         "tag": "a",
         "theme": "icon"
       },
       {
         "to": "https://filecoinproject.slack.com/archives/C05JABREATH",
-        "component": "IconSlack",
+        "icon": "slack",
         "target": "_blank",
         "tag": "a",
         "theme": "icon"