From 4fe30c2c03559ce6c283565d2617e675fc63b8f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mats=20S=C3=A6ter?= Date: Wed, 13 Dec 2023 14:00:10 +0100 Subject: [PATCH] update header and add styling. Styling is not compatible with current styling.. --- src/TopBar/Header.js | 168 ++++++++++++----- src/style/Header.scss | 420 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 547 insertions(+), 41 deletions(-) create mode 100644 src/style/Header.scss diff --git a/src/TopBar/Header.js b/src/TopBar/Header.js index 0c837527..7be6bde0 100644 --- a/src/TopBar/Header.js +++ b/src/TopBar/Header.js @@ -1,43 +1,129 @@ -import React, { useEffect } from "react"; -import importScript from "../Funksjoner/getExternal"; -import TopBar from "./TopBar"; - -const Header = ({ searchFor, onToggleHovedMeny, onSelectResult, history }) => { - const headerjsurl = "https://design.artsdatabanken.no/script/header.js"; - useEffect(() => { - importScript(headerjsurl); - }, [headerjsurl]); - - return ( -
-
-
- - Artsdatabanken - Artsdatabanken - - - -
-
- -
- ); -}; +import React, { useEffect, useState } from "react"; + +/* + getJsonData, getExtraInfo, getListItems, event listeners, and toggle functions are to replace the functionality + from this file "https://design.artsdatabanken.no/script/header.js". + It is needed to build the header menu components that is used in all of Artsdatabanken. + We needed to do it this way instead of importing the script because importing the + script in a normal way made jquery stop working for some reason. It probably has something to do with the way this project + is bundled together, and fixing this was at this time considered more expensive than just copying the content like this. + If things change in the original file we will need to manually update this code as well. +*/ + +const getJsonData = async (url) => { + const response = await fetch(url); + return response?.json(); +} + +const getTitle = (item) => { + return item.Heading || item.Title; +} + +const getExtraInfo = (item) => { + return item.Records.find((el) => { + return el.Label === 'MenuInfoText'; + })?.Values; +} + +const getTargetUrl = (item, baseUrl) => { + const spesificUrl = item.Records.find((el) => { + return el.Values[0].includes('http') || el.Values[0].includes('.no'); + })?.Values[0]; + return spesificUrl || baseUrl + item.Url +} + +const getListItems = (itemList, baseUrl) => { + return itemList.map((item) => { + return ( +
  • + +
    + { getTitle(item) } +

    {getExtraInfo(item)}

    +
    +
    +
    {item.Title === baseUrl ? 'chevron_right' : 'open_in_new' }
    +
    +     +
    • + ) + }) +} + +const Header = (props) => { + const english = 'English', + menuId = 'dropdown-header-menu', + menuUpIcon = 'menu-up-icon', + menuDownIcon = 'menu-down-icon'; + + const [headerMenus, setHeaderMenus] = useState(); + + const isOpen = (id) => { + return document.getElementById(id)?.style.display === 'block'; + } + + const setOpen = (id, shouldOpen) => { + document.getElementById(id).style.display = shouldOpen ? 'block' : 'none'; + document.getElementById(menuUpIcon).style.display = shouldOpen ? 'inline-block' : 'none'; + document.getElementById(menuDownIcon).style.display = !shouldOpen ? 'inline-block' : 'none'; + } + + + useEffect(() => { + const closeMenu = (event) => { + if (!document.getElementById('menu-button').contains(event.target)) { + setOpen(menuId, false); + } + } + + getHeaderMenus(); + window.addEventListener('click', closeMenu); + return () => { + window.removeEventListener('click', closeMenu); + } + }, []); + + const toggleMenu = () => { + setOpen(menuId, !isOpen(menuId)); + } + + const getHeaderMenus = async () => { + const baseUrl = 'https://artsdatabanken.no'; + const data = await getJsonData('https://www.artsdatabanken.no/api/Content/341039'); + + const menus = data?.Records?.map((el, index) => { + return ( +
  • + +
    • + ) + }); + + setHeaderMenus(menus); + } + + return ( + + ) +} export default Header; diff --git a/src/style/Header.scss b/src/style/Header.scss new file mode 100644 index 00000000..bc00544b --- /dev/null +++ b/src/style/Header.scss @@ -0,0 +1,420 @@ +@import '_variables.scss'; +@import '_ninVariables.scss'; + +/* HEADER */ + +.menuitems:active, +.menuitems:focus, +.menuitems:hover, +.header, +.header .menuitems { + background: $headerFooter; + color: inherit; +} + +.header { + border-bottom: 1px solid #2b2b2b; + height: 120px; +} + +#dropdown-header-menu { + display: none; +} + +@media only screen and (max-width:940px) { + .header { + height: 120px; + border: none; + border-bottom: 1px solid $ocean-dark; + } +} + +/* LOGO */ +.header-logo { + box-sizing: border-box; + background: transparent; + width: 280px; + margin-top: 21px; + margin-bottom: 31px; +} + +.header-logo img { + width: 100%; +} + +.header-logo .default-logo { + display: block; +} + +@media (max-width: 767px) { + .header-logo { + width: initial; + margin: 0; + margin-left: 5px; + } + + .header-logo img { + width: 209px; + } + + #headermenu.hide { + margin-right: 5px; + } +} + +/* HEADER TITLES (brown bar with more menu stuff) */ +@media only screen and (max-width:940px) { + .title_header { + width: 100%; + margin: 0; + padding: 10px; + text-align: center; + font-size: 20pt; + position: relative; + color: #2b2b2b; + border-bottom: 2px solid #2b2b2b; + margin-top: -2px; + border-top: 2px solid #fff9f0; + border-top: none; + background: #f5e7d3; + border-bottom: none; + margin: 8px; + margin-bottom: 0; + width: calc(100% - 16px); + height: 50px; + } +} + +@media only screen and (max-width: 527px) { + .title_header { + padding-left: 10px; + } +} + +.short_title { + display: none; +} + +@media only screen and (max-width: 450px) { + .short_title { + display: inline; + } + + .full_title { + display: none; + } +} + +/* BUTTONS */ + +.dropdown-toggle:focus { + outline: 3px solid #0283a1; +} + +.dropdown-toggle:hover { + cursor: pointer; +} + +.menuitems { + border: none; + text-decoration: none; + font-family: 'Chivo', sans-serif; + padding: 4px 8px; + font-size: 16px; + border-radius: 20px; +} + +#headermenu { + display: flex; + text-align: center; +} + +#headermenu.hide { + display: block; + width: fit-content; + border: medium; + background: transparent; + right: 41px; + top: 0px; + margin: 0; + right: 0; +} + +button.dropdown-toggle { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + border: none; + background: transparent; + font-family: 'Chivo', sans-serif; + padding: 4px 8px; + font-size: 16px; + border-radius: 20px; +} + +.dropdown-toggle .material-icons { + vertical-align: top; +} + + +/* MENU */ +.dropdown, +.header-mega-menu { + margin: 0; + background: #FFF9F0; + top: 119px; + padding: 20px; + right: 0px; + overflow: hidden; + border: 1px solid $ocean-dark; + position: absolute; + width: 100vw; + max-width: 860px; +} + +.dropdown ul, +.header-mega-menu ul { + list-style: none; +} + +.dropdown-list { + max-width: calc(50% - 32px); +} + +@media (max-width: 860px) { + .header-mega-menu { + width: 100vw; + left: auto; + right: 0px; + max-height: calc(100vh - 120px); + border: none; + overflow-y: auto; + top: 120px; + } + + .dropdown-list { + max-width: 100%; + } +} + +.dropdown-box { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + width: 100%; + padding: 0px 15px; +} + + +/* LIST ITEMS */ + +.dropdown li, +.header-mega-menu li { + margin: 15px 0; + width: 100%; + text-align: left; +} + +.dropdown-menu .header-mega-link-element { + display: flex; + white-space: normal; + width: 100%; + align-items: center; + text-align: left; +} + +.header-mega-link-element:hover { + background: #f5e7d3; + padding: 4px; + margin: -4px; + width: 100%; +} + + +.header-mega-link-text { + flex: 1; +} + +/* TEXT */ + +.header-menu-line a, +.header-mega-link-text, +.header-mega-link-element { + color: #2C2738; + font-size: 16px; + text-decoration: none; +} + +.dropdown-list-title { + color: #e55440; + font-size: 19px; +} + +.contain-the-icon { + color: #e55440; +} + +.header-site-description { + font-size: 12pt; + font-family: 'Space mono', regular; + font-weight: normal; +} + +#navbar-mobile { + display: none; +} + + +.header { + display: flex; + height: 120px; + width: 100%; + border-bottom: 1px solid $ocean-dark; + align-items: center; + justify-content: space-between; + background-color: $headerFooter; + + .header-right-side { + display: flex; + flex-direction: row; + align-items: center; + font-size: 16px; + + button { + font-family: 'Chivo', sans-serif; + + span { + font-size: 16px; + } + + .material-icons { + font-size: 24px; + } + } + } + + a { + width: fit-content; + } +} + +.header-logo { + margin-top: 0; + margin-bottom: 0; + + img { + height: auto; + width: 280px; + } +} + + +.adb-header-search { + border-bottom: 1px solid $nin_border_generic; +} + +.adb-header-search.closed { + display: none; +} + +.adb-header-search, +.adb-header-search-mobile { + height: 44px; + + form { + display: flex; + flex-direction: row; + flex-shrink: 0; + border-radius: 2px; + min-width: 280px; + width: auto; + height: 100%; + } + + input { + width: calc(100% - 56px); + border-radius: 0; + border: 0; + border: 1px solid #4c4a48; + border-right: 0; + padding: 6px 12px; + } + + button { + display: flex; + align-items: center; + justify-content: center; + border-radius: 0; + border: 0; + border: 1px solid #4c4a48; + background: #ebebe9; + padding: 0 15px; + font-size: 15px; + } + + button:hover { + cursor: pointer; + background: #3d3b3a; + color: #fff; + } + + .open-search-button { + background: inherit; + height: 44px; + border: 0; + border-radius: 5px; + margin-left: 10px; + + .material-symbols-outlined { + font-size: 20px; + } + } + + .open-search-button:hover { + cursor: pointer; + background: inherit; + color: inherit; + } + + .open-search-button:active { + background: $nin_border_generic; + } +} + +@media (max-width: 750px) { + .header { + a { + margin: 0; + } + + button.dropdown-toggle { + margin: 0; + } + } + + .header-logo { + img { + width: 210px; + } + } + + .adb-header-search { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 120px; + height: 100px; + padding: 30px; + background: $nin_sand; + left: 0; + right: 0; + } + + .adb-header-search-mobile .open-search-button { + margin-left: 0; + width: 44px; + } +} \ No newline at end of file