Add sticky banner to all pages

bside-ms · Feb 11, 2024 · 7909e81 · 7909e81
1 parent 21f36c6
commit 7909e81
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 143 deletions.
diff --git a/components/layout/ContentDivider.tsx b/components/layout/ContentDivider.tsx
diff --git a/components/layout/header/HeaderBanner.tsx b/components/layout/header/HeaderBanner.tsx
@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import classNames from 'classnames';
+import Link from 'next/link';
+import type { ReactElement } from 'react';
+import ContentWrapper from '@/components/layout/ContentWrapper';
+import isNotEmptyString from '@/lib/common/helper/isNotEmptyString';
+import useLocalStorage from '@/lib/common/hooks/useLocalStorage';
+
+const HeaderBanner = (): ReactElement => {
+
+    // TODO: Move config to CMS
+    const isBannerActive = false;
+    const bannerId = 4711;
+    const bannerText = 'Die besten Veranstaltungen in deiner Nähe!';
+    const bannerLink = '/events';
+    const bannerColor = '#f6981e';
+    const bannerTextColor = '#ffffff';
+
+    const [hasDismissedBanner, setDismissedBanner] = useLocalStorage(`header_${bannerId}_dismissed`, false);
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const isBannerVisible = isBannerActive && !hasDismissedBanner;
+
+    const onDismissClick = useCallback(() => setDismissedBanner(true), [setDismissedBanner]);
+
+    const content = (
+        <ContentWrapper className="!py-2">
+            <div className="flex justify-between items-center gap-2">
+                {bannerText}
+
+                <div onClick={onDismissClick}>✕</div>
+            </div>
+        </ContentWrapper>
+    );
+
+    return (
+        <div
+            className={classNames(
+                'font-serif',
+                'text-sm',
+                'md:text-base',
+                'lg:text-lg',
+                !isBannerVisible && 'hidden'
+            )}
+            style={{ backgroundColor: bannerColor, color: bannerTextColor }}
+        >
+            {isNotEmptyString(bannerLink) ? <Link href={bannerLink}>{content}</Link> : content}
+
+        </div>
+    );
+};
+
+export default HeaderBanner;
diff --git a/components/layout/header/HeaderBarDesktop.tsx b/components/layout/header/HeaderBarDesktop.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
+import HeaderBanner from '@/components/layout/header/HeaderBanner';
 import { DesktopNavigationItems } from '@/components/layout/navigation/desktop/DesktopNavigationItems';
 import DesktopNavigationLink from '@/components/layout/navigation/desktop/DesktopNavigationLink';
 import Heart from '@/components/svg/Heart';
@@ -10,18 +11,17 @@ const HeaderBarDesktop = (): ReactElement => {
     const { locale, asPath } = useRouter();
 
     return (
-        <header className="fixed top-0 left-0 right-0 z-20">
-            <div className="flex flex-row align-bottom max-w-wide w-full relative">
-                <a
-                    href="#content"
-                    className="sr-only focus:not-sr-only focus:absolute top-2 left-0 whitespace-nowrap font-serif text-2xs uppercase leading-none text-black hover:text-orange"
-                >
-                    Zum Inhalt springen
-                </a>
-            </div>
+        <header className="sticky top-0 left-0 right-0 z-20">
+            <a
+                href="#content"
+                className="sr-only focus:not-sr-only focus:absolute top-2 left-0 whitespace-nowrap font-serif text-2xs uppercase leading-none text-black hover:text-orange"
+            >
+                Zum Inhalt springen
+            </a>
 
-            <div className="bg-white p-4 pb-2">
+            <HeaderBanner />
 
+            <div className="bg-white p-4 pb-2 relative">
                 <nav className="text-md lg:text-lg font-bold font-serif text-center lg:w-[54rem] xl:w-[70rem] mx-auto flex justify-between">
                     <Link
                         href="/"

diff --git a/components/layout/header/HeaderBarMobile.tsx b/components/layout/header/HeaderBarMobile.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
+import HeaderBanner from '@/components/layout/header/HeaderBanner';
 import MobileNavigationOverlay from '@/components/layout/navigation/mobile/MobileNavigationOverlay';
 import { useAppContext } from '@/components/layout/next/AppContext';
 import BurgerHeart from '@/components/svg/BurgerHeart';
@@ -19,20 +20,25 @@ const HeaderBarMobile = (): ReactElement => {
     const { toggleNavigation } = useAppContext();
 
     return (
-        <header className="fixed top-0 left-0 right-0 z-20">
-            <div className="flex justify-between p-4">
+        <header className="sticky top-0 left-0 right-0 z-20">
+            <HeaderBanner />
+
+            <div className="relative">
                 <div className="absolute top-0 left-0 border-[50px] border-transparent border-t-white border-l-white" />
                 <div className="absolute top-0 right-0 border-[50px] border-transparent border-t-white border-r-white" />
 
-                <div
-                    className="w-6 z-20"
-                    onClick={handleClickOnHeart}
-                >
-                    <Heart />
-                </div>
+                <div className="flex justify-between p-4">
+
+                    <div
+                        className="w-6 z-20"
+                        onClick={handleClickOnHeart}
+                    >
+                        <Heart />
+                    </div>
 
-                <div className="w-6 z-20" onClick={toggleNavigation}>
-                    <BurgerHeart />
+                    <div className="w-6 z-20" onClick={toggleNavigation}>
+                        <BurgerHeart />
+                    </div>
                 </div>
             </div>
 

diff --git a/components/layout/navigation/mobile/MobileNavigationItems.tsx b/components/layout/navigation/mobile/MobileNavigationItems.tsx
@@ -7,39 +7,38 @@ import { colors } from '@blocks/circleOverviewBlock/CircleOverview';
 
 const MobileNavigationItems = (): ReactElement => {
 
-    const { asPath } = useRouter();
+    const { asPath, locale } = useRouter();
 
     return (
         <div className="flex flex-col items-end gap-6 text-right">
-
             <MobileNavigationLink href="/" color={colors[0 % colors.length]!}>
-                Start
+                {locale === 'en' ? 'Home' : 'Start'}
             </MobileNavigationLink>
 
             <MobileNavigationLink href="/events" color={colors[1 % colors.length]!}>
-                Veranstaltungen
+                {locale === 'en' ? 'Events' : 'Veranstaltungen'}
             </MobileNavigationLink>
 
             <MobileNavigationLink href="/bside" color={colors[2 % colors.length]!}>
-                Die B-Side
+                {locale === 'en' ? 'About B-Side' : 'Die B-Side'}
             </MobileNavigationLink>
 
             <MobileNavigationLink href="/kultur" color={colors[3 % colors.length]!}>
                 <div className="leading-4">
-                    Kultur & Bildung
+                    {locale === 'en' ? 'Culture & education' : 'Kultur & Bildung'}
                     <span className="text-sm"><br />B-Side Kultur e.V.</span>
                 </div>
             </MobileNavigationLink>
 
             <MobileNavigationLink href="/quartier" color={colors[4 % colors.length]!}>
                 <div className="leading-4">
-                    Quartiersarbeit
+                    {locale === 'en' ? 'Neighbourhood work' : 'Quartiersarbeit'}
                     <span className="text-sm"><br />B-Side GmbH</span>
                 </div>
             </MobileNavigationLink>
 
             <MobileNavigationLink href="/kontakt" color={colors[6 % colors.length]!}>
-                Kontakt
+                {locale === 'en' ? 'Contact' : 'Kontakt'}
             </MobileNavigationLink>
 
             <Link
@@ -56,12 +55,12 @@ const MobileNavigationItems = (): ReactElement => {
             </Link>
 
             <Link
-                href={`${asPath}`}
+                href={asPath !== '/' ? asPath : locale === 'de' ? '/en' : '/'}
                 className="text-white text-sm hover:text-orange-500 cursor-pointer"
-                aria-label="Show the english version"
-                locale="en"
+                aria-label={locale !== 'en' ? 'Show the english version' : 'Deutschsprachige Version anzeigen'}
+                locale={locale !== 'en' ? 'en' : 'de'}
             >
-                Show the english version
+                {locale !== 'en' ? 'Show the english version' : 'Zur deutschsprachigen Version'}
             </Link>
         </div>
     );

diff --git a/components/layout/navigation/mobile/MobileNavigationItemsEnglish.tsx b/components/layout/navigation/mobile/MobileNavigationItemsEnglish.tsx
diff --git a/components/layout/navigation/mobile/MobileNavigationOverlay.tsx b/components/layout/navigation/mobile/MobileNavigationOverlay.tsx
@@ -1,8 +1,6 @@
 import { useCallback } from 'react';
-import { useRouter } from 'next/router';
 import type { ReactElement, SyntheticEvent } from 'react';
 import MobileNavigationItems from '@/components/layout/navigation/mobile/MobileNavigationItems';
-import MobileNavigationItemsEnglish from '@/components/layout/navigation/mobile/MobileNavigationItemsEnglish';
 import { useAppContext } from '@/components/layout/next/AppContext';
 
 const MobileNavigationOverlay = (): ReactElement | null => {
@@ -17,8 +15,6 @@ const MobileNavigationOverlay = (): ReactElement | null => {
         }
     }, [toggleNavigation]);
 
-    const { locale } = useRouter();
-
     return (
         <>
             <nav
@@ -75,7 +71,7 @@ const MobileNavigationOverlay = (): ReactElement | null => {
                         z-40
                     `}
                 >
-                    { locale === 'en' ? <MobileNavigationItemsEnglish /> : <MobileNavigationItems /> }
+                    <MobileNavigationItems />
                 </div>
             </nav>
 

diff --git a/lib/common/hooks/useLocalStorage.ts b/lib/common/hooks/useLocalStorage.ts
@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+import useEffectOnMount from '@/lib/common/hooks/useEffectOnMount';
+
+const useLocalStorage = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
+
+    const [currentValue, setCurrentValue] = useState<T>(defaultValue);
+
+    useEffectOnMount(() => {
+        const valueFromStorage = window.localStorage.getItem(key);
+
+        if (valueFromStorage !== null) {
+            setCurrentValue(JSON.parse(valueFromStorage) as T);
+        }
+    });
+
+    const setValue = useCallback((newValue: T) => {
+        setCurrentValue(newValue);
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+    }, [key]);
+
+    return [currentValue, setValue];
+};
+
+export default useLocalStorage;
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
 import BsideElements from '@/components/bside/BsideElements';
 import Footer from '@/components/common/Footer';
-import ContentDivider from '@/components/layout/ContentDivider';
 import ContentWrapper from '@/components/layout/ContentWrapper';
 import HeaderBar from '@/components/layout/header/HeaderBar';
 import NextHead from '@/components/layout/next/NextHead';
@@ -46,8 +45,6 @@ export default ({ about }: Props): ReactElement => {
             <NextHead />
             <HeaderBar />
 
-            <ContentDivider />
-
             <main id="content">
                 <div className="py-1" />
 

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -43,7 +43,9 @@ const App = ({ Component, pageProps }: AppProps): ReactElement => {
         <AppContextProvider>
             <BreakpointContextProvider>
                 <NextHead />
-                <Component {...pageProps} />
+                <div className="relative">
+                    <Component {...pageProps} />
+                </div>
             </BreakpointContextProvider>
         </AppContextProvider>
     );

diff --git a/pages/bside/kollektiv.tsx b/pages/bside/kollektiv.tsx
@@ -5,7 +5,6 @@ import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
 import { useBreakpointContext } from '@/components/common/BreakpointContext';
 import Footer from '@/components/common/Footer';
-import ContentDivider from '@/components/layout/ContentDivider';
 import ContentWrapper from '@/components/layout/ContentWrapper';
 import HeaderBar from '@/components/layout/header/HeaderBar';
 import NextHead from '@/components/layout/next/NextHead';
@@ -56,8 +55,6 @@ export default ({ events, organisation, circles }: Props): ReactElement => {
             <div className="min-h-screen flex flex-col justify-between">
                 <HeaderBar />
 
-                <ContentDivider />
-
                 <main id="content">
                     <ContentWrapper>
                         <div className="w-full h-32 xs:h-40 md:h-52 relative lg:mt-4">

diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
@@ -8,7 +8,6 @@ import type { ReactElement } from 'react';
 import { useInView } from 'react-intersection-observer';
 import Footer from '@/components/common/Footer';
 import EventDetails from '@/components/events/detail/EventDetails';
-import ContentDivider from '@/components/layout/ContentDivider';
 import ContentWrapper from '@/components/layout/ContentWrapper';
 import HeaderBar from '@/components/layout/header/HeaderBar';
 import isEmptyString from '@/lib/common/helper/isEmptyString';
@@ -88,7 +87,6 @@ export default ({ initialEvent }: Props): ReactElement => {
     return (
         <div className="min-h-screen flex flex-col justify-between">
             <HeaderBar />
-            <ContentDivider />
 
             <main id="content" className="relative">
                 <ContentWrapper>