<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">class Header extends HTMLElement {
    constructor() {
        super();

        const style = document.createElement('style');
        style.textContent = `
            * {
                box-sizing: border-box;
            }

            .topbar-nav-mobile {
                display: none;
                z-index: 1;
                font-size: min(1rem, 6vh);
            }

            .topbar-nav-web {
                display: flex;
                height: 3rem;
                margin-block: auto;
                background-color: #1ba8a3;
                border-radius: 2rem;
            }

            .topbar-container {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                z-index: 2;
            }

            .topbar {
                position: relative;
                display: flex;
                justify-content: space-between;
                width: 100vw;
                padding-inline: 1vw;
                background-color: #1ba8a3;
                box-shadow: 0px 1px 4px 2px rgba(0,0,0,.1);
                z-index: 2;
            }

            .topbar-img-container, 
            .topbar-logo {
                margin-left: 0.5vw;
                max-width: 100%;
                height: 8rem;
                max-height: 32vh;
                cursor: pointer;
                margin-block: auto;
            }

            .topbar-logo {
                padding-block: 0.5rem;
            }

            .topbar-burger-menu {
                display: none;
                flex-direction: column;
                justify-content: space-between;
                position: absolute;
                top: clamp(0.5vh, 2.5vh, 20%);
                right: 2vw;
                padding: 0.25rem;
                width: 3.5rem;
                max-width: 12vh;
                height: 3.5rem;
                max-height: 12vh;
                border: 1px solid white;
                border-radius: 0.25rem;
                box-shadow: 0px 1px 4px 2px rgba(0,0,0,.1);
                background-color: #095d80;
            }

            .topbar-burger-menu:hover, 
            .topbar-burger-menu:focus,
            .topbar-nav-list li a:hover,
            .topbar-nav-list li a:focus {
                background-color: #064159;
            }

            .topbar-bar {
                width: 100%;
                height: 15%;
                background-color: white;
                border-radius: 1rem;
            }

            .topbar-nav-list {
                display: flex;
                justify-content: space-around;
                list-style: none;
                margin-block: 0;
                margin-inline: 1vw;
                padding: 0;
            }

            .topbar-nav-list li {
                margin-inline: 0.5rem;
                margin-block: auto;
            }

            .topbar-nav-list li a {
                font-weight: bold;
                padding: 0.5rem;
                text-decoration: none;
                color: white;
                background-color: #095d80;
                border-radius: 0.5rem;
                box-shadow: 0px 1px 4px 2px rgba(0,0,0,.1);
                border: min(1px, 0.1vh) solid #00000050;
            }

            @media screen and (max-width: 1320px) {
                .topbar-nav-web ul li a {
                    font-size: 0.9rem;
                }
            }

            @media screen and (max-width: 1200px) {
                .topbar-nav-web ul li a {
                    font-size: 0.75rem;
                }
            }

            @media screen and (max-width: 1080px) {
                .topbar-nav-web ul li a {
                    font-size: 0.5rem;
                }
            }

            @media screen and (max-width: 960px) {
                .topbar-img-container, 
                .topbar-img-container a {
                    max-width: 70vw;
                }

                .topbar-logo, 
                .topbar-nav-list {
                    object-fit: contain;
                    margin: auto;
                }

                .topbar-nav-web {
                    display: none;
                }

                .topbar-nav-mobile {
                    position: absolute;
                    display: flex;
                    top: -120vh;
                    width: 98%;
                    height: auto;
                    background-color: transparent;
                    transition: top ease-out 0.4s;
                    left: 0;
                    right: 0;
                    margin-inline: auto;
                }

                .topbar,
                .topbar-nav-list {
                    flex-direction: column;
                    width: 100%;
                }

                .topbar-nav-list li {
                    width: 100%;
                    text-align: center;
                    margin-inline: 0;
                }

                .topbar-nav-list li a {
                    display: inline-block;
                    margin-top: 0.5vh;
                    padding: 1vh;
                    width: 100%;
                }

                .topbar-burger-menu {
                    display: flex;
                    top: 50%;
                    transform: translateY(-50%);
                    border: min(1px, 0.1vh) solid #00000050;
                }

                .topbar-nav-mobile.active {
                    top: min(8rem, 32vh);
                    transition: top ease-out 0.4s;
                }
            }
        `
        document.head.appendChild(style);

        this.innerHTML = `
            &lt;div class="topbar-container"&gt;
                &lt;div class="topbar"&gt;
                    &lt;div class="topbar-img-container"&gt;
                        &lt;a title="Slumber Friendz - Amazing Slumber Parties For All Your Friends" href="index.html"&gt;
                            &lt;img class="topbar-logo" src="./images/slumber-friends-logo.avif" loading="eager" alt="logo" /&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="topbar-burger-menu"&gt;
                        &lt;span class="topbar-bar"&gt;&lt;/span&gt;
                        &lt;span class="topbar-bar"&gt;&lt;/span&gt;
                        &lt;span class="topbar-bar"&gt;&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;nav class="topbar-nav-web"&gt;
                        &lt;ul class="topbar-nav-list"&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Amazing Slumber Parties For All Your Friends" href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - About Us" href="about.html"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Themes" href="themes.html"&gt;THEMES&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Gallery" href="gallery.html"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Packages" href="packages.html"&gt;PACKAGES&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Add ons" href="addons.html"&gt;ADD-ONS&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Contact Us and BOOK NOW" href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/nav&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;nav class="topbar-nav-mobile"&gt;
                        &lt;ul class="topbar-nav-list"&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Amazing Slumber Parties For All Your Friends" href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - About Us" href="about.html"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Themes" href="themes.html"&gt;THEMES&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Gallery" href="gallery.html"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Packages" href="packages.html"&gt;PACKAGES&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Add ons" href="addons.html"&gt;ADD-ONS&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a title="Slumber Friendz - Contact Us and BOOK NOW" href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/nav&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        `
    }

    toggleDropdown = () =&gt; {
        document.querySelector('.topbar-nav-mobile')
            .classList.toggle('active');
    }

    connectedCallback() {
        document.querySelector('.topbar-burger-menu')
            .addEventListener('click', () =&gt; this.toggleDropdown());
    }

    disconnectedCallback() {
        document.querySelector('.topbar-burger-menu')
            .removeEventListener();
    }
}

window.customElements.define('web-header', Header);</pre></body></html>