Merge branch '25-fix-transparent-navbar-when-scrolling-up' into 'main'

Resolve "fix: navbar"

Closes #23

See merge request !16

docusaurus.config.js

@@ -49,7 +49,7 @@ const config = {
         respectPrefersColorScheme: false,
       },
       navbar: {
-        hideOnScroll: true,
+        hideOnScroll: false,
         logo: {
           alt: 'Lydra Logo',
           src: 'img/logo_lydra.svg',
@@ -58,7 +58,8 @@ const config = {
           {
             to: '/', 
             label: 'Home', 
-            position: 'right'
+            position: 'right',
+            activeBaseRegex: '^/$'
           },
           {
             type: 'dropdown',
@@ -112,6 +113,7 @@ const config = {
               {
                 label: 'L\'équipe',
                 to: '/#team',
+                activeBasePath: '/#'
               },
               {
                 label: 'Nos inspirations',

src/components/TestimoniesCarousel/index.js

@@ -31,7 +31,7 @@ export default function TestimoniesCarousel() {
     accessibility: true,
     nextArrow: <SampleNextArrow />,
     prevArrow: <SamplePrevArrow />,
-    infinite: false,
+    infinite: true,
     autoplay: true,
     dots: true,
     speed: 500,

src/css/custom.css

@@ -41,8 +41,6 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-navbar-background-color: transparent;
-
   --ifm-color-primary: #f15a22;
   --ifm-color-primary-dark: #e94a0f;
   --ifm-color-primary-darker: #dc460e;

src/theme/Navbar/Layout/index.js

-import React from 'react';
-import clsx from 'clsx';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import {
-  useHideableNavbar,
-  useNavbarMobileSidebar,
-} from '@docusaurus/theme-common/internal';
-import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
-import styles from './styles.module.css';
-
-
-function NavbarBackdrop(props) {
-  return (
-    <div
-      role="presentation"
-      {...props}
-      className={clsx('navbar-sidebar__backdrop', props.className)}
-    />
-  );
-}
-export default function NavbarLayout({children}) {
-  const {
-    navbar: {hideOnScroll, style},
-  } = useThemeConfig();
-  const mobileSidebar = useNavbarMobileSidebar();
-  const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
-  return (
-    <nav
-      ref={navbarRef}
-      className={clsx(
-        'navbar',
-        'navbar--fixed-top',
-        hideOnScroll && [
-          styles.navbarHideable,
-          !isNavbarVisible && styles.navbarHidden,
-        ],
-        {
-          'navbar--dark': style === 'dark',
-          'navbar--primary': style === 'primary',
-          'navbar-sidebar--show': mobileSidebar.shown,
-        },
-      )}>
-      {children}
-      <NavbarBackdrop onClick={mobileSidebar.toggle} />
-      <NavbarMobileSidebar />
-    </nav>
-  );
-}

src/theme/Navbar/Layout/styles.module.css

-.navbarHideable {
-  transition: var(--ifm-transition-fast) ease;
-}
-
-.navbarHidden {
-  background-color: var(--ifm-background-surface-color);
-  box-shadow: var(--ifm-navbar-shadow)
-}