feat(nprogress): add nprogress package

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "nprogress": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2"

src/components/editor/Editor.jsx

@@ -2,7 +2,7 @@ const Editor = () => {
 
     return (<>
         <main className={"w-[calc(100%-50px)] h-[calc(100vh-35px)] bg-[#FFF1E9] rounded-tr-[15px] after:inline-block after:border-0 after:z-[-1] after:w-[30px] after:h-[30px] after:bg-[#ffdecc] after:absolute relative after:top-0 after:right-0"}>
-
+            
         </main>
     </>)
 }

src/components/editor/Logo.jsx

@@ -0,0 +1,12 @@
+import {Link} from "react-router-dom";
+
+const Logo = () => {
+
+    return (<>
+        <Link to={"/"}>
+            <img src="/images/favicon.svg" alt="salam logo" className={"w-[40px] absolute top-[5px] right-[7px]"}/>
+        </Link>
+    </>)
+}
+
+export default Logo;

src/components/nprogress/RouteChangeHandler.jsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+const RouteChangeHandler = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        NProgress.start();
+
+        const timer = setTimeout(() => {
+            NProgress.done();
+        }, 300);
+
+        return () => clearTimeout(timer);
+    }, [location]);
+
+    return null;
+};
+
+export default RouteChangeHandler;

src/layouts/EditorLayout.jsx

@@ -1,11 +1,13 @@
 import Header from "../components/header/Header.jsx";
 import Side from "../components/sidebar/Side.jsx";
 import Editor from "../components/editor/Editor.jsx";
+import Logo from "../components/editor/Logo.jsx";
 
 const EditorLayout = () => {
 
     return (<>
         <Header />
+        <Logo />
         <Side />
         <Editor />
     </>)

src/main.jsx

@@ -1,9 +1,11 @@
 import { createRoot } from 'react-dom/client'
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import EditorLayout from "./layouts/EditorLayout.jsx";
+import RouteChangeHandler from "./components/nprogress/RouteChangeHandler.jsx";
 
 createRoot(document.getElementById('root')).render(<>
     <BrowserRouter>
+        <RouteChangeHandler />
         <Routes>
             <Route path="/" element={ <EditorLayout /> } />
         </Routes>

src/styles/style.css

@@ -3,5 +3,16 @@
 @tailwind utilities;
 
 @layer base {
+    #nprogress .bar {
+        background: #29d;
+    }
 
+    #nprogress .peg {
+        box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+    }
+
+    #nprogress .spinner-icon {
+        border-top-color: #29d;
+        border-left-color: #29d;
+    }
 }