search

Header

The Header is a core element for Foundation

circle-info

The reusable Header element is at the top of every page, inside a Floating Group. The Header element does not have a max height due to the Group Focus menus. The max height is set on the Floating Group on each page.

hashtag
Header Structure:

The header contains Focus Groups and Popups that serve a variety of purposes.

The visible part of the header is the 'g:main' group. Within that are 3 main sections:

  1. g:mobile -- only visible when var - mobile mode? is yes

  2. g:desktop -- only visible when var - mobile mode? is yes

  3. g:static -- always visible. (User profile pic, light / dark toggle, etc.)

hashtag
Navigation Menu Items:

These nav items are in a repeating group of "Header Navigation Item" data types. The items in the navigation menu are managed in the admin portal.

The repeating group of navigation items is different on desktop vs. mobile.

Desktop Menu
Mobile Menu

  • Learn about managing the Header menu in the admin portal -> Header

hashtag
User Menu:

When a user is logged in, their profile will replace the Login / Signup buttons that logged out users see.

When the user profile is clicked, it shows a Group Focus menu that contains links relevant to only the Current User.

The same happens on mobile, but the user's name is hidden.

chevron-rightComplete Onboarding:hashtag

  • When user's Onboarding Complete = No, then this is visible.

  • It takes you to the Onboarding template page where completion progress is tracked.

chevron-rightProfilehashtag

  • Opens a popup where current user can manage their profile and account.

chevron-rightManage Billinghashtag

  • If the User has a Stripe subscription, this button is visible.

  • On click, it uses the Stripe API Connector to take the user to a secure customer portal managed by Stripe.

chevron-rightCompany Settingshashtag

If the user is a Company Owner, this will open a popup to manage that company's account and team members.

Learn more here -> Company, Team & Invites

hashtag
Workflow - Set Custom State: "Current Page" item

  1. On page load, the Header does a search for a Page item that matches the current page name.

  2. If a Page item doesn't exist in the database (and the user is Admin), then it creates a database item.

  3. It then sets it to a state on the Header. that's referenced by page variables.

circle-info

More on page data in Pages & Sidebar Menu ->

PreviousApp SettingsNextAdmin Portal

Last updated