feat: add auth buttons (#56)

Co-authored-by: Gabriel Daltoso <ggdaltoso@gmail.com>

Author: ykmsd

docs/.vitepress/theme/components/AuthButtons/AuthButtons.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{ place: 'navScreen' | 'navBar' }>();
+</script>
+
+<template>
+  <div :class="place === 'navScreen' ? 'navScreenContainer' : 'navBarContainer'">
+    <a href="https://stackblitz.com/sign_in" class="link light">Sign in</a>
+    <a href="https://stackblitz.com/register" class="link accent">Get started</a>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './linkStyles.scss';
+
+/**
+ * When we have enough space, we show auth buttons in nav bar.
+ * When we don't, we show them inside the hamburger menu.
+ */
+.navBarContainer {
+  margin-inline-start: 40px;
+  display: flex;
+  gap: 8px;
+  // this is when we hide top nav menu
+  @media screen and (max-width: 768px) {
+    margin-inline-start: 0px;
+  }
+  @media screen and (max-width: 580px) {
+    display: none;
+  }
+
+}
+
+.navScreenContainer {
+  display: none;
+  @media screen and (max-width: 768px) {
+    display: flex;
+    gap: 8px;
+    margin-block-start: 24px;
+  }
+
+  .link {
+    flex: 1;
+    justify-content: center;
+    height: 40px;
+  }
+}
+</style>

docs/.vitepress/theme/components/AuthButtons/NavBarAuthButtons.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import AuthButtons from './AuthButtons.vue';
+</script>
+
+<template>
+  <AuthButtons place="navBar" />
+</template>

docs/.vitepress/theme/components/AuthButtons/NavScreenAuthButtons.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import AuthButtons from './AuthButtons.vue';
+</script>
+
+<template>
+  <AuthButtons place="navScreen" />
+</template>

docs/.vitepress/theme/components/AuthButtons/linkStyles.scss

@@ -0,0 +1,48 @@
+
+.link {
+    --outline-color-hsl: 0, 0%, 100%;
+    --outline-opacity: 0.08;
+    --text-strong-color: #fff;
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 20px;
+    border-radius: 8px;
+    color: var(--text-strong-color);
+    font-size: 13px;
+    font-weight: 500;
+    text-decoration: none;
+    box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
+    background-color: hsla(224, 32%, 28%, 0.24);
+    backdrop-filter: blur(8px);
+    transition: 0.1s ease;
+    transition-property: background-color, box-shadow, color;
+  }
+  
+  .light {
+    &:hover {
+      --outline-opacity: 0.14;
+      color: var(--text-strong-color);
+      background-color: hsla(224, 32%, 28%, 0.54);
+    }
+    :root:not(.dark) & {
+      --outline-color-hsl: 224, 32%, 28%;
+      --outline-opacity: 0.1;
+      color: hsl(240, 6%, 23%);
+      background-color: hsla(224, 32%, 28%, 0.1);
+      &:hover {
+        --outline-opacity: 0.2;
+        background-color: transparent;
+      }
+    }
+  }  
+  
+  .accent {
+    --outline-opacity: 0.14;
+    color: var(--text-strong-color);
+    background-color: hsl(214, 87%, 51%);
+    &:hover {
+      --outline-opacity: 0.24;
+      background-color: hsl(208, 100%, 53%);
+    }
+  }

docs/.vitepress/theme/components/CustomLayout.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme';
 import Feedback from './Feedback/Feedback.vue';
+import NavBarAuthButtons from './AuthButtons/NavBarAuthButtons.vue';
+import NavScreenAuthButtons from './AuthButtons/NavScreenAuthButtons.vue';
 
 const { Layout } = DefaultTheme;
 </script>
 
 <template>
   <Layout>
-
+    <template #nav-bar-content-after>
+      <NavBarAuthButtons />
+    </template>
     <!-- <template #layout-top>
       <ViteConfBanner />
     </template> -->
 
     <template #doc-footer-before>
       <Feedback />
     </template>
+    <template #nav-screen-content-after>
+      <NavScreenAuthButtons />
+    </template>
   </Layout>
 </template>

docs/.vitepress/theme/styles/fixes.scss

@@ -130,6 +130,11 @@ padding-top: 8px;
   }
 }
 
+// Hide social links in the nav bar
+.VPSocialLinks.VPNavBarSocialLinks {
+  display: none;
+}
+
 // New body styles
 .vp-doc p,
 .vp-doc li {