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 React, jangan ragu untuk melompat ke langkah berikutnya.

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;

Membuat Komponen Navigasi

Komponen navigasi yang akan Anda buat akan terlihat seperti ini:

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:

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"
}
]

See also  Sign vs. Wire: Aplikasi Pesan Aman Mana yang Lebih Baik?

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:


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

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

<div>
<button className={styles.menuBtn}>
<KeyboardDoubleArrowLeftIcon />
</button>
{navData.map(item =>{
return <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>

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.

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

.sidenavClosed {
composes: sidenav;
transition: width 0.3s ease-in-out;
width: 60px
}

.sideitem {
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
color:
text-decoration: none;
}

.linkText {
padding-left: 16px;
}

.linkTextClosed {
composes: linkText;
visibility: hidden;
}

.sideitem:hover {
background-color:
}

.menuBtn {
align-self: center;
align-self: flex-start;
justify-self: flex-end;
color:
background-color: transparent;
border: none;
cursor: pointer;
padding-left: 20px;
}

See also  Godot Engine 4.0 Beta Dirilis: Apa Artinya Bagi Pengembang

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 props jalur. 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.

See also  Cara Menggunakan Penyimpanan lokal di JavaScript

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. Kait React ini 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.sidenavClosed}>
<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.linkTextClosed}>{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 sidenavClosed.

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.

Ambil kode lengkap dari repositori GitHub ini dan coba sendiri.

Styling Komponen React

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.