This example demonstrates how to use the header component. The header has a different view depending on whether or not you are logged in.
Unless you are already logged into your pod identity provider you should see the logged out view. To see the logged in view click the login button above.
The header is customizable through the options parameter.
The logo can be a url of your personalized logo, otherwise it will default to Solid.
The menu list is an array of either links or buttons.
The details are below.
options:
type HeaderOptions {
logo?: string,
menuList?: MenuItems[]
}
MenuItems can be either a MenuItemLink or a MenuItemButton:
type MenuItemLink = {
label: string,
url: string
}
type MenuItemButton = {
label: string,
onclick: () => {}
}
In the code below you can see that you can have a mixture of buttons and links. When you pass in an onclick initHeader will create a button, however if you pass in a url it will create a link. Either way, as you can see, they appear the same in the menu.