Procurez-vous une barre de navigation Sweet React 🍫

Lors de la création de pages Web, je travaille toujours d'abord sur la barre de navigation. C'est pour que je puisse gérer tous les itinéraires potentiels et concevoir la page de haut en bas. Dans ce blog, je vais voir comment vous pouvez avoir un design NavBar plus moderne avec un petit acte de disparition (et d'apparition) !

Morphisme du verre 👓

Préparez-vous à plonger dans le futur du design avec un certain attrait Glass Morphic !

Une tendance de conception moderne est le morphisme du verre ou, en d'autres termes, un aspect de verre dépoli qui prévaut parmi de nombreuses interfaces utilisateur de système d'exploitation. Pour obtenir ce look, nous avons simplement besoin d'une astuce CSS - backdrop-filter.

Le code ci-dessous montre quelle propriété CSS nous devons utiliser et le filtre :

backdrop-filter: blur(20px)

Maintenant tu me vois, maintenant tu ne me vois plus ! ✨

Si vous souhaitez que les utilisateurs découvrent votre site Web ou votre application Web sans qu'aucune barre de navigation ne bloque la vue complète potentielle, alors c'est l'une des meilleures solutions pour vous !

Nous voulons créer une barre de navigation qui disparaît lors du défilement vers le bas et apparaît lors du défilement vers le haut. Nous y parvenons en utilisant du JS vanille et des crochets React.

Tout d'abord, nous devons importer useStateet useEffect, et définir l'état comme indiqué ci-dessous :

import React, { useState, useEffect } from 'react';
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
return (
    ...
  )
}

import React, { useState, useEffect } from 'react';
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
const navbarStyles = { transition: 'top 0.6s' }
return (
    <div className='nav-bar' style={{ ...navbarStyles, top: visible ? '0' : '-100px' }}>
    ...
  )
}

Rebondir

Afin de créer notre fonctionnalité cool de barre de navigation, nous utiliserons une méthode d'aide écrite en vanilla js. Nous importerons ensuite cela dans nos NavBarcomposants à utiliser. Ci-dessous le code de la méthode helper :

export function debounce(func, wait, immediate) { 
  let timeout; 
  return function() {  
    let context = this, args = arguments;  
    let later = function() {   
      timeout = null;   
      if (!immediate) func.apply(context, args);  
    };  
    let callNow = immediate && !timeout;  
    clearTimeout(timeout);  
    timeout = setTimeout(later, wait);  
    if (callNow) func.apply(context, args); 
  };
};

Maintenant, nous devons créer notre handleScrollfonction, en utilisant debouncecomme argument et useEffectpour gérer l'acte d'apparition et de disparition :

import React, { useState, useEffect } from 'react';
import { debounce } from '../../utilities/helpers;
import '../../styling/navbar.css';

const NavBar = () => {  
  const [prevScrollPos, setPrevScrollPos] = useState(0);  
  const [visible, setVisibile] = useState(0);
const navbarStyles = { transition: 'top 0.6s' }
const handleScroll = debounce(() => {
    const currentScrollPos = window.pageYOffset;
    setVisibile((prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70) || currentScrollPos < 10);
    setPrevScrollPos(currentScrollPos);  
  }, 100)
useEffect(() => {    
    window.addEventListener('scroll', handleScroll);    
    return () => window.removeEventListener('scroll', handleScroll);
  }, [prevScrollPos, visible, handleScroll]);
return (
    <div className='nav-bar' style={{ ...navbarStyles, top: visible ? '0' : '-100px' }}>
    ...
  )
}

J'espère que ce petit blog vous aidera à concevoir votre propre barre de navigation et donnera plus de saveur à votre site Web et/ou application Web !