From 5ade4bcfa4dceec79fb27c2688e26b2a4b00cb95 Mon Sep 17 00:00:00 2001
From: ngnijland <ngnijland@gmail.com>
Date: Wed, 21 May 2025 18:17:56 +0200
Subject: [PATCH 1/3] feat: add login button to navigation menu

---
 docs/src/components/Navigation.astro | 52 ++++++++++++++++++++++------
 docs/src/pages/team-insights.astro   |  2 +-
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/docs/src/components/Navigation.astro b/docs/src/components/Navigation.astro
index fbd3182c..47551685 100644
--- a/docs/src/components/Navigation.astro
+++ b/docs/src/components/Navigation.astro
@@ -1,13 +1,16 @@
 ---
 import { Image } from "astro:assets";
 
+import NavigationLink from "./NavigationLink.astro";
+
 import appIcon from "../assets/rocketsim-app-icon.png";
 
 interface Props {
   isAlwaysActive?: boolean;
+  showLogin?: boolean;
 }
 
-const { isAlwaysActive } = Astro.props;
+const { isAlwaysActive, showLogin = false } = Astro.props;
 ---
 
 <style>
@@ -34,6 +37,14 @@ const { isAlwaysActive } = Astro.props;
       .navigation__logo {
         opacity: 1;
       }
+
+      .navigation__login {
+        opacity: 1;
+      }
+
+      .navigation__right-column {
+        opacity: 1;
+      }
     }
   }
 
@@ -46,16 +57,27 @@ const { isAlwaysActive } = Astro.props;
   }
 
   .navigation__logo {
-    display: none;
     width: 2.75rem;
     height: auto;
+  }
+
+  .navigation__login {
+    text-decoration: none;
+    color: #fff;
+    font-weight: 500;
+    margin-right: 1rem;
+  }
 
+  .navigation__right-column {
+    display: none;
     opacity: 0;
     transition: opacity 0.3s;
 
     @media (min-width: 850px) {
-      display: block;
+      display: flex;
+      align-items: center;
       grid-column: span 1 / -1;
+      gap: 1rem;
       justify-self: end;
     }
   }
@@ -75,6 +97,11 @@ const { isAlwaysActive } = Astro.props;
       gap: 3rem;
     }
   }
+
+  .link--login {
+    font-weight: 600;
+    text-decoration: none;
+  }
 </style>
 
 <div
@@ -90,13 +117,18 @@ const { isAlwaysActive } = Astro.props;
         <slot />
       </ul>
     </nav>
-    <Image
-      src={appIcon}
-      alt="RocketSim app icon"
-      width="88"
-      height="88"
-      class="navigation__logo"
-    />
+    <div class="navigation__right-column">
+      {showLogin ? (
+      <a href="https://teams.rocketsim.app" class="link link--login">Login</a>
+      ): null}
+      <Image
+        src={appIcon}
+        alt="RocketSim app icon"
+        width="88"
+        height="88"
+        class="navigation__logo"
+      />
+    </div>
   </div>
 </div>
 
diff --git a/docs/src/pages/team-insights.astro b/docs/src/pages/team-insights.astro
index a2f8ce55..e9a41a0e 100644
--- a/docs/src/pages/team-insights.astro
+++ b/docs/src/pages/team-insights.astro
@@ -28,7 +28,7 @@ import logoImage from "../assets/rocketsim-insights-logo.svg";
     Connect your team using the same license key and gather team insights like
     p75 build duration, machine benchmarks, and more.
   </Header>
-  <Navigation>
+  <Navigation showLogin>
     <NavigationLink href="#get-team-license" asButton>
       Get Team Licenses
     </NavigationLink>

From cbfb710c8a03126642243ecde60b258466ae9840 Mon Sep 17 00:00:00 2001
From: ngnijland <ngnijland@gmail.com>
Date: Thu, 22 May 2025 07:39:04 +0200
Subject: [PATCH 2/3] feat: add login button to top of page

---
 docs/src/components/Navigation.astro | 10 +++++-----
 docs/src/pages/team-insights.astro   | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/Navigation.astro b/docs/src/components/Navigation.astro
index 47551685..b03732e9 100644
--- a/docs/src/components/Navigation.astro
+++ b/docs/src/components/Navigation.astro
@@ -23,7 +23,7 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
     transition: border-bottom-color 0.3s;
     box-sizing: content-box;
 
-    @media (min-width: 850px) {
+    @media (min-width: 880px) {
       position: sticky;
       top: -1px;
       z-index: 100;
@@ -31,7 +31,7 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
   }
 
   .navigation-wrapper--sticky {
-    @media (min-width: 850px) {
+    @media (min-width: 880px) {
       border-bottom-color: rgba(255, 255, 255, 0.24);
 
       .navigation__logo {
@@ -49,7 +49,7 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
   }
 
   nav {
-    @media (min-width: 850px) {
+    @media (min-width: 880px) {
       display: flex;
       align-items: center;
       grid-column: 1 / -2;
@@ -73,7 +73,7 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
     opacity: 0;
     transition: opacity 0.3s;
 
-    @media (min-width: 850px) {
+    @media (min-width: 880px) {
       display: flex;
       align-items: center;
       grid-column: span 1 / -1;
@@ -92,7 +92,7 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
 
     list-style: none;
 
-    @media (min-width: 850px) {
+    @media (min-width: 880px) {
       flex-direction: row;
       gap: 3rem;
     }
diff --git a/docs/src/pages/team-insights.astro b/docs/src/pages/team-insights.astro
index e9a41a0e..f61ee5c5 100644
--- a/docs/src/pages/team-insights.astro
+++ b/docs/src/pages/team-insights.astro
@@ -15,10 +15,27 @@ import TeamTestimonial from "../components/TeamTestimonial.astro";
 import logoImage from "../assets/rocketsim-insights-logo.svg";
 ---
 
+<style>
+  .login-button-container {
+    position: absolute;
+    top: 1rem;
+    right: 0rem;
+    left: 0;
+    z-index: 1;
+  }
+
+  .button--login {
+    grid-column: span 1 / -1;
+  }
+</style>
+
 <BaseLayout
   pageTitle="Build Apps Faster with Insights - RocketSim"
   pageDescription="Simulator Airplane Mode, Location Simulation, Accessibility Testing, Compare designs inside the iOS simulator. Test deeplinks, push notifications."
 >
+<div class="login-button-container grid">
+    <a href="https://teams.rocketsim.app" class="button button--small button--login">Login</a>
+  </div>
   <Header
     title="Make your whole team Build Apps Faster"
     logo={logoImage}

From f7d88f8a247382288afb98c791f413c12f3314c6 Mon Sep 17 00:00:00 2001
From: ngnijland <ngnijland@gmail.com>
Date: Thu, 22 May 2025 07:41:49 +0200
Subject: [PATCH 3/3] fix: formatting and lint

---
 docs/src/components/Navigation.astro | 12 +++++++-----
 docs/src/pages/team-insights.astro   |  7 +++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/src/components/Navigation.astro b/docs/src/components/Navigation.astro
index b03732e9..08cc3fa6 100644
--- a/docs/src/components/Navigation.astro
+++ b/docs/src/components/Navigation.astro
@@ -1,8 +1,6 @@
 ---
 import { Image } from "astro:assets";
 
-import NavigationLink from "./NavigationLink.astro";
-
 import appIcon from "../assets/rocketsim-app-icon.png";
 
 interface Props {
@@ -118,9 +116,13 @@ const { isAlwaysActive, showLogin = false } = Astro.props;
       </ul>
     </nav>
     <div class="navigation__right-column">
-      {showLogin ? (
-      <a href="https://teams.rocketsim.app" class="link link--login">Login</a>
-      ): null}
+      {
+        showLogin ? (
+          <a href="https://teams.rocketsim.app" class="link link--login">
+            Login
+          </a>
+        ) : null
+      }
       <Image
         src={appIcon}
         alt="RocketSim app icon"
diff --git a/docs/src/pages/team-insights.astro b/docs/src/pages/team-insights.astro
index f61ee5c5..85854bd7 100644
--- a/docs/src/pages/team-insights.astro
+++ b/docs/src/pages/team-insights.astro
@@ -33,8 +33,11 @@ import logoImage from "../assets/rocketsim-insights-logo.svg";
   pageTitle="Build Apps Faster with Insights - RocketSim"
   pageDescription="Simulator Airplane Mode, Location Simulation, Accessibility Testing, Compare designs inside the iOS simulator. Test deeplinks, push notifications."
 >
-<div class="login-button-container grid">
-    <a href="https://teams.rocketsim.app" class="button button--small button--login">Login</a>
+  <div class="login-button-container grid">
+    <a
+      href="https://teams.rocketsim.app"
+      class="button button--small button--login">Login</a
+    >
   </div>
   <Header
     title="Make your whole team Build Apps Faster"