fix(gatsby): header, nav, logo, layout page interne

src/app/website/src/components/Layout.tsx

@@ -33,13 +33,14 @@ const Layout = ({
   useChangeLanguage(path);
   const [switchLanguage] = useSwitchLanguage();
   const { footer, header } = useGetMenus(i18n.language as SupportedLanguage);
-  const eng = new RegExp(/\/en/);
+  const eng = new RegExp(/^\/en\/$|^\/en$/);
   const isHome = path === '/' || eng.test(path);
   return (
     <ThemeProvider theme={theme}>
       <Seo title={pageContext.title || 'DisMoi'} />
       <Header
-        scrolled={scrolled || !isHome}
+        isHome={isHome}
+        scrolled={scrolled}
         links={header}
         switchLanguage={switchLanguage}
       />

src/app/website/src/contents/en/about.mdx

@@ -4,6 +4,9 @@ label: "About us"
 name: "about"
 locale: "en"
 ---
+import Page from "../../pages/{mdx.slug}";
+
+<Page/>
 
 [À TRADUIRE !!!]
 
@@ -119,3 +122,4 @@ Basée à Bordeaux, d’où sont originaires les deux frères co-fondateurs de D
 ## VII. Nous contacter
 
 C'est [par là](https://www.dismoi.op/contact).
+

src/app/website/src/hooks/useSwitchLanguage.ts

@@ -3,7 +3,8 @@ import i18n from '../../../../libs/i18n';
 
 const useSwitchLanguage = (): [() => void] => {
   const newLocale = i18n.language === 'fr' ? 'en' : 'fr';
-  const newSlug = newLocale === 'fr' ? '/' : '/en';
+  const newSlug = newLocale === 'fr' ? '/' : '/en/';
+  console.log(newLocale, newSlug, '---------');
 
   const switchLanguage = () =>
     i18n.changeLanguage(newLocale).then(() => navigate(newSlug));

src/components/website/molecules/Header/Header.tsx

@@ -61,38 +61,52 @@ export interface HeaderProps {
   scrolled?: Scrolled;
   links: Link[];
   switchLanguage: () => void;
+  isHome: boolean;
 }
 
 const Header = styled(
-  ({ className, scrolled, links, switchLanguage }: HeaderProps) => {
-    const [offset, setOffset] = useState(0);
+  ({ className, scrolled, links, switchLanguage, isHome }: HeaderProps) => {
+    const [scrolledClass, setScolledClass] = useState('');
+    const [opacity, setOpacity] = useState(0);
     const [modalOpen, setModalOpen] = React.useState<boolean>(false);
 
     useEffect(() => {
-      window.onload = () => {
-        setOffset(window.pageYOffset);
+      setOpacity(100);
+      const setMoove = () => {
+        console.log(1);
+        if (scrolled || !isHome || window.pageYOffset > 0)
+          return setScolledClass('scrolled');
+        console.log(
+          2,
+          isHome,
+          window.pageYOffset <= 0,
+          isHome && window.pageYOffset <= 0
+        );
+        if (isHome && window.pageYOffset <= 0) return setScolledClass('');
+        console.log(3);
+        return setScolledClass('scrolled');
       };
+      setMoove();
       window.onscroll = () => {
-        setOffset(window.pageYOffset);
+        setMoove();
       };
     }, []);
 
-    const isScrolled = scrolled || offset > 0;
     return (
       <>
-        <header className={className + (isScrolled ? ' scrolled' : '')}>
+        <header className={className + ' ' + scrolledClass} style={{ opacity }}>
           <a className="homeLink" href={'/'}>
             <LogoDisMoi />
           </a>
           <NavDesktop>
             <ListLinks links={links} />
-            {isScrolled && <HeaderCTAButton />}
+            {!!scrolledClass && <HeaderCTAButton />}
             <NavDesktopItem onClick={switchLanguage}>
               <span title="French">fr</span> | <span title="English">en</span>
             </NavDesktopItem>
           </NavDesktop>
           <MobileButtonsWrapper>
-            {isScrolled && <HeaderCTAButton />}
+            {!!scrolledClass && <HeaderCTAButton />}
             <ToggleMenu handleClick={() => setModalOpen(true)} />
           </MobileButtonsWrapper>
         </header>