Foundation Template
  • INTRODUCTION
    • Introduction
    • Getting Started
  • DESIGN & STRUCTURE
    • Core Concepts
    • Global Styles & Branding
    • Light / Dark Mode
    • Page Variables
      • Mobile Mode
      • App Settings
  • FOUNDATION
    • Header
    • Admin Portal
      • App Settings
      • Header
      • Pages & Sidebar Menu
      • Users
      • ChatGPT
      • Emails & Templates
        • SendGrid API
        • Workflows
        • Dynamic Tags
    • User Authentication
      • User Roles
      • Waitlist
      • Google SSO
    • Page Templates
      • Dashboard
      • Landing Page
      • Onboarding Page
    • Reusable Elements
      • Horizontal Scroll Table
      • Icon Selector
      • Page Sidebars
      • Popout Sidebar FG
    • Company, Team & Invites
  • Foundation AI
    • Coming Soon
Powered by GitBook
On this page
  • Header Structure:
  • Navigation Menu Items:
  • User Menu:
  • Workflow - Set Custom State: "Current Page" item
  1. FOUNDATION

Header

The Header is a core element for Foundation

PreviousApp SettingsNextAdmin Portal

Last updated 1 year ago

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.

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.)

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.

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

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.

Complete Onboarding:

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

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

Profile

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

Manage Billing

  • 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.

Company Settings

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

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.

More on page data in Pages & Sidebar Menu ->

Desktop Menu
Mobile Menu