Kendinize Tatlı Bir React NavBar Alın 🍫

Web sayfaları oluştururken her zaman önce gezinme çubuğu üzerinde çalışırım. Bu, olası rotalarla başa çıkabilmem ve sayfayı yukarıdan aşağıya doğru tasarlayabilmem için. Bu blogda, biraz kaybolan (ve görünen) bir hareketle daha modern bir NavBar tasarımına sahip olmanın düzgün bir yolunu izleyeceğim!

Cam Morfizm 👓

Glass Morphic çekiciliğiyle tasarımın geleceğine sıçramaya hazır olun!

Modern bir tasarım trendi, cam morfizmi veya başka bir deyişle, önde gelen birçok işletim sistemi kullanıcı arayüzü arasında yaygın olan buzlu cam görünümüdür. Bu görünümü elde etmek için sadece bir CSS numarasına ihtiyacımız var - backdrop-filter.

Aşağıdaki kod, hangi CSS özelliğini kullanmamız gerektiğini ve filtreyi gösterir:

backdrop-filter: blur(20px)

Şimdi beni görüyorsun, şimdi görmüyorsun! ✨

Kullanıcıların, potansiyel tam görünümü engelleyen herhangi bir gezinme çubuğu olmadan web sitenizi veya web uygulamanızı deneyimlemelerini istiyorsanız, bu sizin için en iyi çözümlerden biridir!

Aşağı kaydırmada kaybolan ve yukarı kaydırmada görünen bir gezinme çubuğu oluşturmak istiyoruz. Bunu biraz vanilya JS ve React Hooks kullanarak başarıyoruz.

Öncelikle, ve öğesini içe aktarmamız useStateve useEffectdurumu aşağıda gösterildiği gibi ayarlamamız gerekiyor :

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

geri tepme ⛹🏼

Cool navbar özelliğimizi oluşturmak için vanilya js ile yazılmış bir yardımcı yöntem kullanacağız. Daha sonra NavBarbunu kullanmak için bileşenlerimize aktaracağız . Yardımcı yöntemin kodu aşağıdadır:

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

Şimdi, argüman olarak handleScrollkullanarak ve görünen ve kaybolan eylemi yönetmek için fonksiyonumuzu oluşturmamız gerekiyor :debounceuseEffect

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

Umarım bu küçük blog, kendi gezinme çubuğunuzu tasarlarken yardımcı olur ve web sitenize ve/veya web uygulamanıza daha fazla lezzet katar!