nav+ departments+ home

src/App.jsx

@@ -1,4 +1,4 @@
-// App.jsx
+// src/App.jsx
 import React from "react";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AnimatePresence, LayoutGroup } from "framer-motion";
@@ -11,42 +11,40 @@ import Home from "./Components/Sections/Home/Home";
 import Services from "./Components/Sections/Services/Services";
 import About from "./Components/Sections/About/About";
 import Departments from "./Components/Sections/Departments/Departments";
-import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail"; // صفحة التفاصيل (مقدّمة سابقاً)
+import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
 import Contact from "./Components/Sections/Contact/Contact";
-// import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
+import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
 
-
-
+/* MainPage — الصفحة التي تحتوي على الأقسام المجمعة (لا تتضمن Navbar هنا) */
 const MainPage = () => {
   return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
-        <div className="flex flex-col min-h-screen">
-          <Navbar />
-          <main className="flex-grow">
-            <Home />
-
-            <Services />
-            <About />
-            <Departments />
-            <Contact />
-          </main>
-          <Footer />
-        </div>
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+      <div className="flex flex-col min-h-screen">
+        <main className="flex-grow">
+          <Home />
+          <Services />
+          <About />
+          <Departments />
+          <Contact />
+        </main>
+        <Footer />
       </div>
+    </div>
   );
 };
 
-// Router view (نستخدم useLocation مع AnimatePresence لعمل انتقالات سلسة بين المسارات)
+/* Router view يستخدم useLocation مع AnimatePresence */
 function RouterView() {
   const location = useLocation();
 
   return (
     <LayoutGroup>
-      <AnimatePresence mode="wait">
+      <AnimatePresence mode="wait" initial={false}>
         <Routes location={location} key={location.pathname}>
           <Route path="/" element={<MainPage />} />
-          <Route path="/departments/1" element={<DepartmentDetail />} />
+          <Route path="/departments/:id" element={<DepartmentDetail />} />
+          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
           {/* أضف مسارات إضافية هنا إذا احتجت */}
         </Routes>
       </AnimatePresence>
@@ -54,10 +52,44 @@ function RouterView() {
   );
 }
 
+/* Layout: يقرر متى يُعرض الـ Navbar بناءً على الـ pathname */
+function Layout() {
+  const location = useLocation();
+
+  // هنا ضع المسارات أو الأنماط التي تريد إخفاء الـ Navbar فيها
+  const excludedExactPaths = [
+    "/department-detail2",
+    // أضف مسارات أخرى تريد إخفاء navbar فيها بنفس الشكل
+  ];
+
+  // أمثلة على أنماط: إخفاء لكل ما يبدأ بـ /departments/
+  const excludedPrefixes = ["/departments/"];
+
+  const isExcludedExact = excludedExactPaths.includes(location.pathname);
+  const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
+
+  const hideNavbar = isExcludedExact || isExcludedPrefix;
+
+  // ارتفاع الـ Navbar المستخدم كـ padding-top عندما يكون ظاهرًا (يتوافق مع height في Navbar.jsx)
+  const navbarHeight = hideNavbar ? 0 : 56;
+
+  return (
+    <>
+      {/* Navbar يظهر فقط عندما hideNavbar === false */}
+      {!hideNavbar && <Navbar />}
+
+      {/* نضع الـ RouterView داخل حاوية لها padding-top مساوٍ لارتفاع الـ navbar عند ظهوره */}
+      <div style={{ paddingTop: navbarHeight }}>
+        <RouterView />
+      </div>
+    </>
+  );
+}
+
 const App = () => {
   return (
     <BrowserRouter>
-      <RouterView />
+      <Layout />
     </BrowserRouter>
   );
 };