add top-level nav

anycable · Apr 13, 2024 · d41797c · d41797c
1 parent f4809dd
commit d41797c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 23 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,3 @@
-import './js/components/header-show-hide';
 import './js/components/popups-show-hide';
 import './js/components/learn-more-scroll';
 import './js/components/demo';

diff --git a/src/modules/blocks/header.scss b/src/modules/blocks/header.scss
@@ -1,27 +1,25 @@
 $className: 'header';
 
 .#{$className} {
-  display: none; //prevents flickering while loading
+  height: 60px;
   justify-content: center;
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 10;
-  transform: translateY(-100px);
-  opacity: 0;
   transition: all 0.3s;
+  background: $backgroundPrimaryColor;
+  border-bottom: 1px solid $borderPrimaryColor;
 
-  &_shown {
-    // show header
-    transform: translateY(0);
-    opacity: 1;
+  @include mediaMax($mobile) {
+    position: fixed;
   }
 
   &__content {
     flex-grow: 1;
     max-width: 1920px;
-    padding: 24px 64px 0;
+    padding: 12px 64px;
     min-height: 40px;
     display: flex;
     align-items: center;
@@ -32,8 +30,42 @@ $className: 'header';
     }
   }
 
-  &__logo {
+  &__left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__links {
+    margin-left: 64px;
+
+    @include mediaMax($tablet) {
+      margin-left: 24px;
+    }
+
+    @include mediaMax($mobile) {
+      margin-left: 12px;
+    }
+  }
+
+  &__link {
     color: $accentPrimaryColor;
+    font-weight: 500;
+    text-decoration: none;
+    transition: opacity $opacityPrimaryTransition;
+
+    &:hover {
+      opacity: 0.8;
+      text-decoration: underline;
+    }
+
+    &:not(:first-child) {
+      margin-left: 24px;
+    }
+  }
+
+  &__logo {
+    color: $fontPrimaryColor;
     font-weight: 700;
     font-size: 20px;
     line-height: 1.6;

diff --git a/src/modules/blocks/main-slide.scss b/src/modules/blocks/main-slide.scss
@@ -23,6 +23,7 @@ $className: 'main-slide';
   }
 
   &__left-content {
+    margin-top: -60px;
     box-sizing: border-box;
     width: 100%;
     max-width: 960px;
@@ -34,6 +35,7 @@ $className: 'main-slide';
 
     @include mediaMax($tablet) {
       max-width: 100%;
+      margin-top: -12px;
       padding-top: 43px;
       border-left: none;
     }
@@ -48,7 +50,7 @@ $className: 'main-slide';
     width: 100%;
     max-width: 960px;
     height: 100%;
-    padding: 120px 64px 30px;
+    padding: 60px 64px 30px;
 
     @include mediaMax($tablet) {
       background-color: $backgroundPrimaryColor;

diff --git a/src/modules/common.scss b/src/modules/common.scss
@@ -18,6 +18,12 @@
   }
 }
 
+.no-mobile {
+  @include mediaMax($mobile) {
+    display: none;
+  }
+}
+
 .desktop-only {
   @include mediaMax($tablet) {
     display: none;

diff --git a/src/partials/header.hbs b/src/partials/header.hbs
@@ -1,6 +1,13 @@
 <header class='header'>
   <nav class='header__content'>
-    <p class='header__logo'>AnyCable</p>
+    <div class='header__left'>
+      <p class='header__logo'>AnyCable</p>
+      <div class='header__links'>
+        <a href="https://docs.anycable.io" target="_blank" class="header__link no-mobile" data-ph-capture-attribute-link-id="nav-docs">Docs</a>
+        <a href="https://blog.anycable.io" target="_blank" class="header__link no-mobile" data-ph-capture-attribute-link-id="nav-blog">Blog</a>
+        <a href="#pricing" class="header__link" data-ph-capture-attribute-link-id="nav-pricing">Pricing</a>
+      </div>
+    </div>
     <a href="https://plus.anycable.io/pro" target="_blank" class="button" data-ph-capture-attribute-link-id='go-pro'>Sign up</a>
   </nav>
 </header>
diff --git a/src/partials/slides/main-slide.hbs b/src/partials/slides/main-slide.hbs
@@ -4,20 +4,12 @@
       {{inline 'images/logo.svg'}}
     </div>
     <div class='main-slide__right-content'>
-      <a
-        class='main-slide__github-link'
-        data-ph-capture-attribute-link-id='github'
-        href='https://github.com/anycable/anycable'
-        target='_blank'
-      >
-        {{inline 'images/github-logo.svg'}}
-      </a>
       <h1 class='main-slide__title' id='pro'>AnyCable</h1>
       <p class='main-slide__subtitle'>
         Realtime server for reliable two-way communication.
       </p>
       <div class='main-slide__text'>
-        <p>
+        <p class="no-mobile">
           Comes in different flavors: open source, managed, on-premise Pro.
         </p>
         <p>

diff --git a/src/partials/slides/plans-slide.hbs b/src/partials/slides/plans-slide.hbs
@@ -1,6 +1,6 @@
 <section class='slide plans-slide'>
   <div class='slide__title-wrapper'>
-    <h3 class='plans-slide__pretitle'>Pricing</h4>
+    <h3 class='plans-slide__pretitle' id="pricing">Pricing</h4>
     <h2 class='slide__title plans-slide__title'>Choose option</h2>
   </div>
   <ul class='plans-slide__content'>