Update the default layout style of your SaaS | Next.js Supabase SaaS Starter Kit
Learn how to update the default layout style of your Makerkit application
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=headerNEXT_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=trueNEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED=true
You can decide the configuration granularly for the each workspace.
Auto-expanding the Sidbar 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.
Loading video...
Header Layout
And here is header
layout: