Header | Punkt | Origo - Oslo kommune

Om komponenten

Dersom denne brukes med bare CSS må du selv sørge for funksjonalitet for å åpne brukermeny og sette aria-verdier som opprettholder god UU.

Varianter

<header id="pkt-header" aria-label="Topp" class="pkt-header">
  <div class="pkt-header__logo">
    <a
      aria-label="Tilbake til forside"
      href="https://www.oslo.kommune.no/"
      class="pkt-header__logo-link"
    >
      <span class="pkt-icon pkt-header__logo-svg">
        <svg viewBox="0 0 60 31">
          <use href="#oslologo"></use>
        </svg>
      </span>
    </a>
    <span class="pkt-header__logo-service">Navn på virksomheten</span>
  </div>
  <nav class="pkt-header__actions">
    <ul class="pkt-header__actions-row">
      <li>
        <button
          type="button"
          class="pkt-header__menu-btn pkt-btn pkt-btn--secondary pkt-btn--icon-right"
        >
          <span class="pkt-icon pkt-btn__icon">
            <svg viewBox="0 0 32 32">
              <use href="#menu"></use>
            </svg>
          </span>
          <span class="pkt-btn__text">Meny</span>
        </button>
      </li>
      <li class="pkt-header--has-dropdown">
        <button
          class="pkt-header__user-btn pkt-btn pkt-btn--secondary"
          type="button"
          aria-controls="pktUserDropdown"
          aria-expanded="false"
          onclick="this.parentNode.classList.toggle('pkt-header--open-dropdown');"
        >
          <span class="pkt-icon pkt-btn__icon">
            <svg viewBox="0 0 32 32">
              <use href="#user"></use>
            </svg>
          </span>
          <span class="pkt-header__user-fullname pkt-btn__text"
            >Aksel Web Opdahl</span
          >
          <span class="pkt-header__user-shortname pkt-btn__text">AWO</span>
          <span class="pkt-icon pkt-btn__icon pkt-btn--closed">
            <svg viewBox="0 0 32 32">
              <use href="#chevron-thin-down"></use>
            </svg>
          </span>
          <span class="pkt-icon pkt-btn__icon pkt-btn--open">
            <svg viewBox="0 0 32 32">
              <use href="#chevron-thin-up"></use>
            </svg>
          </span>
        </button>
        <ul id="pktUserDropdown" class="pkt-header__dropdown pkt-user-menu">
          <li>
            <div class="pkt-user-menu__label">Pålogget som</div>
            <div class="pkt-user-menu__name">Aksel Web Opdahl</div>
            <div class="pkt-user-menu__last-logged-in">
              Sist pålogget: <time>20.01.2022</time>
            </div>
          </li>
          <li>
            <ul class="pkt-list">
              <li>
                <a href="#" class="pkt-link">
                  <span class="pkt-icon pkt-icon--medium">
                    <svg viewBox="0 0 32 32">
                      <use href="#heart"></use>
                    </svg>
                  </span>
                  Mine bookinger
                </a>
              </li>
              <li>
                <a href="#" class="pkt-link">
                  <span class="pkt-icon pkt-icon--medium">
                    <svg viewBox="0 0 32 32">
                      <use href="#house-heart"></use>
                    </svg>
                  </span>
                  Mine adresser
                </a>
              </li>
            </ul>
          </li>
          <li>
            <div class="pkt-user-menu__label">Representerer</div>
            <div class="pkt-user-menu__name">Joe & The Juice AS</div>
            <div class="pkt-user-menu__org-number">Org.nr. 911738066</div>
            <ul class="pkt-list mt-size-16">
              <li>
                <a href="#" class="pkt-link">
                  <span class="pkt-icon pkt-icon--medium">
                    <svg viewBox="0 0 32 32">
                      <use href="#cogwheel"></use>
                    </svg>
                  </span>
                  Endre organisasjon
                </a>
              </li>
            </ul>
          </li>
          <li>
            <ul class="pkt-list">
              <li>
                <a href="#" class="pkt-link">
                  <span class="pkt-icon pkt-icon--medium">
                    <svg viewBox="0 0 32 32">
                      <use href="#cogwheel"></use>
                    </svg>
                  </span>
                  Innstillinger
                </a>
              </li>
              <li>
                <a href="#" class="pkt-link">
                  <span class="pkt-icon pkt-icon--medium">
                    <svg viewBox="0 0 32 32">
                      <use href="#exit"></use>
                    </svg>
                  </span>
                  Logg ut
                </a>
              </li>
            </ul>
          </li>
          <li class="footer">
            <ul class="pkt-list-horizontal bordered">
              <li><a href="#" class="pkt-link">Kontakt</a></li>
              <li><a href="#" class="pkt-link">Personvern</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <button
          type="button"
          class="pkt-header__user-btn pkt-header__user-btn-logout pkt-btn pkt-btn--secondary pkt-btn--icon-right"
        >
          <span class="pkt-icon pkt-btn__icon">
            <svg viewBox="0 0 32 32">
              <use href="#exit"></use>
            </svg>
          </span>
          <span class="pkt-btn__text">Logg ut</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

<PktHeader
  :canChangeRepresentation="true"
  :representing="representing"
  :user="{
    name: 'Aksel Web Opdahl',
    shortname: 'AWO',
    lastLoggedIn: new Date(),
  }"
  :userMenu="[
    {
      title: 'Mine bookinger',
      iconName: 'heart',
      target: '#',
    },
    {
      title: 'Mine adresser',
      iconName: 'house-heart',
      target: console.log('Mine adresser'),
    },
  ]"
  :userMenuFooter="[
    {
      title: 'Kontakt',
      target: '#',
    },
    {
      title: 'Personvern',
      target: '#',
    },
  ]"
  :userOptions="[
    {
      title: 'Innstillinger',
      iconName: 'cogwheel',
      target: '#',
    },
  ]"
  @changeRepresentation="changeRepresentation"
  @logOut="logOut"
  serviceName="Gravferdsetaten"
></PktHeader>

<PktHeader
  canChangeRepresentation={true}
  user={{
    name: 'Aksel Web Opdahl',
    shortname: 'AWO',
    lastLoggedIn: new Date(),
  }}
  representing={representing: {
    name: 'Joe & the Juice Norge AS',
    shortname: 'JJN',
    orgNumber: '911738066',
  }}
  userMenu={[
    {
      title: 'Mine bookinger',
      iconName: 'heart',
      target: '#',
    },
    {
      title: 'Mine adresser',
      iconName: 'house-heart',
      target: userMenuItemFunction,
    },
  ]}
  userMenuFooter={[
    {
      title: 'Kontakt',
      target: '#',
    },
    {
      title: 'Personvern',
      target: '#',
    },
  ]}
  changeRepresentation={changeRepresentation}
  logOut={logOut}
  serviceName="Gravferdsetaten"
/>

CSS oversikt

Block:

.pkt-header

Elements:

.pkt-header__logo
.pkt-header__logo-service
.pkt-header__actions
.pkt-header__menu-btn
.pkt-header__user-btn
.pkt-header__user-btn-logout
.pkt-header__user-fullname
.pkt-header__user-shortname
.pkt-header__dropdown
.pkt-user-menu__label
.pkt-user-menu__name
.pkt-user-menu__last-logged-in
.pkt-user-menu__org-number

Modifiers:

.pkt-header--fixed
.pkt-header--scroll-to-hide
.pkt-header--hidden
.pkt-header--has-dropdown
.pkt-header--open-dropdown

Brukermeny

For å få innhold i brukermenyen i React eller Vue, så må man sende inn objekter med innhold for de forskjellige blokkene.

// user:
{ name: String, shortname: String, lastLoggedIn: String|Date, }

// userMenu:
[{ iconName: String, title: String, target: String|Function, }]

// representing:
{ name: String, shortname: String, orgNumber: String|Number, }

// userOptions:
[{ iconName: String, title: String, target: String|Function, }]

// userMenuFooter:
[{ title: String, target: String|Function, }]

OBS!

Det er mulig å gjøre logo-lenken til en knapp med funksjon. Dette anbefales ikke, men tillates dersom applikasjonen deres forlanger at «Hjem»-lenken er en knapp.

Props, slots og events

Props	Type	Default
logoLink	string / function	https://www.oslo.kommune.no/
serviceName	string
fixed	boolean	true
scrollToHide	boolean	true
user	object
userMenu	object
userMenuFooter	object
userOptions	object
representing	object
canChangeRepresentation	boolean	true
showMenuButton	boolean	false
showLogoutButton	boolean	false

Events	Type	Validation	Default	Beskrivelse
openMenu				Trigges ved klikk på generisk menyknapp
logOut				Trigges ved klikk på logg ut-knapp
changeRepresentation				Trigges ved klikk på “Endre organisasjon”