Skip to content

Commit 4822fc7

Browse files
karlcarstensenkarlcarstensen
committed
Shared component for nav
1 parent 6d9369a commit 4822fc7

File tree

3 files changed

+139
-194
lines changed

3 files changed

+139
-194
lines changed

‎docs-starlight/src/components/Header.astro‎

Lines changed: 22 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
---
2-
import config from 'virtual:starlight/user-config';
3-
import { Image } from 'astro:assets';
4-
import type { Props } from '@astrojs/starlight/props';
5-
import Search from 'virtual:starlight/components/Search';
6-
7-
import HeadphonesIcon from '@assets/headset-icon.svg';
8-
import ThemeToggle from '@components/ThemeToggle.astro';
9-
import PipelineIcon from '@assets/pipelines.svg';
10-
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
11-
2+
import NavbarContent from './shared/NavbarContent.astro';
123
import '@styles/global.css';
13-
/**
14-
* Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
15-
*/
16-
const shouldRenderSearch =
17-
config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
184
195
let starCountDisplay = '8.6k';
206
@@ -34,94 +20,31 @@ try {
3420
}
3521
---
3622

37-
<div class="sl-flex justify-between items-center px-5 py-5 xl:px-20">
38-
<!-- Logo -->
39-
<a href="/" class="hover:cursor-pointer">
40-
<Image
41-
alt="Terragrunt Logo"
42-
class="h-auto w-[145px] md:w-[180px] xl:w-[200px]"
43-
loading="eager"
44-
src={TerragruntLogo}
45-
/>
46-
</a>
47-
<!-- Right Menu -->
48-
<div class="flex items-center gap-6">
49-
<div class="flex items-center gap-6">
50-
<!-- Docs -->
51-
<div class="pr-0 sm:px-6 border-stroke-dark border-r-0 sm:border-r">
52-
<a href="/docs" class="flex items-center gap-2 text-gray-1 text-sm font-sans no-underline hover:underline hover:decoration-[var(--sl-color-gray-1)] hover:text-[var(--sl-color-gray-1)]">
53-
<svg class="hidden sm:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
54-
<path opacity="0.1" d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" fill="currentColor"/>
55-
<path d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
56-
<path d="M9 12H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
57-
<path d="M9 15H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
58-
</svg>
59-
<span>Docs</span>
60-
</a>
61-
</div>
62-
<!-- Socials -->
63-
<div class="hidden lg:flex items-center border-r border-stroke-dark pr-6 gap-4">
64-
<a href="https://github.com/gruntwork-io/terragrunt" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
65-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
66-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
67-
</svg>
68-
<span class="text-sm font-sans">{starCountDisplay}</span>
69-
</a>
70-
<a href="https://discord.com/invite/YENaT9h8jh" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
71-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
72-
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
73-
</svg>
74-
</a>
75-
</div>
76-
<!-- SearchBar -->
77-
<div class="hidden lg:block w-[280px]">
78-
{shouldRenderSearch && <Search {...Astro.props} />}
79-
</div>
80-
<!-- <div class="searchbar">
81-
<svg xmlns="http://www.w3.org/2000/svg" class="text-[var(--color-gray-1)]" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
82-
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
83-
</svg>
84-
<input class="text-sm font-sans text-[var(--color-gray-1)]" placeholder="Search"></input>
85-
</div> -->
86-
<ThemeToggle />
87-
</div>
88-
<div class="flex items-center gap-3 md:gap-3.5">
89-
<!-- Buttons -->
90-
<a href="#" class="hidden md:flex secondary-button h-[43px]">
91-
CI/CD for Terragrunt
92-
</a>
93-
<a href="#" class="flex md:hidden secondary-button !p-3">
94-
<Image
95-
src={PipelineIcon}
96-
alt="Pipeline Icon"
97-
width={20}
98-
height={20}
99-
/>
100-
</a>
101-
<a href="#" class="hidden md:flex primary-button h-[43px]">
102-
Support
103-
</a>
104-
<a href="#" class="flex md:hidden primary-button !p-3">
105-
<Image
106-
src={HeadphonesIcon}
107-
alt="Headphones Icon"
108-
width={20}
109-
height={20}
110-
class={"aspect-[1/1] h-auto"}
111-
/>
112-
</a>
113-
</div>
114-
</div>
23+
<div class="navbar">
24+
<NavbarContent
25+
starCountDisplay={starCountDisplay}
26+
showThemeToggle={true}
27+
/>
11528
</div>
11629

117-
<div class="block md:hidden justify-center bg-bg-dark px-5 py-2.5 border-b border-stroke-dark">
118-
<div class="flex items-center">
119-
{shouldRenderSearch && <Search {...Astro.props} />}
120-
</div>
121-
</div>
30+
<style>
31+
.navbar {
32+
display: flex;
33+
width: 100vw;
34+
height: auto;
35+
align-items: center;
36+
justify-content: space-between;
37+
background-color: var(--color-bg-dark);
38+
padding: 20px 80px;
39+
border-bottom: 1px solid var(--color-stroke-dark);
40+
}
12241

42+
@media (width <= 1024px) {
43+
.navbar {
44+
padding: 20px;
45+
}
46+
}
12347

124-
<style>
12548
.searchbar {
12649
display: flex;
12750
align-items: center;

‎docs-starlight/src/components/dv-Navbar.astro‎

Lines changed: 5 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
---
2-
import config from 'virtual:starlight/user-config';
3-
import type { Props } from '@astrojs/starlight/props';
4-
import { Image } from 'astro:assets';
5-
import Search from 'virtual:starlight/components/Search';
6-
7-
import HeadphonesIcon from '@assets/headset-icon.svg';
8-
import PipelineIcon from '@assets/pipelines.svg';
9-
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
2+
import NavbarContent from './shared/NavbarContent.astro';
103
import '@styles/global.css';
114
12-
/**
13-
* Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
14-
*/
15-
const shouldRenderSearch =
16-
config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
17-
185
let starCountDisplay = process.env.GITHUB_STARS || '8.6k';
196
207
try {
@@ -41,87 +28,10 @@ try {
4128
---
4229
<nav class="z-50 flex flex-col">
4330
<div class="navbar">
44-
<!-- Logo -->
45-
<a href="/" class="hover:cursor-pointer">
46-
<Image
47-
alt="Terragrunt Logo"
48-
class="h-auto w-[145px] md:w-[180px] xl:w-[200px]"
49-
loading="eager"
50-
src={TerragruntLogo}
51-
/>
52-
</a>
53-
<!-- Right Menu -->
54-
<div class="flex items-center gap-6">
55-
<div class="flex items-center gap-6">
56-
<!-- Docs -->
57-
<div class="pr-0 border-r lg:border-stroke-dark lg:px-6">
58-
<a href="/docs" class="flex items-center gap-2 text-gray-1 text-sm font-sans no-underline hover:underline hover:decoration-[var(--sl-color-gray-1)] hover:text-[var(--sl-color-gray-1)]">
59-
<svg class="hidden sm:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
60-
<path opacity="0.1" d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" fill="currentColor"/>
61-
<path d="M17.8284 6.82843C18.4065 7.40649 18.6955 7.69552 18.8478 8.06306C19 8.4306 19 8.83935 19 9.65685L19 17C19 18.8856 19 19.8284 18.4142 20.4142C17.8284 21 16.8856 21 15 21H9C7.11438 21 6.17157 21 5.58579 20.4142C5 19.8284 5 18.8856 5 17L5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H12.3431C13.1606 3 13.5694 3 13.9369 3.15224C14.3045 3.30448 14.5935 3.59351 15.1716 4.17157L17.8284 6.82843Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
62-
<path d="M9 12H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
63-
<path d="M9 15H15" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
64-
</svg>
65-
<span>Docs</span>
66-
</a>
67-
</div>
68-
<!-- Socials -->
69-
<div class="hidden lg:flex items-center border-r border-stroke-dark pr-6 gap-4">
70-
<a href="https://github.com/gruntwork-io/terragrunt" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
71-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
72-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
73-
</svg>
74-
<span class="text-sm font-sans">{starCountDisplay}</span>
75-
</a>
76-
<a href="https://discord.com/invite/YENaT9h8jh" class="social-icon flex items-center gap-2 transition .25s ease-in-out" target="_blank" rel="noopener noreferrer">
77-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
78-
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
79-
</svg>
80-
</a>
81-
</div>
82-
<!-- SearchBar -->
83-
<div class="hidden lg:block w-[280px]">
84-
{shouldRenderSearch && <Search {...Astro.props} />}
85-
</div>
86-
<!-- <div class="searchbar">
87-
<svg xmlns="http://www.w3.org/2000/svg" class="text-[var(--color-gray-1)]" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
88-
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
89-
</svg>
90-
<input class="text-sm font-sans text-[var(--color-gray-1)]" placeholder="Search"></input>
91-
</div> -->
92-
</div>
93-
<div class="flex items-center gap-3 md:gap-3.5">
94-
<!-- Buttons -->
95-
<a href="https://www.gruntwork.io/platform/pipelines" class="hidden md:flex secondary-button">
96-
CI/CD for Terragrunt
97-
</a>
98-
<a href="https://www.gruntwork.io/platform/pipelines" class="flex md:hidden secondary-button !p-3">
99-
<Image
100-
src={PipelineIcon}
101-
alt="Pipeline Icon"
102-
width={20}
103-
height={20}
104-
/>
105-
</a>
106-
<a href="https://www.gruntwork.io/services/terragrunt" class="hidden md:flex primary-button">
107-
Enterprise Support
108-
</a>
109-
<a href="https://www.gruntwork.io/services/terragrunt" class="flex md:hidden primary-button !p-3">
110-
<Image
111-
src={HeadphonesIcon}
112-
alt="Headphones Icon"
113-
width={20}
114-
height={20}
115-
class={"aspect-[1/1] h-auto"}
116-
/>
117-
</a>
118-
</div>
119-
</div>
120-
</div>
121-
<div class="block md:hidden justify-center bg-bg-dark px-5 py-2.5 border-b border-stroke-dark">
122-
<div class="flex items-center">
123-
{shouldRenderSearch && <Search {...Astro.props} />}
124-
</div>
31+
<NavbarContent
32+
starCountDisplay={starCountDisplay}
33+
showThemeToggle={false}
34+
/>
12535
</div>
12636
</nav>
12737

0 commit comments

Comments
 (0)