<nav class="m-overview-navigation u-m-t-2 alignright color-peacock-light js-overview-navigation is-minimized" aria-hidden="true" id="overviewMenu">
<dl class="m-overview-navigation__list">
<dt class="m-overview-navigation__title background-peacock-light">
<span class="m-submenu__title__link u-pointer-events-none">
<span>Översikt</span>
</span>
</dt>
<dd class="m-overview-navigation__item">
<a href="#kort-sammanfattning" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Kort sammanfattning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#internetanvandning" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Internetanvändning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#e-legitimation-och-mobil-bank-id" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>E-legitimation och mobilt bank-id</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#digital-brevlada" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Digital brevlåda</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Otrygghet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Att skydda sin integritet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka klickar ur cookies?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka undviker sociala medier?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka undviker vissa appar?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vad tänker vi om våra digitala spår?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#internetanvandning" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Internetanvändning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#e-legitimation-och-mobil-bank-id" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>E-legitimation och mobilt bank-id</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#digital-brevlada" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Digital brevlåda</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Otrygghet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Att skydda sin integritet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka klickar ur cookies?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka undviker sociala medier?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vilka undviker vissa appar?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
<svg class="icon">
<use xlink:href="#icon-arrow-variant"></use>
</svg>
<span>Vad tänker vi om våra digitala spår?</span>
</a>
</dd>
</dl>
<button type="button" class="m-overview-navigation__button js-overview-navigation-button is-fixed" data-title="Översikt" data-title-alt="Stäng" aria-expanded="false" data-a11y-toggle="overviewMenu" aria-controls="overviewMenu">
<svg class="icon">
<use xlink:href="#icon-richtext-bullet-list"></use>
</svg>
<svg class="icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</nav>
<nav class="m-overview-navigation u-m-t-2 alignright color-peacock-light js-overview-navigation is-minimized" aria-hidden="true" id="overviewMenu">
<dl class="m-overview-navigation__list">
<dt class="m-overview-navigation__title background-peacock-light">
<span class="m-submenu__title__link u-pointer-events-none">
<span>Översikt</span>
</span>
</dt>
<dd class="m-overview-navigation__item">
<a href="#kort-sammanfattning" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Kort sammanfattning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#internetanvandning" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Internetanvändning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#e-legitimation-och-mobil-bank-id" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>E-legitimation och mobilt bank-id</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#digital-brevlada" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Digital brevlåda</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Otrygghet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Att skydda sin integritet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka klickar ur cookies?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka undviker sociala medier?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka undviker vissa appar?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vad tänker vi om våra digitala spår?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#internetanvandning" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Internetanvändning</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#e-legitimation-och-mobil-bank-id" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>E-legitimation och mobilt bank-id</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#digital-brevlada" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Digital brevlåda</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Otrygghet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Att skydda sin integritet</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka klickar ur cookies?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka undviker sociala medier?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vilka undviker vissa appar?</span>
</a>
</dd>
<dd class="m-overview-navigation__item">
<a href="#" class="m-overview-navigation__item__link">
{{>@icon id="arrow-variant"}}
<span>Vad tänker vi om våra digitala spår?</span>
</a>
</dd>
</dl>
<button type="button" class="m-overview-navigation__button js-overview-navigation-button is-fixed" data-title="Översikt" data-title-alt="Stäng" aria-expanded="false" data-a11y-toggle="overviewMenu" aria-controls="overviewMenu">
{{>@icon id="richtext-bullet-list"}}
{{>@icon id="close"}}
</button>
</nav>
/* No context defined. */
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@include mixin.molecule(overview-navigation) {
overflow: visible;
min-width: 300px;
max-width: 453px;
display: flex;
flex-direction: column;
border-radius: var.$border-radius;
transition: left 0.25s ease-out, top 0.5s ease-out;
box-shadow: 0 0 0 1px colors.$color-ash;
@include bem.e(list) {
overflow: hidden;
border-radius: var.$border-radius;
background-color: colors.$color-snow;
margin: 0;
padding: 0;
width: 100%;
max-height: calc(100dvh - func.to_rem(130px));
overflow-y: auto;
}
@include bem.e(title) {
margin-bottom: func.rhythm(2);
}
@include bem.e(item) {
display: flex;
align-items: center;
margin-top: func.rhythm(1);
margin-bottom: func.rhythm(1);
margin-left: 0;
&:last-child {
margin-bottom: func.rhythm(3);
}
}
@include bem.e(item__link) {
padding: 0 func.rhythm(2);
border: none;
border-radius: 0;
background-color: initial;
color: colors.$color-cyberspace;
display: flex;
align-items: center;
text-decoration: none;
&:hover,
&:focus {
border: none !important;
border-radius: 0 !important;
background-color: inherit !important;
text-decoration: underline;
}
> svg {
height: var.$icon-size-small;
width: var.$icon-size-small;
margin-right: func.rhythm(1);
flex-shrink: 0;
}
}
@include bem.e(button) {
position: fixed;
bottom: auto;
right: auto;
display: flex;
opacity: 0;
pointer-events: none;
padding: 0;
border: 0;
width: func.to_rem(60px);
height: func.to_rem(60px);
flex-shrink: 0;
flex-grow: 0;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: colors.$color-snow;
box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px colors.$color-snow, 0 0 6px rgba(colors.$color-cyberspace, 30%);
&:hover,
&:focus {
transform: scale(1.1);
}
> svg {
width: var.$icon-size-large;
height: var.$icon-size-large;
flex-shrink: 0;
opacity: 1;
& + svg {
display: none;
}
}
&::after {
content: attr(data-title);
position: absolute;
bottom: -#{func.rhythm(3)};
text-transform: uppercase;
text-align: center;
font-size: var.$size-small;
font-family: var.$font-family-mono;
text-shadow: 0 1px 0 colors.$color-snow;
color: colors.$color-cyberspace;
background-color: colors.$color-snow;
border-radius: var.$border-radius;
padding-left: func.rhythm(0.5);
padding-right: func.rhythm(0.5);
}
&.is-fixed {
//top: calc(100vh - func.rhythm(11)) !important;
//top: auto !important;
bottom: calc(env(safe-area-inset-bottom) + func.rhythm(5)) !important;
//left: auto !important;
right: func.rhythm(2) !important;
pointer-events: auto;
@include breakpoint.bp-up(xxl) {
//left: auto !important;
right: calc(50vw - 680px) !important;
}
}
}
&[aria-hidden="true"] {
box-shadow: none;
> dl {
display: none;
}
}
&[aria-hidden="false"] {
> dl {
display: block;
}
button {
&::after {
content: attr(data-title-alt);
}
svg {
display: none;
& + svg {
display: block;
}
}
}
}
&.is-minimized {
position: fixed;
right: func.rhythm(2);
bottom: func.rhythm(13);
z-index: func.z_index(foregroundMinus);
margin-top: 0;
margin-bottom: 0;
margin-left: func.rhythm(2);
@include breakpoint.bp-up(xxl) {
right: calc(50vw - 680px) !important;
}
}
}
class OverviewNavigation {
constructor(element) {
this.element = element;
this.button = this.element.querySelector('.js-overview-navigation-button');
this.isSmallScreen = false;
this.isOutOfView = false;
this.minimized = null;
// a11y-toggle doesn't have a callback for when it's done initializing
// so we have to wait for the next tick
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
this.attach();
this.onResize();
this.closeMenu();
}, 0);
});
}
attach() {
window.addEventListener('resize', this.onResize.bind(this));
window.addEventListener('scroll', this.onScroll.bind(this));
}
update() {
if (this.isSmallScreen || this.isOutOfView) {
this.minimize();
} else {
this.maximize();
}
}
onResize() {
this.isSmallScreen = window.innerWidth <= 961;
this.update();
}
onScroll() {
const viewportOffset = this.element.getBoundingClientRect();
if (viewportOffset.top < 0) {
this.isOutOfView = true;
} else if (window.scrollY === 0) {
this.isOutOfView = false;
}
this.update();
}
// Close the overview menu when clicking any link inside it
closeMenu() {
const links = this.element.querySelectorAll('a');
[].forEach.call(links, (link) => {
link.addEventListener('click', () => {
this.button.click();
});
});
}
updateButtonPosition() {
const elementOffset = this.element.getBoundingClientRect();
const buttonRect = this.button.getBoundingClientRect();
// Use right and bottom to place this.button at the top left corner of the element
this.button.style.right = `${window.innerWidth - elementOffset.right + elementOffset.width - buttonRect.width}px`;
this.button.style.bottom = `${window.innerHeight - elementOffset.top - buttonRect.height}px`;
}
minimize() {
if (this.minimized === true) {
return;
}
this.button.style.transition = 'none';
this.updateButtonPosition();
this.element.offsetHeight; // force reflow
this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
this.element.setAttribute('aria-hidden', 'true');
this.element.classList.add('is-minimized');
this.button.setAttribute('aria-expanded', 'false');
this.button.classList.add('is-fixed');
this.button.style.opacity = 1;
this.minimized = true;
}
maximize() {
if (this.minimized === false) {
return;
}
this.element.setAttribute('aria-hidden', 'false');
this.element.classList.remove('is-minimized');
this.element.offsetHeight; // force reflow
this.updateButtonPosition();
this.button.setAttribute('aria-expanded', 'true');
this.button.classList.remove('is-fixed');
this.button.style.opacity = 0;
this.minimized = false;
}
}
const overviewNavigations = document.querySelectorAll('.js-overview-navigation');
if (overviewNavigations) {
[].forEach.call(
overviewNavigations,
(overviewNavigation) => new OverviewNavigation(overviewNavigation),
);
}
No notes defined.