Application shell

The Application Shell component provides an uniform way to wrap your application content. It holds all the necessary logic to proper scale and provide a consistent mobile US. Its main features are:

• A header with submenu and mobile menu
• A navigation bar
• A main content area that can be used to display the application content (optional XerMainShell component)
• A footer with language switch, legal link and optional sitemap link

NavBar

Side NavBar mode

Side NavBar mode is the default mode. It displays a tree-style NavBar (up to 1 level deep) to the left of the content on large screens. On smaller screens a header button to toggle an overlay navbar is displayed.

Important

Parent items that contain subContent should not set a command or link value.

Bottom NavBar mode

Bottom NavBar mode is displayed when prop navBar.mode is set to "bottom".
It displays a up to 5 top-level NavBar items to the bottom of the content. When available, subContent for the active top-level item will be displayed above the content (below the header) in a scrolling SubNavBar.
This is the prefered mode for native mobile applications.

Important

Command items or command subItems are not currently supported in Bottom NavBar mode.

Important

Parent items that contain subContent should not set a command or link value.
Parent items will link to the first subItem link, which will cause the BottomNavBar's SubNavBar to be displayed.

No NavBar

When there is no content, the NavBar will be hidden.

XerMainShell component

The XerMainShell component is an optional component that can be used to wrap the main content of your application. It provides a consistent layout (responsive and optional wave figure) which is set in the foundations of the Codey design system. It is recommended to use this component to ensure a consistent look and feel, but you can opt out by not using it.

Usage

...
<template>
  <XerApplicationShell v-bind="appShellProps">
    <XerMainShell>
      {{ /* Your main application content goes here */ }}
    </XerMainShell>
  </XerApplicationShell>
</template>
...

It is possible to add and overwrite the default set classes by passing the class attribute on the XerMainShell component. It is possible to opt-out of the wave figure by setting the showWave prop to false.

...
<template>
  <XerApplicationShell v-bind="appShellProps">
    <XerMainShell class="w-fit" :show-wave="false">
      ... // Your main application content goes here
    </XerMainShell>
  </XerApplicationShell>
</template>
...

Note

If you wish to set the wave figure yourself we would recommend to inspire your code by the With Partner Icon example.

Showcase

Note

Running an Application Shell within the documentation does not fully represent how the behavior of the shell will be in a real application. The main goal is to showcase the configuration options and the structure of the shell. For a full experience, the examples can also be view in the playground.

Default

With Bottom Nav Bar

With Custom Logo

With Custom Mobile Logo

With Full Width Content

With Hidden Header

With Minimum Parameters

With Mobile Header Labels Only

With Non-Sticky Layout

With Overflow Content

With Partner Icon

Without Nav Bar

Props XerApplicationShell

Name	Type	Default	Required	Description
header	ApplicationShellHeaderProps		false	Logo and links behind that wil default to Xerius.be. There will not be any mobile menu available.
navBar	ApplicationShellNavBarProps		false
footer	ApplicationShellFooterProps		true
languages	LanguageOption[]		false
currentLanguageCode	string		false

TIP

Props can also be created as a single object using the ApplicationShellProps type like in the above examples.

Events

Name	Parameters	Description
update:currentLanguageCode	string	the current language code after another language is selected

Slots

Name	Purpose
headerRightStart	Slot for adding actions to the header e.g. the notification icon in the default example
sideNavBarStart	Slot for adding controls on top of the navbar when rendered on the side. e.g. The playground has a search box there.
default	The main content

Safe Area Insets

Important

Only touch this if you're very sure what you're doing.
Browsers should provide the correct values automatically. This is a workaround to override correct values with your own values.

We provide basic support for env(safe-area-inset-...) variables when you make use of the Application Shell.
If you want to override the env() variables with your own values anywhere they are used, you can use the following css properties:
--safe-area-inset-top, --safe-area-inset-bottom, --safe-area-inset-left, --safe-area-inset-right.

Props XerMainShell

Name	Type	Default	Required	Description
showWave	boolean	true	false	Determines whether the wave figure is displayed.