Update the default layout style of your SaaS | Next.js Supabase SaaS Starter Kit

By default, Makerkit uses the sidebar layout style for both the user and the team workspaces.

You can change the layout style by setting the NEXT_PUBLIC_USER_NAVIGATION_STYLE and NEXT_PUBLIC_TEAM_NAVIGATION_STYLE environment variables. The default style is sidebar.

To set the layout style to header, update the environment variables:

NEXT_PUBLIC_TEAM_NAVIGATION_STYLE=header
NEXT_PUBLIC_USER_NAVIGATION_STYLE=header

Sidebar Layout

The default layout style is sidebar:

You can customize the sidebar layout to set it as expanded or collapsed. By default, it is always set to expanded.

NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED=true
NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED=true

You can decide the configuration for the each workspace.

Auto-expanding the Sidebar on Hover

You can set the sidebar to auto-expand on hover by setting the following environment variable:

NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER=true

This is a commonly used pattern in many SaaS apps - such as Supabase, or OpenAI.

Header Layout

And here is header layout: