Bir kenar çubuğu gezinme menüsü genellikle dikey bir bağlantı listesinden oluşur. React-router-dom kullanarak React’te bir dizi bağlantı oluşturabilirsiniz.

Materyal UI simgeleri içeren bağlantılar içeren bir React yan gezinme menüsü oluşturmak için bu adımları izleyin. Bağlantılar, tıkladığınızda farklı sayfalar oluşturur.

React Uygulaması Oluşturma

Halihazırda bir React projeniz varsa , bir sonraki adıma geçmekten çekinmeyin.

React ile hızlı bir şekilde çalışmaya başlamak için create-react-app komutunu kullanabilirsiniz. Sizin için tüm bağımlılıkları ve yapılandırmayı kurar.

React-sidenav adlı bir React projesi oluşturmak için aşağıdaki komutu çalıştırın.

npx create-react-app react-sidenav

Bu, başlamanıza yardımcı olacak bazı dosyalarla birlikte bir tepki-sidenav klasörü oluşturacaktır. Bu klasörü biraz temizlemek için src klasörüne gidin ve App.js içeriğini bununla değiştirin:

import ‘./App.css’;

function App() {

return (

<div className=”App”></div>

);

}

export default App;

Gezinme Bileşenini Oluşturma

Oluşturacağınız navigasyon bileşeni şu şekilde görünecektir:

React gezinme menüsünün daraltılmamış görünümü

Oldukça basit, ancak işiniz bittiğinde ihtiyaçlarınıza göre değiştirebilmelisiniz. Üst kısımdaki çift ok simgesini kullanarak gezinme bileşenini daraltabilirsiniz:

React gezinme menüsünün daraltılmış görünümü

Daraltılmamış görünümü oluşturarak başlayın. Ok simgesinin dışında, kenar çubuğu bir öğe listesi içerir. Bu öğelerin her birinin bir simgesi ve bazı metinleri vardır. Her biri için art arda bir öğe oluşturmak yerine, her bir öğe için verileri bir dizide depolayabilir ve ardından bir harita işlevi kullanarak üzerinde yineleme yapabilirsiniz.

Göstermek için lib adlı yeni bir klasör oluşturun ve navData.js adlı yeni bir dosya ekleyin.

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”

}

]

Yukarıda kullanılan simgeler, Material UI kitaplığından alınmıştır, bu nedenle önce bu komutu kullanarak kurun:

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

npm install @mui/icons-material

Ardından, Components adlı bir klasör oluşturun ve Sidenav.js adlı yeni bir bileşen ekleyin .

Bu dosyada, ../lib’den navData’yı içe aktarın ve Sidenav işlevi için iskeleti oluşturun:

// In Sidenav.js

import { navData } from “../lib/navData”;

export default function Sidenav() {

return (

<div>

</div>

)

}

Bağlantıları oluşturmak için bu bileşendeki div öğesini şu şekilde değiştirin:

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

Bu bileşen, harita işlevindeki her yineleme için simgeyi ve bağlantı metnini içeren bir gezinme bağlantısı oluşturur.

Düğme öğesi, Malzeme Kullanıcı Arabirimi kitaplığından sol ok simgesini tutar. Bu kodu kullanarak bileşenin en üstünde içe aktarın.

import KeyboardDoubleArrowLeftIcon from ‘@mui/icons-material/KeyboardDoubleArrowLeft’;

Sınıf adlarının bir styles nesnesine başvurduğunu da fark etmiş olabilirsiniz. Bunun nedeni, bu öğreticinin CSS modüllerini kullanmasıdır. CSS modülleri, React’te yerel kapsamlı stiller oluşturmanıza olanak tanır . Bu projeyi başlatmak için create-react-app kullandıysanız herhangi bir şey kurmanız veya yapılandırmanız gerekmez.

Bileşenler klasöründe, sidenav.module.css adlı yeni bir dosya oluşturun ve aşağıdakileri ekleyin:

.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: #B2BAC2;

text-decoration: none;

}

.linkText {

padding-left: 16px;

}

.linkTextClosed {

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;

}

React Router’ı Kurma

map işlevi tarafından döndürülen div öğeleri bağlantı olmalıdır. React’te, reaksiyon-yönlendirici-dom’u kullanarak bağlantılar ve rotalar oluşturabilirsiniz.

Terminalde, npm aracılığıyla tepki-yönlendirici-dom kurun.

npm install react-router-dom@latest

Bu komut, tepki-yönlendirici-dom’un en son sürümünü yükler.

Index.js’de, Uygulama bileşenini Yönlendirici ile sarın.

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>

);

Ardından, App.js’de rotalarınızı ekleyin.

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;

App.css dosyasını bu stillerle değiştirin.

body {

margin: 0;

padding: 0;

}

.App {

display: flex;

}

main {

padding: 10px;

}

Her rota, path props’a iletilen URL’ye bağlı olarak farklı bir sayfa döndürür . Sayfalar adında yeni bir klasör oluşturun ve dört bileşen ekleyin — Giriş, Keşfet, İstatistikler ve Ayarlar sayfası. İşte bir örnek:

export default function Home() {

return (

<div>Home</div>

)

}

/home yolunu ziyaret ederseniz, “Ana Sayfa”yı görmelisiniz.

Gezinme Bağlantılarını Değiştirme

Kenar çubuğundaki bağlantılar, tıkladığınızda eşleşen sayfaya yönlendirmelidir. Sidenav.js’de, div öğesi yerine tepki-yönlendirici-dom’dan NavLink bileşenini kullanmak için harita işlevini değiştirin.

{navData.map(item => {

return <NavLink key={item.id} className={styles.sideitem} to={item.link}>

{item.icon}

<span className={styles.linkText}>{item.text}</span>

</NavLink>

})}

NavLink’i dosyanın en üstüne almayı unutmayın.

import { NavLink } from “react-router-dom”;

NavLink, bağlantının URL yolunu to prop aracılığıyla alır.

Bu noktaya kadar gezinti çubuğu açıktır. Katlanabilir hale getirmek için, bir kullanıcı ok düğmesini tıkladığında CSS sınıfını değiştirerek genişliğini değiştirebilirsiniz. Daha sonra açmak için CSS sınıfını tekrar değiştirebilirsiniz.

Bu geçiş işlevini elde etmek için kenar çubuğunun ne zaman açık ve kapalı olduğunu bilmeniz gerekir.

Bunun için useState kancasını kullanın. Bu React kancası , işlevsel bir bileşende durumu eklemenize ve izlemenize olanak tanır.

sideNav.js’de açık durum için kancayı oluşturun.

const [open, setopen] = useState(true)

Açık durumu true olarak başlatın, böylece uygulamayı başlattığınızda kenar çubuğu her zaman açık olacaktır.

Ardından, bu durumu değiştirecek işlevi oluşturun.

const toggleOpen = () => {

setopen(!open)

}

Artık aşağıdaki gibi dinamik CSS sınıfları oluşturmak için açık değeri kullanabilirsiniz:

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

Kullanılan CSS sınıfı adları, açık duruma göre belirlenir. Örneğin, open true ise, dış div öğesinin bir sidenav sınıf adı olacaktır. Aksi takdirde, sınıf sidenavClosed olacaktır.

Bu, kenar çubuğunu kapattığınızda sağ ok simgesine dönüşen simge için aynıdır.

içe aktarmayı unutmayın.

import KeyboardDoubleArrowRightIcon from ‘@mui/icons-material/KeyboardDoubleArrowRight’;

Kenar çubuğu bileşeni artık daraltılabilir.

Bu GitHub deposundan kodun tamamını alın ve kendiniz deneyin.

React Bileşenlerini Şekillendirme

React, katlanabilir bir gezinme bileşeni oluşturmayı kolaylaştırır. Yönlendirmeyi işlemek için tepki-yönlendirici-dom gibi React’in sağladığı bazı araçları ve çökmüş durumu takip etmek için kancaları kullanabilirsiniz.

Zorunlu olmamakla birlikte, bileşenlere stil vermek için CSS modüllerini de kullanabilirsiniz. Bunları, benzersiz olan ve kullanımda değillerse paket dosyalarından çıkarabileceğiniz, yerel kapsamlı sınıflar oluşturmak için kullanın.