Cara Membuat Menu Navigasi yang Dapat Dilipat Menggunakan React

Menu navigasi bilah sisi biasanya terdiri dari daftar tautan vertikal. Anda dapat membuat satu set tautan di React menggunakan react-router-dom.

Ikuti langkah-langkah ini untuk membuat menu navigasi samping React dengan tautan yang berisi ikon UI material. Tautan akan menampilkan halaman yang berbeda saat Anda mengkliknya.

Membuat Aplikasi React

Jika Anda sudah memiliki Proyek reaksi , jangan ragu untuk melompat ke langkah berikutnya.

VIDEO MAKEUSEOF HARI INI

Anda dapat menggunakan perintah create-react-app untuk memulai dan menjalankan React dengan cepat. Ini menginstal semua dependensi dan konfigurasi untuk Anda.

Jalankan perintah berikut untuk membuat proyek React yang disebut react-sidenav.

npx create-react-app react-sidenav

Ini akan membuat folder react-sidenav dengan beberapa file untuk membantu Anda memulai. Untuk membersihkan folder ini sedikit, navigasikan ke folder src dan ganti konten App.js dengan ini:

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

Komponen navigasi yang akan Anda buat akan terlihat seperti ini:

Tampilan menu navigasi React yang tidak diciutkan

Ini cukup sederhana, tetapi setelah Anda selesai, Anda harus dapat memodifikasinya sesuai dengan kebutuhan Anda. Anda dapat menutup komponen navigasi menggunakan ikon panah ganda di bagian atas:

Tampilan menu navigasi React yang diciutkan

Mulailah dengan membuat tampilan yang tidak diciutkan. Selain ikon panah, bilah sisi berisi daftar item. Masing-masing item ini memiliki ikon dan beberapa teks. Daripada berulang kali membuat elemen untuk masing-masing, Anda dapat menyimpan data untuk setiap item dalam array dan kemudian mengulanginya menggunakan fungsi peta.

Untuk mendemonstrasikannya, buat folder baru bernama lib dan tambahkan file baru bernama navData.js.

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
]

Ikon yang digunakan di atas berasal dari pustaka UI Material, jadi instal terlebih dahulu menggunakan perintah ini:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

Selanjutnya, buat folder bernama Komponen dan tambahkan komponen baru yang disebut Sidenav.js .

Dalam file ini, impor navData dari ../lib dan buat kerangka untuk Sidenav fungsi:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
}

Untuk membuat tautan, ubah elemen div dalam komponen ini menjadi ini:

464D2C5E256A2FBCAAE727DA6DA810AFA9F7EB3

Komponen ini membuat tautan navigasi yang berisi ikon dan teks tautan untuk setiap iterasi dalam fungsi peta.

Elemen tombol memegang ikon panah kiri dari perpustakaan Material UI. Impor di bagian atas komponen menggunakan kode ini.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

Anda mungkin juga memperhatikan bahwa nama kelas mereferensikan objek gaya. Ini karena tutorial ini menggunakan modul CSS. Modul CSS memungkinkan Anda untuk membuat gaya cakupan lokal di React . Anda tidak perlu menginstal atau mengonfigurasi apa pun jika Anda menggunakan create-react-app untuk memulai proyek ini.

cara terbaik untuk menemukan seseorang secara online

Di folder Komponen, buat file baru bernama sidenav.module.css dan tambahkan yang berikut ini:

.sidenav { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 20px; 
}

Menyiapkan React Router

Elemen div yang dikembalikan oleh fungsi peta harus berupa tautan. Di React, Anda dapat membuat tautan dan rute menggunakan react-router-dom.

Di terminal, instal react-router-dom melalui npm.

npm install react-router-dom@latest

Perintah ini menginstal versi terbaru dari react-router-dom.

Di Index.js, bungkus komponen Aplikasi dengan Router.

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
);

Selanjutnya, di App.js, tambahkan rute Anda.

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App;

Ubah App.css dengan gaya ini.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
}

Setiap rute mengembalikan halaman yang berbeda tergantung pada URL yang diteruskan ke alat peraga jalan . Buat folder baru bernama Pages dan tambahkan empat komponen — halaman Beranda, Jelajahi, Statistik, dan Pengaturan. Berikut ini contohnya:

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

Jika Anda mengunjungi jalur /home, Anda akan melihat 'Home'.

Tautan di bilah sisi harus mengarah ke halaman yang cocok saat Anda mengekliknya. Di Sidenav.js, ubah fungsi peta untuk menggunakan komponen NavLink dari react-router-dom alih-alih elemen div.

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})}

Ingatlah untuk mengimpor NavLink di bagian atas file.

import { NavLink } from "react-router-dom";

NavLink menerima jalur URL untuk tautan melalui to prop.

Hingga saat ini, bilah navigasi terbuka. Untuk membuatnya dapat diciutkan, Anda dapat mengubah lebarnya dengan mengubah kelas CSS saat pengguna mengklik tombol panah. Anda kemudian dapat mengubah kelas CSS lagi untuk membukanya.

Untuk mencapai fungsi sakelar ini, Anda perlu mengetahui kapan bilah sisi terbuka dan tertutup.

Untuk ini, gunakan kait useState. Ini Kait reaksi memungkinkan Anda untuk menambahkan dan melacak status dalam komponen fungsional.

Di sideNav.js, buat kait untuk status terbuka.

const [open, setopen] = useState(true)

Inisialisasi status terbuka ke true, sehingga bilah sisi akan selalu terbuka saat Anda memulai aplikasi.

Selanjutnya, buat fungsi yang akan mengaktifkan status ini.

const toggleOpen = () => { 
    setopen(!open) 
}

Anda sekarang dapat menggunakan nilai terbuka untuk membuat kelas CSS dinamis seperti ini:

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</span> 
               </NavLink> 
     })} 
</div>

Nama kelas CSS yang digunakan akan ditentukan oleh status terbuka. Misalnya, jika open bernilai true, elemen div luar akan memiliki nama kelas sidenav. Jika tidak, kelas akan menjadi sidenavd.

Ini sama untuk ikon, yang berubah menjadi ikon panah kanan saat Anda menutup bilah sisi.

Ingatlah untuk mengimpornya.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

Komponen bilah sisi sekarang dapat dilipat.

cara mempercepat unduhan uap

Ambil kode lengkap dari ini Repositori GitHub dan coba sendiri.

Styling Komponen Reaksi

React membuatnya mudah untuk membangun komponen navigasi yang dapat dilipat. Anda dapat menggunakan beberapa alat yang disediakan React seperti react-router-dom untuk menangani perutean dan kait untuk melacak status yang diciutkan.

Anda juga dapat menggunakan modul CSS untuk menata komponen, meskipun Anda tidak harus melakukannya. Gunakan mereka untuk membuat kelas cakupan lokal yang unik dan yang dapat Anda goyangkan dari file bundel jika tidak digunakan.

Cara Membuat Menu Navigasi yang Dapat Dilipat Menggunakan React

Membuat Aplikasi React

Membuat Komponen Navigasi

Menyiapkan React Router

Memodifikasi Tautan Navigasi

Styling Komponen Reaksi