Skip to content

Header component#69

Open
javiert-okta wants to merge 19 commits intoui-redesignfrom
header-component
Open

Header component#69
javiert-okta wants to merge 19 commits intoui-redesignfrom
header-component

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Nov 26, 2025

By submitting a PR to this repository, you agree to the terms within the Auth0 Code of Conduct. Please see the contributing guidelines for how to create and submit a high-quality PR for this repo.

Description

The following PR adds the header component to the site (following the new design on Figma). This change includes:

  • A new Header component
  • Another component for rendering the header on mobile (MobileHeader component)
  • Update the layout to render the new Headers
  • Add the clsx package to include classnames on the components on a structured way
  • Add the new logo icon and deleted the old one
  • Include the theme switcher component and the logic to change themes (dark/light)
  • Add a theme service to handle theme switch
  • Change global style variables for new design

Screenshots

  • Light theme
    Desktop:
Screenshot 2026-01-12 at 10 54 12 AM

Mobile:

Screenshot 2026-01-12 at 10 56 11 AM Screenshot 2026-01-12 at 10 56 00 AM
  • Dark theme
    Desktop:
image

Mobile:

image image

References

Link to Figma design

Testing

  • Open the preview URL
  • Check that the header component matches the design in Figma for desktop, tablet, mobile, light theme and dark theme
  • Check that the theme switcher correctly changes between dark and light theme
  • Verify that the default theme is light
  • Check that the preferred theme selected by the user persist after sessions

Checklist

  • I have added documentation for new/changed functionality in this PR or in auth0.com/docs
  • All active GitHub checks for tests, formatting, and security are passing
  • The correct base branch is being used, if not the default branch

@github-actions
Copy link

@@ -0,0 +1,3 @@
export const DEFAULT_THEME = "dark";
Copy link
Contributor

Choose a reason for hiding this comment

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

PR description says "default theme is light" but code sets DEFAULT_THEME = "dark"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, default should be light.

[closeMobileMenu]
);

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this useEffect still needed, all code within is commented out.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is needed for mobile navigation and to automatically close the menu. I have uncommented it.

import { cookies } from "next/headers";
import { DEFAULT_THEME, PREFERRED_THEME_NAME, THEMES } from "../theme.config";

export const getThemeFromCookies = async (): Promise<string> => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This whole service does not seem to be used in the codebase.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have deleted it

@@ -0,0 +1,30 @@
type LinkInfo = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing trailing semicolons:

type LinkInfo = {
    id: string;
    label: string;
    pathname: string;
    isExternal?: boolean;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed

}
}

.burgerIconWrapper {
Copy link
Contributor

Choose a reason for hiding this comment

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

Some classnames are in camelCase, some are BEM-style. Can you choose one style and make this consistent?

@github-actions
Copy link

github-actions bot commented Mar 4, 2026

Base automatically changed from next-migration to ui-redesign March 5, 2026 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants