Rebuild docs top nav to match the marketing header

data/docs_nav.yaml

@@ -0,0 +1,43 @@
+# Docs/tutorials top nav. Consumed by layouts/partials/docs-top-nav.html.
+# `showAt` (sm | md | lg) hides the item below that breakpoint.
+
+logoMenu:
+  - { label: Pulumi home,        href: /          }
+  - { label: Pricing,            href: /pricing/  }
+  - { label: Blog,               href: /blog/     }
+  - { label: Events & workshops, href: /events/   }
+
+items:
+  - label: Docs
+    href: /docs/
+    icon: book-open
+    track: header-docs
+    showAt: lg
+  - label: Registry
+    href: /registry/
+    icon: package
+    track: header-registry
+    showAt: lg
+  - label: Pulumi Neo
+    href: /product/neo/
+    icon: custom/pulumi-neo
+    iconWeight: fill
+    track: header-ai
+    showAt: lg
+  - label: Slack
+    href: https://slack.pulumi.com/
+    icon: brand/slack
+    track: header-slack
+    showAt: md
+
+cta:
+  github:
+    track: header-github-stars
+    showAt: sm
+  contact:   { label: Contact us, href: /contact/,                     track: header-contact,  showAt: sm }
+  signIn:    { label: Sign in,    href: https://app.pulumi.com/signin, track: header-console               }
+  dashboard: { label: Dashboard,  href: https://app.pulumi.com,        track: header-dashboard             }
+  getStarted:
+    label: Get started
+    href: /docs/get-started/
+    track: get-started-practitioner-nav

data/header_nav.yaml

@@ -55,7 +55,7 @@ items:
           - label: Documentation
             href: /docs/
             description: Complete guides and API references
-            icon: books
+            icon: book-open
             track: header-engineers-docs
           - label: Registry
             href: /registry/

layouts/partials/docs-top-nav.html

@@ -1,73 +1,80 @@
-<nav class="top-nav-bar docs actually-docs transition-all">
-    <div class="top-nav-container">
-        <div class="logo-get-started">
-            <div data-track="header-pulumi-logo" class="logo-nav-button logo-parent" aria-haspopup="true" aria-controls="logo-nav-menu">
-                <div class="logo">
-                    {{ partial "fingerprinted-img.html" (dict "src" "logos/brand/logo-on-white.svg" "alt" "Pulumi logo" "width" "96" "height" "24" "loading" "eager") }}
-                    {{ partial "icon.html" (dict "name" "caret-down" "weight" "bold") }}
-                </div>
-                <ul id="logo-nav-menu" role="menu" class="logo-nav-menu hidden">
-                    <li role="none"><a role="menuitem" href="/">Pulumi home</a></li>
-                    <li role="none"><a role="menuitem" href="/pricing/">Pricing</a></li>
-                    <li role="none"><a role="menuitem" href="/blog/">Blog</a></li>
-                    <li role="none"><a role="menuitem" href="/events/">Events & workshops</a></li>
-                </ul>
-            </div>
-            <div class="get-started">
-                <a class="btn btn-primary" data-track="get-started-practitioner-nav" href="/docs/get-started/">Get Started</a>
-            </div>
-        </div>
-        <div class="nav-items">
-            <ul>
-                <li class="github-widget">
-                    <a
-                        data-track="header-github-pulumi"
-                        class="github-button"
-                        href="https://github.com/pulumi/pulumi"
-                        data-size="small"
-                        data-show-count="true"
-                        aria-label="Star pulumi/pulumi on GitHub"
-                    >
-                        Star
-                    </a>
-                </li>
-                <li class="slack">
-                    <a data-track="header-slack" href="https://slack.pulumi.com/">
-                        {{ partial "icon.html" (dict "name" "brand/slack") }}
-                        Slack
-                    </a>
-                </li>
-                <li class="docs">
-                    <a data-track="header-docs" href="/docs/">
-                        {{ partial "icon.html" (dict "name" "books") }}
-                        Docs
-                    </a>
-                </li>
-                <li class="registry">
-                    <a data-track="header-registry" href="/registry/">
-                        {{ partial "icon.html" (dict "name" "package") }}
-                        Registry
-                    </a>
-                </li>
-                <li class="ai">
-                    <a data-track="header-ai" href="/product/neo/">
-                        {{ partial "icon.html" (dict "name" "custom/pulumi-neo" "weight" "fill") }}
-                        Pulumi Neo
-                    </a>
-                </li>
-                <li class="contact">
-                    <a data-track="header-contact" href="/contact/">
-                        {{ partial "icon.html" (dict "name" "chat-circle") }}
-                        Contact Us
-                    </a>
-                </li>
-                <li>
-                    <a data-track="header-console" href="https://app.pulumi.com/signin">
-                        {{ partial "icon.html" (dict "name" "user-circle") }}
-                        {{ partial "top-nav-user-toggle" }}
-                    </a>
-                </li>
-            </ul>
-        </div>
+{{- $nav := site.Data.docs_nav -}}
+{{- /* Keep these as literal class strings so Tailwind's content scan finds them. */ -}}
+{{- $showAt := dict
+    "sm" "hidden sm:inline-flex"
+    "md" "hidden md:inline-flex"
+    "lg" "hidden lg:inline-flex" -}}
+
+<header class="z-40 w-full border-b border-gray-200 bg-white">
+  <div class="flex h-16 items-center justify-between gap-2 px-4 md:px-6">
+
+    <div class="relative shrink-0">
+      <button type="button"
+        data-logo-nav-trigger
+        data-track="header-pulumi-logo"
+        aria-haspopup="menu"
+        aria-expanded="false"
+        aria-controls="logo-nav-menu"
+        class="group/logo flex gap-2 shrink-0 items-center rounded-md transition-opacity hover:opacity-80 focus-visible:ring-3 focus-visible:ring-violet-400/50 focus-visible:ring-offset-4 focus-visible:outline-1 focus-visible:outline-transparent">
+        {{ partial "fingerprinted-img.html" (dict "src" "logos/brand/logo-on-white.svg" "alt" "Pulumi logo" "class" "h-7 w-auto" "width" "112" "height" "28" "loading" "eager") }}
+        {{ partial "icon.html" (dict "name" "caret-down" "weight" "bold" "class" "text-gray-500 group-hover/logo:text-violet-500 [[aria-expanded=true]_&]:text-violet-300 size-3 transition duration-300 [[aria-expanded=true]_&]:rotate-180") }}
+      </button>
+      <div id="logo-nav-menu"
+        data-logo-nav-menu
+        role="menu"
+        hidden
+        class="card absolute left-0 top-full z-50 mt-1 w-[240px] bg-white py-2 text-gray-950 shadow">
+        <ul class="flex flex-col gap-0.5">
+          {{ range $item := $nav.logoMenu }}
+            <li role="none"><a role="menuitem" href="{{ $item.href }}"
+              class="block rounded-md px-3 py-2 text-sm font-semibold text-gray-950 outline-none transition-colors hover:bg-violet-50 hover:text-violet-primary focus-visible:bg-violet-50 focus-visible:ring-3 focus-visible:ring-violet-400/50">{{ $item.label }}</a></li>
+          {{ end }}
+        </ul>
+      </div>
     </div>
-</nav>
+
+    <div class="flex items-center gap-2">
+      {{ range $item := $nav.items }}
+        <a href="{{ $item.href }}"
+          {{ with $item.track }}data-track="{{ . }}"{{ end }}
+          class="{{ index $showAt $item.showAt }} btn btn-ghost-nav gap-1.5">
+          {{ partial "icon.html" (dict "name" $item.icon "weight" (default "regular" $item.iconWeight)) }}
+          {{ $item.label }}
+        </a>
+      {{ end }}
+
+      {{ partial "github-star-button.html" (dict
+          "variant" "header"
+          "track" $nav.cta.github.track
+          "extraClass" (index $showAt $nav.cta.github.showAt)) }}
+
+      <a href="{{ $nav.cta.contact.href }}"
+        {{ with $nav.cta.contact.track }}data-track="{{ . }}"{{ end }}
+        class="{{ index $showAt $nav.cta.contact.showAt }} btn btn-outline gap-1.5">
+        {{ $nav.cta.contact.label }}
+      </a>
+      <a href="{{ $nav.cta.signIn.href }}"
+        {{ with $nav.cta.signIn.track }}data-track="{{ . }}"{{ end }}
+        data-nav-loggedout
+        class="btn btn-outline">
+        {{ $nav.cta.signIn.label }}
+      </a>
+      <a href="{{ $nav.cta.dashboard.href }}"
+        {{ with $nav.cta.dashboard.track }}data-track="{{ . }}"{{ end }}
+        data-nav-dashboard
+        class="btn btn-primary">
+        {{ $nav.cta.dashboard.label }}
+      </a>
+      <a href="{{ $nav.cta.getStarted.href }}"
+        {{ with $nav.cta.getStarted.track }}data-track="{{ . }}"{{ end }}
+        data-role="cta-get-started"
+        data-nav-loggedout
+        class="btn btn-primary">
+        {{ $nav.cta.getStarted.label }}
+      </a>
+    </div>
+
+  </div>
+</header>
+
+<script src="/js/{{ index site.Data.js_manifest "header-nav" }}" defer></script>

layouts/partials/head.html

@@ -390,4 +390,15 @@
     {{ if and (eq .Type "blog") .IsPage .Params.updated }}
         <meta http-equiv="last-modified" content="{{ (time .Params.updated).Format "2006-01-02T15:04:05Z0700" }}" />
     {{ end }}
+
+    {{- /* Sets <html class="is-signed-in"> before first paint when the auth
+           cookie is present, so the header's Sign-in -> Dashboard swap doesn't
+           cause layout shift for logged-in users. Paired with CSS in main.scss. */ -}}
+    <script>
+      try {
+        var c = document.cookie.split("; ").find(function (s) { return s.indexOf("pulumi_web_user_info=") === 0; });
+        var v = c ? JSON.parse(decodeURIComponent(c.slice(c.indexOf("=") + 1)).slice(2)) : null;
+        if (v && v.userId) document.documentElement.classList.add("is-signed-in");
+      } catch (e) {}
+    </script>
 </head>

layouts/partials/header.html

@@ -1,9 +1,5 @@
 {{ if or (hasPrefix .RelPermalink "/docs/") (hasPrefix .RelPermalink "/tutorials/") }}
 {{ partial "docs-top-nav" . }}
-<div class="header-container docs-hero">
-    <span class="hide-on-pinned"> </span>
-    {{ .Scratch.Set "mode" .Section }}
-</div>
 {{ else }}
 {{ partial "header/nav.html" . }}
 {{ end }}

layouts/partials/header/nav-mobile-sheet.html

@@ -91,7 +91,6 @@ <h2 id="nav-mobile-sheet-title" class="sr-only">Navigation</h2>
     <a href="https://app.pulumi.com"
       data-track="header-dashboard"
       data-nav-dashboard
-      style="display:none"
       class="btn btn-primary">
       Dashboard
     </a>

layouts/partials/header/nav.html

@@ -33,7 +33,6 @@
       <a href="https://app.pulumi.com"
          data-track="header-dashboard"
          data-nav-dashboard
-         style="display:none"
          class="hidden nav-desktop:inline-flex btn btn-primary">
         Dashboard
       </a>
@@ -65,7 +64,6 @@
           <a href="https://app.pulumi.com"
              data-track="header-dashboard"
              data-nav-dashboard
-             style="display:none"
              class="btn btn-primary">
             Dashboard
           </a>