AppHeader.vue

Component to render the header with the logo and the Run with Us button and the navigation drawer on all pages.

📄 View source on GitHub

Used by

• /layouts/default

Used Stores

• useNavigationStore

Functions

toggleDrawer

Function to open and close the nav drawer

updateDrawerWidth

Function to update drawer width; we need this to automatically close submenus

Parameters:

• el: the nav drawer element

Reactivity

appBarHeight (computed)

Calculate the app bar height depending on screen size; Info: Also scales the logo

(anonymous) (watch)

Watch openGroup and keep only the last opened group. This is a helper to support only one group open at a time

Parameters:

• newVal: -id of the new open group

(anonymous) (watch)

Watch the drawer width and close submenu when collapsing. This fixes that a submenu was still open after the drawer was closed and re-opended

(anonymous) (watchEffect)

Watch to check if we are on mobile and close the drawer. Keep drawer open on larger screens