كيف يمكن جعل شريط التنقل ثابت في رياكت

يجب وضع مكون شريط التنقل خارج نظام التوجيه Routes حتى لا يعاد تحميله عند تغير المسارات،و عادة يتم ذلك عن طريق تضمينه داخل مكون رئيسي مثل App.js، ثم وضع الـ <Routes> تحته أو بجانبه داخل نفس المكون بهذا الشكل:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

هنا يتم عرض <Navbar /> في جميع الصفحات لأن موقعه خارج <Routes>، وإذا أردت أن يكون دائما في أعلى الشاشة أثناء التمرير، فيمكنك استخدام CSS لإعطائه خصائص معينة.

تأكد من وضع شريط التنقل خارج مكون <Routes> في هيكل التطبيق الرئيسي، بحيث لا يتأثر بتغيير المسارات، مثلا يمكنك وضع شريط التنقل داخل مكون Layout ثابت يستخدم كقالب لجميع الصفحات، أو وضعه مباشرة في ملف App.js مع تغليفه حول <Routes>، و أيضا استخدم خاصية CSS مثل position: fixed أو position: sticky لضمان بقاء الشريط في أعلى الصفحة حتى عند التمرير، كما يجب أن تتأكد من إضافة padding أو margin مناسب للمحتوى الرئيسي لمنع تداخل الشريط مع المحتوى، حيث سيظل شريط التنقل مرئيا ومتاحا للمستخدم بغض النظر عن الصفحة الحالية في التطبيق.

من حيث السهولة والبساطة، فستضع شريط التنقل مباشرة Navbar.js في المكون الرئيسي App.js لكن وضع خارج تعريف المسارات <Routes>.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      {/* ضع شريط التنقل هنا، خارج الـ Routes */}
      <Navbar />

      <main className="main-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;

وفي ملف components/Navbar.js استخدم مكون <Link> من react-router-dom للتنقل لتجنب إعادة تحميل الصفحة بالكامل.

import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <Link to="/">شعار الموقع</Link>
      </div>
      <ul className="navbar-links">
        <li>
          <Link to="/">الرئيسية</Link>
        </li>
        <li>
          <Link to="/about">عنّا</Link>
        </li>
        <li>
          <Link to="/contact">اتصل بنا</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

ثم إضافة التنسيقات التالية في ملف Navbar.css وما نريده هو خاصية position: fixed لجعل الشريط ثابت، وz-index: 1000 للتأكد من أنه يظهر  فوق كل المحتوى الآخر في الصفحة:

.navbar {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar-logo a {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  margin-left: 20px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
}

.navbar-links a:hover {
  color: #ddd;
}

وسيظهر مشكلة عند استخدام position: fixed، وهي خروج شريط التنقل من تدفق الصفحة الطبيعي، لأنّ المحتوى الآخر مثل Homeأو  About سيبدأ من أعلى الشاشة، وسيكون مخفيًا خلف شريط التنقل.

لذا ستحتاج إلى إضافة هامش علوي margin-top للحاوية الرئيسية للمحتوى.

.main-content {

  margin-top: 80px; 
  padding: 20px;
}

ولاحظ الهامش العلوي يجب أن يساوي ارتفاع شريط التنقل، فلو ارتفاع الشريط 60px، فاجعل الهامش 60px.