No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Intranet-header

Angular only component

The intranet header is an Angular component, as such it only works within Angular projects.

The Header Angular component for internal usage.

For installation and usage see the intranet-header package getting started page

User profile image removed

With the new profile image URL now pointing to SharePoint, the image would not load unless the user had already authenticated against SharePoint in the browser. To address this issue, the logic for individual user profile images was temporarily removed, and the default avatar image is displayed instead.

Header with a navigation bar
<section class="layout-container header-big">
  <sp-intranet-header siteTitle="Site Title" languages="de,fr,it">
    <li class="nav-item"><a class="nav-link">Link 1</a></li>
    <li class="nav-item"><a class="nav-link">Link 2</a></li>
    <li class="nav-item" ngbDropdown>
      <button class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</button>
      <div class="dropdown-menu" aria-labelledby="toggle" ngbDropdownMenu>
        <a class="dropdown-item" ngbDropdownItem>Dropdown link 1</a>
        <a class="dropdown-item" ngbDropdownItem>Dropdown link 2</a>
        <a class="dropdown-item" ngbDropdownItem>Dropdown link 3</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link">Link 3</a></li>
  </sp-intranet-header>
  <main role="main" class="container header-margin pt-huge">
    <h1>Content</h1>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
      justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
      ipsum dolor sit amet.
    </p>
  </main>
</section>
Header with a custom user menu
<section class="layout-container header-big">
  <sp-intranet-header
    siteTitle="Site Title"
    languages="de,fr,it"
    [optionDropdownContent]="myCustomOptions"
  >
    <li class="nav-item"><a class="nav-link">Link 1</a></li>
    <li class="nav-item"><a class="nav-link">Link 2</a></li>
  </sp-intranet-header>
</section>

<ng-template #myCustomOptions let-dropdown="dropdownRef">
  <a href="#" class="dropdown-item">A menu item link</a>
</ng-template>
Header with a side navigation
<section class="layout-container header-small">
  <sp-intranet-header [hasNavbar]="false" siteTitle="Site Title"></sp-intranet-header>
  <div class="site-content container-fluid header-margin">
    <div class="row flex-grow-1">
      <nav
        [ngClass]="{'closed': !openedMenu}"
        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
        id="sidebar"
      >
        <div class="sidebar-sticky header-margin bg-light">
          <!-- left menu -->
          <ul>
            <li class="d-md-none">
              <button (click)="toggleMenu()"><em class="pi pi-menu"></em> Active Page</button>
            </li>
            <li><a>Home</a></li>
            <li class="separator"></li>
            <li>
              Menu Text
              <ul>
                <li class="level2"><a>Link 1</a></li>
                <li class="level2"><a>Link 2</a></li>
                <li class="level2"><a>Link 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <main class="col-md-9 col-lg-10 p-regular" role="main">
        <h1>Content</h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
      </main>
    </div>
  </div>
</section>
"Postweb" intranet header
<section class="layout-container header-big with-searchbar">
  <sp-intranet-header [showIntranetSearch]="true" siteTitle="PostWeb">
    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Home</a></li>
    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Post Informatik</a></li>
    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Service-Portal</a></li>
    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Die Post</a></li>
  </sp-intranet-header>
  <div class="site-content container-fluid header-margin">
    <div class="row flex-grow-1">
      <nav
        [ngClass]="{'closed': !openedMenu}"
        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
        id="sidebar"
      >
        <div class="sidebar-sticky header-margin bg-light">
          <!-- left menu -->
          <ul>
            <li class="d-md-none">
              <button (click)="toggleMenu()">
                <em class="pi pi-menu"></em>
                Active Page
              </button>
            </li>
            <li><a>Home</a></li>
            <li class="separator"></li>
            <li>
              Menu Text
              <ul>
                <li class="level2"><a>Link 1</a></li>
                <li class="level2"><a>Link 2</a></li>
                <li class="level2"><a>Link 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <main class="col-md-9 col-lg-10 p-regular" role="main">
        <h1>Content</h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
      </main>
    </div>
  </div>
</section>
NameDescriptionDefault
additionalInfo
Additional user information, displayed as an item in the user dropdown.

By default, the item is not rendered.

string
""
currentUserId
The email address of the currently logged on user, used to display the user's profile picture.

By default, a fallback image is displayed.

Temporary removal of user specific profile image

Due to the technical conversion of the intranet backend from Sitecore to Sharepoint, this property has been changed to use the user-specific email address instead of a user ID to display the user image. However, the image would only load if the user had already authenticated against SharePoint in the browser. To address this issue, the logic for individual user profile images has been temporarily removed and thus the currentUserId is not currently used.

string
""
displayName
The name of the currently logged-in user, displayed as an item in the user dropdown.

By default, the item is not rendered.

string
""
hasNavbar
If true, the navigation bar is rendered otherwise it is not.
boolean
true
languages
A comma-separated string that defines the languages available in the language selector of the user dropdown.

The possible languages are: de, fr, it and en.

string
de, fr, it, en
logoUrl
The URL to redirect to when the user clicks on the Post logo.
string
""
optionDropdownContent
An Angular template that can be used to define custom items in the user dropdown.

By default, the item is not rendered.

TemplateRef<any>
null
optionHeaderContent
An Angular template that can be used to define custom content in the header to the left of the user dropdown.

By default, the item is not rendered.

TemplateRef<any>
null
searchUrl
The URL to send search data to when the search form is submitted.

This prop is required when showIntranetSearch is set to true.

string
""
showIntranetSearch
If true, the search bar is rendered otherwise it is not.
boolean
false
siteTitle
The application name, displayed in the header to the right of the Post logo.
string
""
hideCurrentUserId
Hides the current user id from the profile dropdown
boolean
false
condenseHeader
Display the navigation on one line
boolean
false