Navbar - Förkonfigurationsexempel

Den här sidan visar hur du kan konfigurera navbar:en innan scriptet laddas genom att sätta window.NAVBAR_CONFIG i head-sektionen.

Konfiguration som används på denna sida

<script>
    window.NAVBAR_CONFIG = {
        height: 80,           // Högre navbar (standard: 70)
        scrolledHeight: 60,   // Högre även när man scrollar (standard: 40)
        backgroundColor: '#1a365d', // Mörkare blå
        hoverColor: '#fbbf24', // Gulare hover
        language: 'en',       // Engelska texter (standard: 'sv')
        logoUrl: './assets/swedac-logo-inverted.svg', // Lokal logo
        maxHeaderLength: 100, // Längre header (standard: 70)
        zIndex: 1100         // Högre z-index (standard: 1000)
    };
</script>

Alla tillgängliga konfigurationsalternativ

Egenskap	Typ	Standardvärde	Beskrivning
`height`	Number	70	Navbarens höjd i pixlar
`scrolledHeight`	Number	40	Navbarens höjd när användaren scrollar
`backgroundColor`	String	'var(--navbar-dark-blue)'	Bakgrundsfärg (CSS-färg eller variabel)
`textColor`	String	'var(--navbar-white)'	Textfärg
`hoverColor`	String	'var(--navbar-yellow)'	Färg vid hover
`zIndex`	Number	1000	CSS z-index värde
`language`	String	'sv'	Språk för texter ('sv' eller 'en')
`logoUrl`	String	(Swedac logo URL)	URL till logotyp
`maxHeaderLength`	Number	70	Maximal längd för rubriktext
`drawerEnabled`	Boolean	true	Aktivera drawer-menyn (hamburgermeny)
`drawerMenuJsonUrl`	String	undefined	URL för att ladda menystruktur från JSON-fil
`loginUrl`	String	undefined	URL för inloggning (används av inloggningsknappen)
`logoutUrl`	String	undefined	URL för utloggning (används av utloggningslänken)
`plugins`	Object	{}	Plugin-konfiguration, t.ex. `{ 'lang-switcher': { enabled: false } }`

Fördelar med förkonfiguration

Inga flimmer: Navbar:en får rätt utseende från start
Enkel integration: Sätt konfigurationen en gång i head
Flexibel: Du kan fortfarande använda API:et för att ändra saker dynamiskt
Bakåtkompatibel: Fungerar utan konfiguration också

Exempel på användning

Scrolla upp och ner för att se hur navbar:en beter sig med den anpassade konfigurationen. Notera:

Högre navbar (80px istället för 70px)
Mörkare blå bakgrundsfärg
Engelska texter
Även när man scrollar förblir den högre (60px istället för 40px)

Plugin-konfiguration

Du kan inaktivera specifika plugins via window.NAVBAR_CONFIG:

window.NAVBAR_CONFIG = {
    // ... andra inställningar ...
    plugins: {
        'lang-switcher': { enabled: false },  // Inaktivera språkväxlare
        'matomo': { enabled: false }          // Inaktivera Matomo analytics
        // Alla plugins är enabled: true som standard
    }
};

Tillgängliga plugin-namn: 'lang-switcher', 'matomo', 'sitemap', 'logout', 'login-button', 'public-search', 'drawer-authorized-menu', 'user-section', 'org-act-as'

Lyssna på plugin-events

Vissa plugins skickar custom events som du kan lyssna på:

// Lyssna på språkbyten från LangSwitcherPlugin
window.addEventListener('navbar:languageSwitch', function(event) {
    const { oldLanguage, newLanguage } = event.detail;
    console.log('Språk bytt från ' + oldLanguage + ' till ' + newLanguage);
});