React Kullanarak Daraltılabilir Gezinme Menüsü Nasıl Oluşturulur

React Kullanarak Daraltılabilir Gezinme Menüsü Nasıl Oluşturulur

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





Materyal UI simgelerini 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şturacaktır.





Bir React Uygulaması Oluşturma

zaten varsa tepki projesi , sonraki adıma geçmekten çekinmeyin.





GÜNÜN YAPILAN VİDEOSU

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

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ı dosyalar içeren bir tepki-sidenav klasörü oluşturacaktır. Bu klasörü biraz temizlemek için src klasörüne gidin ve App.js'nin içeriğini şununla değiştirin:

import './App.css'; 

function App() {
return (
<div className="App"></div>
);
}

export default App;

Navigasyon 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. Üstteki çift ok simgesini kullanarak gezinme bileşenini daraltabilirsiniz:

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

Daraltılmış olmayan görünümü oluşturarak başlayın. Ok simgesinin yanı sıra kenar çubuğu bir öğe listesi içerir. Bu öğelerin her birinin bir simgesi ve bir metni vardır. Her biri için tekrar tekrar bir öğe oluşturmak yerine, her öğe için verileri bir dizide saklayabilir ve ardından bir harita işlevini kullanarak üzerinde yineleyebilirsiniz.





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ığındandır, bu nedenle önce bu komutu kullanarak onu kurun:

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

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

Bu dosyada, navData'yı ../lib'den içe aktarın ve bunun için iskeleti oluşturun. yan navigasyon işlev:

// 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ı Arayüzü kitaplığındaki sol ok simgesini tutar. Bu kodu kullanarak bileşenin en üstünde içe aktarın.

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

Ayrıca, sınıf adlarının bir stil nesnesine atıfta bulunduğunu 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 yüklemeniz veya yapılandırmanız gerekmez.

Bileşenler klasöründe, adlı yeni bir dosya oluşturun. sidenav.module.css 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;
}

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

React Router'ı Kurma

Harita işlevi tarafından döndürülen div öğeleri, bağlantılar olmalıdır. React'te, tepki-yönlendirici-dom kullanarak bağlantılar ve yollar oluşturabilirsiniz.

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

evde 3d yazıcı ile neler yapılabilir
npm install react-router-dom@latest 

Bu komut, en son tepki-yönlendirici-dom 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 stiller ile değiştirin.

body { 
margin: 0;
padding: 0;
}

.App {
display: flex;
}

main {
padding: 10px;
}

Her rota, kendisine iletilen URL'ye bağlı olarak farklı bir sayfa döndürür. yol sahne . Sayfalar adında yeni bir klasör oluşturun ve Ana Sayfa, Keşfet, İstatistikler ve Ayarlar sayfası olmak üzere dört bileşen ekleyin. İşte bir örnek:

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

/home yolunu ziyaret ederseniz, 'Ev' görmelisiniz.

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

Dosyanın üst kısmındaki NavLink'i içe aktarmayı unutmayın.

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

NavLink, bağlantı için prop aracılığıyla URL yolunu alır.

Bu noktaya kadar gezinti çubuğu açıktır. Daraltılabilir hale getirmek için, bir kullanıcı ok düğmesine 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 Tepki kancası işlevsel bir bileşendeki durumu eklemenize ve izlemenize olanak tanır.

sideNav.js'de açık durum için kanca 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.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>

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

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

İçe aktarmayı unutmayın.

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

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

Tam kodu buradan alın GitHub deposu ve kendiniz deneyin.

Şekillendirme Tepki Bileşenleri

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

Bileşenlere stil vermek için CSS modüllerini de kullanabilirsiniz, ancak buna mecbur değilsiniz. Benzersiz olan ve kullanımda değillerse paket dosyalarından sallayabileceğiniz yerel olarak kapsamlı sınıflar oluşturmak için bunları kullanın.