{"version":3,"file":"41d265ad-7840d7f995afc08e9001.js","mappings":"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","sources":["webpack://vf-flight-3-q2-2021/./src/components/navigation.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/react\";\nimport { Header } from \".\";\nimport logo from \"@vf-alchemy/vattenfall-design-system/dist/img/vf-logo.svg\";\n\n// Styling\nconst Root = styled.div`\n    position: sticky;\n    top: 0;\n    z-index: 9999;\n    margin-top: 0;\n    width: 100%;\n    max-width: none;\n    background-color: #fff;\n    border-bottom: 1px solid #ddd;\n\n    @media screen and (max-width: 1200px) {\n        border: 0;\n    }\n    @media screen and (max-width: 1300px) {\n        .vf-navigation__menu-list-item a {\n            margin: 0 calc(0.7em - 0.2px);\n        }\n    }\n`;\n\nconst Hamburger = styled.ul``;\n\nconst LogoWrapper = styled.div`\n    width: 140px;\n    position: absolute;\n    left: 15px;\n`;\n\nconst HeaderWrapper = styled.div`\n    margin-bottom: 0;\n    @media screen and (max-width: 1200px) {\n        display: none;\n    }\n`;\n\nconst DefaultWrapper = styled.div`\n    .vf-navigation__default {\n        position: sticky;\n    }\n    .vf-topbar__logo {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        img {\n            width: 140px;\n        }\n    }\n    @media screen and (min-width: 1200px) {\n        display: none;\n    }\n`;\n\nconst MobileNavLink = styled.a`\n    font-size: \"22px\";\n    padding: \"15px 0\";\n`;\nconst DesktopNavLink = styled.a`\n    font-size: 1rem !important;\n    font-weight: 400 !important;\n`;\n\n// Markup\nexport const Navigation = () => {\n    const [menu, setMenu] = useState(false);\n    const [showLogo, setLogo] = useState(false);\n\n    const changeHeader = () => {\n        const shouldShow = window.scrollY > 90;\n        if (shouldShow) {\n            setLogo(true);\n        } else {\n            setLogo(false);\n        }\n    };\n\n    useEffect(() => {\n        if (window.scrollY > 90) {\n            setLogo(true);\n        } else {\n            setLogo(false);\n        }\n\n        window.addEventListener(\"scroll\", changeHeader);\n        return () => {\n            window.removeEventListener(\"scroll\", changeHeader);\n        };\n    }, []);\n\n    return (\n        <>\n            <HeaderWrapper>\n                <Header url=\"https://www.vattenfall.se/\" />\n            </HeaderWrapper>\n\n            <Root>\n                <nav className=\"vf-navigation__menu\">\n                    <DefaultWrapper>\n                        <div className=\"vf-navigation__default\">\n                            <div className=\"vf-navigation__default-inner\">\n                                <span\n                                    className=\"vf-icon-menu\"\n                                    id=\"vf-navigation-menu-icon\"\n                                    onClick={() => setMenu(!menu)}\n                                ></span>\n\n                                <a\n                                    href=\"https://www.vattenfall.se/\"\n                                    className=\"vf-topbar__logo\"\n                                >\n                                    <img src={logo} width=\"180\" />\n                                </a>\n                            </div>\n                        </div>\n                    </DefaultWrapper>\n\n                    <Hamburger\n                        css={css`\n                            display: ${menu ? \"block\" : \"none\"};\n                        `}\n                        className=\"vf-navigation__menu-list vf-navigation__menu-level-1\"\n                    >\n                        <a\n                            href=\"https://www.vattenfall.se/\"\n                            className=\"vf-navigation__logo-desktop\"\n                        >\n                            <img src={logo} />\n                        </a>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/elavtal/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Elavtal\n                                </MobileNavLink>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/solceller/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Solceller\n                                </MobileNavLink>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/varmepumpar/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Värmepumpar\n                                </MobileNavLink>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/fjarrvarme/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Fjärrvärme\n                                </MobileNavLink>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/for-hemmet/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    För hemmet\n                                </MobileNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/ladda-elbilen/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Ladda elbilen\n                                </MobileNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/kundservice\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Kundservice\n                                </MobileNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <MobileNavLink\n                                    href=\"https://www.vattenfall.se/mina-sidor-information/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Mina sidor\n                                </MobileNavLink>\n                            </div>\n                        </li>\n                    </Hamburger>\n\n                    <ul\n                        className=\"vf-navigation__menu-list vf-navigation__menu-level-1\"\n                        css={css`\n                            max-width: 1425px;\n                            margin: auto;\n                            /* margin-left: 80rem; */\n                        `}\n                    >\n                        {showLogo && (\n                            <LogoWrapper>\n                                <a\n                                    href=\"https://www.vattenfall.se/\"\n                                    className=\"vf-navigation__logo-desktop\"\n                                >\n                                    <img src={logo} />\n                                </a>\n                            </LogoWrapper>\n                        )}\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/elavtal/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Elavtal\n                                </DesktopNavLink>\n                                <span className=\"vf-icon-more\"></span>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/solceller/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Solceller\n                                </DesktopNavLink>\n                                <span className=\"vf-icon-more\"></span>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/varmepumpar/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Värmepumpar\n                                </DesktopNavLink>\n                                <span className=\"vf-icon-more\"></span>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/fjarrvarme/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Fjärrvärme\n                                </DesktopNavLink>\n                            </div>\n                        </li>\n\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/for-hemmet/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    För hemmet\n                                </DesktopNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/ladda-elbilen/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Ladda elbilen\n                                </DesktopNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/kundservice\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Kundservice\n                                </DesktopNavLink>\n                            </div>\n                        </li>\n                        <li className=\"vf-navigation__menu-list-item\">\n                            <div>\n                                <DesktopNavLink\n                                    href=\"https://www.vattenfall.se/mina-sidor-information/\"\n                                    id=\"vf-navigation__link\"\n                                >\n                                    Mina sidor\n                                </DesktopNavLink>\n                            </div>\n                        </li>\n                    </ul>\n                </nav>\n            </Root>\n        </>\n    );\n};\n"],"names":["Root","Hamburger","LogoWrapper","HeaderWrapper","DefaultWrapper","MobileNavLink","DesktopNavLink","Navigation","useState","menu","setMenu","showLogo","setLogo","changeHeader","shouldShow","window","scrollY","useEffect","addEventListener","removeEventListener","url","className","id","onClick","href","src","logo","width","css"],"sourceRoot":""}