+
{menu.map((m) => {
const ActionIcon = m.icon;
diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css
index 1214f6474..42f76c04e 100644
--- a/src/components/header/Header.module.css
+++ b/src/components/header/Header.module.css
@@ -28,16 +28,6 @@
display: none;
}
-.header .top,
-.header .bottom {
- display: flex;
- justify-content: space-between;
-}
-
-.header .bottom {
- height: 100%;
-}
-
.header .top {
display: none;
padding: var(--pt1) 0 var(--pt1) 0;
@@ -63,102 +53,15 @@
align-items: center;
}
-.bottom .actions .action,
.top .materials a,
.top .actions a {
margin: 0 var(--pt3) 0 0;
}
-.bottom .actions .action {
- display: flex;
- margin: 0 var(--pt4) 0 0;
-}
-
-.bottom .actions .action:last-child,
.top .actions a:last-child {
margin: 0;
}
-.bottom .actions {
- display: flex;
- align-items: center;
-}
-
-/* Logo */
-
-.select {
- white-space: nowrap;
- height: var(--pt7);
-}
-
-/* Searchbar */
-
-.search {
- flex-grow: 2;
- display: flex;
- position: relative;
-}
-
-.suggester__wrap {
- padding-bottom: var(--pt2);
- flex-grow: 2;
- max-width: 672px;
-}
-
-.suggester {
- max-width: 100%;
-}
-
-/* Search button */
-
-.button {
- position: relative;
- width: 125px;
- min-width: 125px;
- height: var(--pt7);
- padding: var(--pt2) var(--pt4);
- background-color: transparent;
- color: var(--blue);
- border: 2px solid var(--blue);
- font-family: var(--body-font-medium);
- font-size: 20px;
- letter-spacing: 0.2px;
- line-height: 22px;
- cursor: pointer;
- overflow: hidden;
-}
-
-.button span {
- color: var(--blue);
- position: relative;
- z-index: 2;
- border-width: 3px;
-}
-
-.button .fill {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: var(--blue);
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%) scale(0.75);
- transition-duration: 0.2s;
- z-index: 1;
- opacity: 0;
-}
-
-.button:hover > .fill,
-.button:focus-visible > .fill {
- opacity: 1;
- transform: translate(-50%, -50%) scale(1.1);
-}
-
-.button:hover > span,
-.button:focus-visible > span {
- color: white;
-}
-
@media (max-width: 991px) {
.header {
padding-top: var(--pt1);
@@ -201,10 +104,6 @@
transform: scale(0.9);
}
- .search > * {
- display: none;
- }
-
.mobileHeader {
margin-left: 0;
}
@@ -212,33 +111,6 @@
.mobileHeaderNoActionCol {
display: none;
}
-
- .suggester__wrap {
- position: fixed;
- top: 0;
- left: 0;
-
- width: 100%;
- max-width: 100%;
- height: 100%;
- background-color: white;
- z-index: 99;
-
- display: block;
- opacity: 0;
- pointer-events: none;
- transition-duration: 0.3s;
- transform: translate(0, 50px);
- }
-
- /* visible suggester class for mobile */
- .suggester__visible {
- max-width: 100%;
- opacity: 1;
- pointer-events: auto;
- transform: translate(0, 0);
- transition-duration: 0.35s;
- }
}
@media (min-width: 992px) {
@@ -247,35 +119,11 @@
/*padding-bottom: var(--pt4);*/
}
- .header .bottom {
- height: auto;
- }
-
- .bottom .actions {
- height: 64px;
- }
-
- .bottom .actions .action:first-child {
- display: none;
- }
-
- .bottom .actions .action:last-child {
- display: flex;
- }
-
.header .top {
display: flex;
height: 48px;
}
- .header .bottom {
- padding: var(--pt1) 0 0 0;
- }
-
- .bottom .actions .action {
- margin: 0 var(--pt3) 0 0;
- }
-
.mobileSearch {
display: none;
}
@@ -293,16 +141,6 @@
}
}
-@media (min-width: 1200px) {
- .bottom .actions .action {
- display: flex;
- }
-
- .bottom .actions .action:first-child {
- display: none;
- }
-}
-
@media (min-width: 1400px) {
.header .top {
justify-content: space-between;
diff --git a/src/components/header/icons/burger/burger.js b/src/components/header/icons/burger/burger.js
deleted file mode 100644
index 723ec8b7c..000000000
--- a/src/components/header/icons/burger/burger.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Custom basket action menu
- */
-import PropTypes from "prop-types";
-
-import Action from "@/components/base/action";
-
-import styles from "./burger.module.css";
-
-/**
- * The Component function
- *
- * @param {Object} props
- * See propTypes for specific props and types
- *
- * @returns {React.JSX.Element}
- */
-export default function BurgerIcon(props) {
- const { className } = props;
-
- return (
-
-
-
- );
-}
-
-// PropTypes for component
-BurgerIcon.propTypes = {
- className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
- href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
- icon: PropTypes.string,
- title: PropTypes.string,
- badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- children: PropTypes.object,
- dataCy: PropTypes.string,
-};
diff --git a/src/components/header/icons/burger/burger.module.css b/src/components/header/icons/burger/burger.module.css
deleted file mode 100644
index a7054ecf3..000000000
--- a/src/components/header/icons/burger/burger.module.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.icon {
- /* width: var(--pt2); */
- /* height: 18px; */
- width: 20px;
- height: 22px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
-.line {
- width: 100%;
- height: 2px;
- background-color: var(--mine-shaft);
- margin: auto;
- transition-duration: 0.3s;
-}
-
-.line:nth-child(2) {
- transform: scale(0.75);
-}
-@media (hover: hover) {
- .trigger:hover .line:not(:nth-child(2)),
- .trigger:focus .line:not(:nth-child(2)) {
- animation: fullWidth 0.4s cubic-bezier(0.3, 1, 0.32, 1.3);
- }
-
- .trigger:hover .line:nth-child(2),
- .trigger:focus .line:nth-child(2) {
- transform: scale(1);
- animation: fullWidth 0.4s cubic-bezier(0.3, 1, 0.32, 2);
- }
-}
-@keyframes fullWidth {
- from {
- transform: scale(0.75);
- }
- to {
- transform: scale(1);
- }
-}
diff --git a/src/components/header/icons/globe/burger.js b/src/components/header/icons/globe/burger.js
new file mode 100644
index 000000000..6deece3d2
--- /dev/null
+++ b/src/components/header/icons/globe/burger.js
@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+import Action from "@/components/base/action";
+import styles from "./burger.module.css";
+/**
+ * The Component function replicating the uploaded SVG icon
+ *
+ * @param {Object} props
+ * See propTypes for specific props and types
+ *
+ * @returns {React.JSX.Element}
+ */
+export default function EarthIcon(props) {
+ const { className } = props;
+
+ return (
+
+
+
+ );
+}
+
+// PropTypes for component
+EarthIcon.propTypes = {
+ className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ icon: PropTypes.string,
+ title: PropTypes.string,
+ badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ children: PropTypes.object,
+ dataCy: PropTypes.string,
+};
diff --git a/src/components/header/icons/globe/burger.module.css b/src/components/header/icons/globe/burger.module.css
new file mode 100644
index 000000000..e1cab07e0
--- /dev/null
+++ b/src/components/header/icons/globe/burger.module.css
@@ -0,0 +1,20 @@
+.icon {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.earth {
+ width: 100%;
+ height: 100%;
+}
+
+@media (hover: hover) {
+ .trigger:hover .earth,
+ .trigger:focus .earth {
+ stroke: var(--blue);
+ transition: stroke 0.3s ease;
+ }
+}
diff --git a/src/components/header/icons/burger/index.js b/src/components/header/icons/globe/index.js
similarity index 100%
rename from src/components/header/icons/burger/index.js
rename to src/components/header/icons/globe/index.js
diff --git a/src/components/help/header/Header.js b/src/components/help/header/Header.js
index 7dc7da8d0..f5744bba0 100644
--- a/src/components/help/header/Header.js
+++ b/src/components/help/header/Header.js
@@ -7,8 +7,8 @@ import Translate from "@/components/base/translate";
import SearchInput from "@/components/help/search/input";
import { useModal } from "@/components/_modal";
-
-import BurgerIcon from "@/components/header/icons/burger";
+//TODO: CHECK WHERE THIS COMPONENT IS USED
+import GlobeIcon from "@/components/header/icons/globe";
import styles from "./Header.module.css";
import Title from "@/components/base/title";
@@ -61,7 +61,7 @@ export function Header({
- onMenuClick()}
diff --git a/src/components/hero/Hero.js b/src/components/hero/Hero.js
index 0ba9a3525..52eb46e81 100644
--- a/src/components/hero/Hero.js
+++ b/src/components/hero/Hero.js
@@ -9,22 +9,24 @@ import Icon from "@/components/base/icon";
import FakeSearchInput from "@/components/header/suggester/FakeSearchInput";
import Translate from "@/components/base/translate";
import Image from "@/components/base/image";
-import { useData } from "@/lib/api/api";
-import { frontpageHero } from "@/lib/api/hero.fragments";
+
import Text from "@/components/base/text/Text";
+import useAgencyFromSubdomain from "@/components/hooks/useSubdomainToAgency";
//@TODO switch backclass for mobile
// @TODO image scale on resize
-export function Hero({ image }) {
+export function Hero() {
+ const { agency, heroPath } = useAgencyFromSubdomain();
+
return (
- {image?.image?.url && (
+ {heroPath && (
)}
@@ -69,9 +71,9 @@ export function Hero({ image }) {
})}