Holen Sie sich eine süße React NavBar 🍫

Beim Erstellen von Webseiten arbeite ich immer zuerst an der Navbar. So konnte ich mich mit eventuellen Routen auseinandersetzen und die Seite von oben nach unten gestalten. In diesem Blog werde ich eine nette Art und Weise durchgehen, wie Sie ein moderneres NavBar-Design mit ein wenig verschwindendem (und erscheinendem) Akt haben können!

Glasmorphismus 👓

Machen Sie sich bereit für einen Sprung in die Zukunft des Designs mit etwas Glass Morphic Appeal!

Ein moderner Designtrend ist der Glasmorphismus oder mit anderen Worten ein Milchglas-Look, der bei vielen führenden Betriebssystem-UIs vorherrscht. Um dieses Aussehen zu erreichen, brauchen wir nur einen CSS-Trick — backdrop-filter.

Der folgende Code zeigt, welche CSS-Eigenschaft wir verwenden müssen und den Filter:

backdrop-filter: blur(20px)

Jetzt siehst du mich, jetzt nicht! ✨

Wenn Sie möchten, dass Benutzer Ihre Website oder Webanwendung erleben, ohne dass eine Navbar die potenzielle Vollansicht blockiert, dann ist dies eine der besten Lösungen für Sie!

Wir möchten eine Navigationsleiste erstellen, die beim Scrollen nach unten verschwindet und beim Scrollen nach oben erscheint. Dies erreichen wir, indem wir einige Vanilla-JS- und React-Hooks verwenden.

Erstens müssen wir auf Import useStateund useEffectund Set - Zustand , wie unten dargestellt:

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' }}>
    ...
  )
}

Entprellen ⛹🏼

Um unsere coole Navbar-Funktion zu erstellen, verwenden wir eine Hilfsmethode, die in Vanilla js geschrieben ist. Wir werden dies dann in unsere NavBarKomponenten importieren , um sie zu verwenden. Unten ist der Code für die Hilfsmethode:

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); 
  };
};

Jetzt müssen wir unsere handleScrollFunktion erstellen, die wir debounceals Argument verwenden und useEffectden erscheinenden und verschwindenden Akt verwalten:

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' }}>
    ...
  )
}

Ich hoffe, dieser kleine Blog hilft beim Entwerfen Ihrer eigenen Navbar und verleiht Ihrer Website und/oder Webanwendung mehr Flair!