Skip to content

feat(navbar): add customization options for logo variant, divider sty… #128

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
alejandro-diazro wants to merge 1 commit into
base: main
Choose a base branch
from
+84 −8
Open

feat(navbar): add customization options for logo variant, divider sty… #128

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
9 changes: 9 additions & 0 deletions .changeset/navbar-enhancements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@ivao/atmosphere-react': minor
---

Enhanced Navbar component with new customization options:

- Added `logoVariant` prop: set to 'icon-only' to always show only the icon, or leave undefined for responsive behavior (icon on mobile, full logo on desktop)
- Added `diagonalDivider` prop: boolean to toggle between straight (default) and diagonal divider
- Changed `title` prop type from `string` to `ReactNode` to allow custom styling and formatting of the title
32 changes: 24 additions & 8 deletions components/react/src/components/molecules/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,43 @@
import { ComponentType, PropsWithChildren } from 'react';
import { ComponentType, PropsWithChildren, ReactNode } from 'react';

import { NavbarContainer } from '@components/atoms/navbar';

import { IVAOLogo } from 'src/main';
import { cn } from '@utils/styles';

interface NavbarProps {
title: string;
title: ReactNode;
logoVariant?: 'icon-only';
diagonalDivider?: boolean;
}

export const Navbar: ComponentType<PropsWithChildren<NavbarProps>> = ({
title,
children,
logoVariant,
diagonalDivider = false,
}) => {
return (
<NavbarContainer className="dark">
<div className={'flex items-center gap-3'}>
<div className="block md:hidden">
{logoVariant === 'icon-only' ? (
<IVAOLogo color={'white'} onlyIcon />
</div>
<div className="hidden md:block">
<IVAOLogo color={'white'} />
</div>
<div className={'h-6 w-px bg-ocean-400 dark:bg-fuselage-400'} />
) : (
<>
<div className="block md:hidden">
<IVAOLogo color={'white'} onlyIcon />
</div>
<div className="hidden md:block">
<IVAOLogo color={'white'} />
</div>
</>
)}
<div
className={cn(
'h-8 w-0.5 bg-ocean-400 dark:bg-fuselage-400',
Copy link
Collaborator

@CptnJon CptnJon Feb 17, 2026

Choose a reason for hiding this comment

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

Is the change for height and width required?

Copy link
Author

@alejandro-diazro alejandro-diazro Feb 17, 2026

Choose a reason for hiding this comment

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

If you were to add the logo function on its own, the dividing line would end up looking quite unbalanced. By tweaking these dimensions, you ensure much better visual consistency between the logo and the line. It creates a more harmonious look because the line thickness and the overall height align more naturally with the logo's proportions.

diagonalDivider && 'rotate-12',
)}
/>
<h1 className={'text-lg font-semibold text-white'}>{title}</h1>
</div>

Expand Down
51 changes: 51 additions & 0 deletions components/react/src/stories/components/Navbar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,31 @@ const meta = {
},
},
},
logoVariant: {
control: 'select',
options: [undefined, 'icon-only'],
description: 'Logo variant: undefined for responsive (icon on mobile, full logo on desktop), or "icon-only" to always show only the icon',
table: {
type: {
summary: "'icon-only' | undefined",
},
defaultValue: {
summary: 'undefined (responsive)',
},
},
},
diagonalDivider: {
control: 'boolean',
description: 'Use diagonal divider instead of straight',
table: {
type: {
summary: 'boolean',
},
defaultValue: {
summary: 'false',
},
},
},
},
} satisfies Meta<typeof Navbar>;

Expand All @@ -32,3 +57,29 @@ export const WithChildren = {
children: <Button>Button</Button>,
},
} satisfies Story;

export const IconOnly = {
args: {
logoVariant: 'icon-only',
},
} satisfies Story;

export const WithDiagonalDivider = {
args: {
diagonalDivider: true,
},
} satisfies Story;

export const IconOnlyWithDiagonalDivider = {
args: {
logoVariant: 'icon-only',
diagonalDivider: true,
},
} satisfies Story;

export const WithChildrenAndDiagonalDivider = {
args: {
children: <Button>Button</Button>,
diagonalDivider: true,
},
} satisfies Story;