Skip to content

Add work-in-progress new TopNav component #3267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rosslovas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add work-in-progress new TopNav component #3267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions dictionary-octopus.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ inetmgr
inetsrv
inkey
inlinable
inlines
INSTALLLOCATION
internalcustomer
ioutil
Expand Down Expand Up @@ -633,6 +634,7 @@ windir
windowsfeatures
Wireshark
WIXUI
wordmark
workerpool
workerpools
workertools
Expand Down
108 changes: 104 additions & 4 deletions public/docs/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@ hr {
border-bottom: 1px solid var(--header-separator-color);
}

.page-content a:not(.link) {
.page-content a:not(.link):not(.top-nav__link) {
color: var(--octo-blue);
}

.page-content a:hover,
.page-content a:focus {
.page-content a:hover:not(.top-nav__link),
.page-content a:focus:not(.top-nav__link) {
color: var(--body-link-color);
}

Expand Down Expand Up @@ -3343,6 +3343,28 @@ img.btn__icon {
color: var(--colorButtonIconDisabled);
}

/* Loud importance */
.btn--loud {
background: var(--colorButtonBackgroundLoudDefault);
/* Keep the border there but transparent as an easy way to ensure the geometry is exactly preserved */
border-color: transparent;
color: var(--colorButtonTextLoud);
font: var(--textBodyBoldMedium);
}

.btn--loud .btn__icon {
color: var(--colorButtonIconLoud);
}

.btn--loud:hover:not(:disabled),
.btn--loud:focus-visible {
background: var(--colorButtonBackgroundLoudHover);
}

.btn--loud:active:not(:disabled) {
background: var(--colorButtonBackgroundLoudPressed);
}

/* Buttons side by side e.g. a toolbar or the component showcase */
.btn-row {
display: flex;
Expand All @@ -3356,7 +3378,85 @@ img.btn__icon {
.btn-row + .btn-row {
margin-block-start: var(--space8);
}
/* Button.astro component end */
/* Button component end */

/* TopNav component */
.top-nav {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space24);
padding: var(--space16) var(--space24)
calc(var(--space16) - var(--borderWidth1));
border-block-end: var(--borderWidth1) solid var(--colorBorderPrimary);
background: var(--colorBackgroundPrimaryDefault);
}

.top-nav__leading,
.top-nav__trailing {
flex-shrink: 0; /* Disallow shrinking so button labels don't wrap across 2 lines */
}

.top-nav__leading {
display: flex;
align-items: center;
gap: var(--space64);
}

.top-nav__logo {
display: flex;
}

.top-nav__logo-mark {
display: block;
height: 2rem;
width: auto;
color: var(--colorTextPrimary);
}

.top-nav__links {
display: flex;
align-items: center;
gap: var(--space2);
}

.top-nav__trailing {
display: flex;
align-items: center;
gap: var(--space12);
}

a.top-nav__link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space8) var(--space12);
border-radius: var(--borderRadiusSmall);
background: var(--colorNavBackgroundRest);
color: var(--colorTextPrimary);
font: var(--textBodyRegularMedium);
text-align: center;
text-decoration: none;
}

a.top-nav__link:hover:not(.top-nav__link--active),
a.top-nav__link:focus:not(.top-nav__link--active) {
background: var(--colorNavBackgroundHover);
}

a.top-nav__link:focus-visible {
outline: var(--borderWidth2) solid var(--colorBorderSelected);
outline-offset: var(--borderWidth1);
}

a.top-nav__link--active {
background: var(--colorNavBackgroundActive);
color: var(--colorTextSelected);
font: var(--textBodyBoldMedium);
}
/* TopNav component end */

.inline-note {
position: absolute;
Expand Down
15 changes: 12 additions & 3 deletions public/docs/css/vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,10 @@
--octo-blue-lighter: #2f95e3ff;
--octo-blue-lightest: #1fc0ffff;

--font-family-system: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-family-system:
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--font-family: var(--font-family-system);
--heading-font: var(--font-family);
--body-font: var(--font-family);
Expand Down Expand Up @@ -254,6 +255,11 @@
--grid-gap-main: 1rem;

--standard-radius: 0.5rem;

/* TODO: drop these once color.nav.background.* are available in design-system-tokens */
--colorNavBackgroundRest: rgb(from var(--colorScalesBlue500) r g b / 0);
--colorNavBackgroundHover: var(--colorScalesSlate100);
--colorNavBackgroundActive: rgb(from var(--colorScalesBlue500) r g b / 0.06);
Comment on lines +259 to +262

@rosslovas rosslovas Jul 29, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe I need the design folks to get these added on my behalf, that would be appreciated whenever possible 🙇

@ellen-octopus ellen-octopus Jul 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rosslovas I'll work with design team next week to make these available

@enf0rc3 enf0rc3 Jul 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • dark mode as well

I assume that these ones: https://github.com/OctopusDeploy/OctopusDeploy/blob/main/frontend/packages/design-system-tokens/src/generated/lightTheme.css#L136-L144

are not for "top menu" but for Area Nav List? instead.

@ellen-octopus ellen-octopus Jul 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those are only for in-product navigation. We won't be using the same for the docs site :)

}

@media (max-width: 860px) {
Expand Down Expand Up @@ -309,4 +315,7 @@ html[data-theme='dark'] {
--icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu);
--separator-color: var(--navy-700);
--code-background: #0c1a24;

/* TODO: drop once color.nav.background.* are available in design-system-tokens */
--colorNavBackgroundHover: var(--colorScalesNavy800);
}
4 changes: 4 additions & 0 deletions src/assets/octopus-logo-v2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/components/Button.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ type Props = HTMLAttributes<'button'> & {
icon?: string; // URL to an SVG or a FontAwesome class
iconEnd?: string; // URL to an SVG or a FontAwesome class
size?: 'xSmall' | 'small' | 'medium';
importance?: 'default' | 'loud';
};

const {
label,
icon,
iconEnd,
size = 'medium',
importance = 'default',
disabled = false,
type = 'button',
class: className,
Expand All @@ -24,7 +26,7 @@ if (!label && !rest['aria-label'] && !rest['aria-labelledby']) {
throw new Error('An icon-only button needs an aria-label for screen readers');
}

const classes = `btn btn--${size.toLowerCase()}${className ? ` ${className}` : ''}`;
const classes = `btn btn--${size.toLowerCase()}${importance === 'loud' ? ' btn--loud' : ''}${className ? ` ${className}` : ''}`;
---

<button class={classes} type={type} disabled={disabled} {...rest}>
Expand Down
56 changes: 56 additions & 0 deletions src/components/TopNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
import Logo from '../assets/octopus-logo-v2.svg';
import Button from './Button.astro';

type Props = {
active?: string;
links?: { label: string; href: string }[];
};

// TODO: Make these real links
const {
active = 'Docs',
links = [
{ label: 'Docs', href: '#' },
{ label: 'Learn', href: '#' },
{ label: 'API', href: '#' },
{ label: 'CLI', href: '#' },
],
} = Astro.props;
---

<header class="top-nav">
<div class="top-nav__leading">
<a
class="top-nav__logo"
href="https://octopus.com"
aria-label="Octopus Deploy"
>
<Logo class="top-nav__logo-mark" aria-hidden="true" />
</a>
<nav class="top-nav__links" aria-label="Sections">
{
links.map(({ label, href }) => (
<a
class:list={[
'top-nav__link',
label === active && 'top-nav__link--active',
]}
href={href}
aria-current={label === active ? 'page' : undefined}
>
{label}
</a>
))
}
</nav>
</div>
<div class="top-nav__trailing">
<!-- All of these are just non-functional and for visual/presentation only at this stage -->
<Button icon="fa-regular fa-moon" aria-label="Switch to dark theme" />

@rosslovas rosslovas Jul 29, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I expected fa-regular fa-moon to be the outline like their website says, but it's exactly the same as solid 🤔 Not sure why, but I'm just leaving this as a placeholder for now anyhow, as I'm just trying to get the layout right at this early stage.

@enf0rc3 enf0rc3 Aug 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have just had an icon, that wasn't on the free fontawesome fonts, i opted to just copy the svg from design-system-icons

https://www.octopus.design/latest/foundations/icons/system-icons-upsPwkne

it has a moon there too, I just opened up a new claude in octopusdeploy repo and got it to write the prompt for me and extract the code, you can do a better prompt but for berevity this prompt gave me the exact svg and the instructions to implement

I need to use a u design-system-icons from here specifically the link-on icon, however the website doesnt support react and it uses css by js, for now i just want the one icon but we will look at other ways to get it, for the single icon how can i easily get the link-on in my astro html css js website? https://www.npmjs.com/package/@octopusdeploy/design-system-icons  (thats the package enerated by this repo's package)

<!-- TODO: Presumably at least some of these buttons should be <a> rather than <button> in practice, which isn't possible just yet -->
<Button label="Changelog" />
<Button label="Sign in" />
<Button label="Start for free" importance="loud" />
</div>
</header>
Loading