Cara Membuat Menu Navigasi Boleh Dilipat Menggunakan React

Menu navigasi bar sisi biasanya terdiri daripada senarai pautan menegak. Anda boleh membuat satu set pautan dalam React menggunakan react-router-dom.

Ikuti langkah ini untuk membuat menu navigasi sisi React dengan pautan yang mengandungi ikon UI bahan. Pautan akan memaparkan halaman yang berbeza apabila anda mengkliknya.

Mencipta Aplikasi React

Jika anda sudah mempunyai a Projek bertindak balas , jangan ragu untuk melangkau ke langkah seterusnya.

cara bermain permainan windows di android

MAKEUSEOF VIDEO OF THE DAY

Anda boleh menggunakan arahan create-react-app untuk memulakan dan menjalankan React dengan cepat. Ia memasang semua kebergantungan dan konfigurasi untuk anda.

Jalankan arahan berikut untuk mencipta projek React yang dipanggil react-sidenav.

npx create-react-app react-sidenav

Ini akan mencipta folder react-sidenav dengan beberapa fail untuk memulakan anda. Untuk membersihkan sedikit folder ini, navigasi ke folder src dan gantikan kandungan App.js dengan ini:

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

Komponen navigasi yang anda akan buat akan kelihatan seperti ini:

Paparan menu navigasi React tidak diruntuhkan

Ia agak mudah, tetapi setelah anda selesai, anda sepatutnya dapat mengubah suainya untuk memenuhi keperluan anda. Anda boleh meruntuhkan komponen navigasi menggunakan ikon anak panah berganda di bahagian atas:

Mulakan dengan mencipta paparan tidak runtuh. Selain daripada ikon anak panah, bar sisi mengandungi senarai item. Setiap item ini mempunyai ikon dan beberapa teks. Daripada mencipta elemen secara berulang untuk setiap satu, anda boleh menyimpan data untuk setiap item dalam tatasusunan dan kemudian mengulanginya menggunakan fungsi peta.

Untuk menunjukkan, buat folder baharu bernama lib dan tambahkan fail baharu 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 adalah daripada perpustakaan UI Bahan, jadi pasangkannya dahulu menggunakan arahan ini:

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

Seterusnya, buat folder bernama Komponen dan tambah komponen baharu yang dipanggil Sidenav.js .

Dalam fail ini, import navData daripada ../lib dan buat rangka untuk Sidenav fungsi:

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

Untuk membuat pautan, ubah suai elemen div dalam komponen ini kepada 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 mencipta pautan navigasi yang mengandungi ikon dan teks pautan untuk setiap lelaran dalam fungsi peta.

Elemen butang memegang ikon anak panah kiri daripada perpustakaan UI Bahan. Importnya di bahagian atas komponen menggunakan kod ini.

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

Anda mungkin juga perasan bahawa nama kelas merujuk objek gaya. Ini kerana tutorial ini menggunakan modul CSS. Modul CSS membolehkan anda mencipta gaya skop setempat dalam React . Anda tidak perlu memasang atau mengkonfigurasi apa-apa jika anda menggunakan create-react-app untuk memulakan projek ini.

Dalam folder Komponen, buat fail baharu dipanggil sidenav.module.css dan tambah yang berikut:

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

Menyediakan Penghala Reaksi

Elemen div yang dikembalikan oleh fungsi peta mestilah pautan. Dalam React, anda boleh membuat pautan dan laluan menggunakan react-router-dom.

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

npm install react-router-dom@latest

Perintah ini memasang versi terkini react-router-dom.

Dalam Index.js, balut komponen Apl dengan Penghala.

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

Seterusnya, dalam App.js, tambahkan laluan 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 suai App.css dengan gaya ini.

pengawal xbox satu dimatikan serta-merta

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

Setiap laluan mengembalikan halaman berbeza bergantung pada URL yang dihantar ke alat peraga laluan . Buat folder baharu bernama Halaman dan tambah empat komponen — halaman Laman Utama, Teroka, Statistik dan Tetapan. Berikut adalah contoh:

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

Jika anda melawati laluan /home, anda seharusnya melihat 'Home'.

Pautan dalam bar sisi harus menuju ke halaman yang sepadan apabila anda mengkliknya. Dalam Sidenav.js, ubah suai fungsi peta untuk menggunakan komponen NavLink daripada react-router-dom dan bukannya 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> 
})}

Ingat untuk mengimport NavLink di bahagian atas fail.

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

NavLink menerima laluan URL untuk pautan melalui to prop.

Sehingga tahap ini, bar navigasi dibuka. Untuk menjadikannya boleh dilipat, anda boleh menogol lebarnya dengan menukar kelas CSS apabila pengguna mengklik butang anak panah. Anda kemudian boleh menukar kelas CSS sekali lagi untuk membukanya.

Untuk mencapai fungsi togol ini, anda perlu tahu bila bar sisi dibuka dan ditutup.

Untuk ini, gunakan cangkuk useState. ini React hook membolehkan anda menambah dan menjejaki keadaan dalam komponen berfungsi.

Dalam sideNav.js, cipta cangkuk untuk keadaan terbuka.

const [open, setopen] = useState(true)

Mulakan keadaan terbuka kepada benar, jadi bar sisi akan sentiasa terbuka apabila anda memulakan aplikasi.

Seterusnya, buat fungsi yang akan menogol keadaan ini.

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

Anda kini boleh menggunakan nilai terbuka untuk membuat kelas CSS dinamik 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 keadaan terbuka. Sebagai contoh, jika open adalah benar, elemen div luar akan mempunyai nama kelas sidenav. Jika tidak, kelas akan menjadi sidenavd.

Ini adalah sama untuk ikon, yang bertukar kepada ikon anak panah kanan apabila anda menutup bar sisi.

Ingat untuk mengimportnya.

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

Komponen bar sisi kini boleh dilipat.

Dapatkan kod lengkap daripada ini repositori GitHub dan cuba sendiri.

Komponen Bertindak Penggayaan

React menjadikannya mudah untuk membina komponen navigasi boleh lipat. Anda boleh menggunakan beberapa alatan yang disediakan oleh React seperti react-router-dom untuk mengendalikan penghalaan dan cangkuk untuk menjejaki keadaan runtuh.

cara memilih akaun gmail lalai

Anda juga boleh menggunakan modul CSS untuk menggayakan komponen, walaupun anda tidak perlu melakukannya. Gunakannya untuk mencipta kelas berskop tempatan yang unik dan anda boleh goncangkan daripada fail berkas jika ia tidak digunakan.

Cara Membuat Menu Navigasi Boleh Dilipat Menggunakan React

Mencipta Aplikasi React

Mencipta Komponen Navigasi

Menyediakan Penghala Reaksi

Mengubah suai Pautan Navigasi

Komponen Bertindak Penggayaan