feat(ui): add route layout

src/App.js

@@ -1,23 +1,41 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import "./App.css";
+import Navbar from "./components/Navbar";
+import Sidebar from './components/Sidebar';
+import Dashboard from './pages/dashboard/Dashboard';
+import Client from './pages/client/Client';
+import Offers from './pages/offers/Offers';
+import Messages from './pages/messages/Messages';
+import Settings from './pages/settings/Settings';
+import { useState } from 'react';
 
 function App() {
+
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
   return (
-    <div>
-      <h1 className="text-3xl font-inter font-bold underline">Hello world!</h1>
-      <p className="text-3xl font-inter">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nobis
-        nesciunt obcaecati eaque in vero corrupti voluptas ullam quos fuga
-        quaerat nam sapiente animi assumenda ex totam dignissimos maiores
-        praesentium placeat sit, pariatur officia! Eos natus sequi nemo impedit
-        quia magni sed sit minima nobis, a soluta vero, maiores, itaque omnis
-        quis doloremque labore exercitationem quod! Reprehenderit asperiores
-        nesciunt delectus ad perferendis eaque, voluptas quaerat architecto
-        ducimus, laudantium voluptates rerum, nam quo blanditiis vel beatae.
-        Molestias sed quas, debitis autem numquam neque voluptas itaque
-        consequatur eum? Culpa repellendus quisquam voluptatum laborum impedit
-        doloribus porro ullam, libero consequuntur nulla ipsum sint!
-      </p>
-    </div>
+    <Router>
+      <div className="flex font-inter">
+        <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+        <div className="flex flex-col flex-1">
+          <Navbar toggleSidebar={toggleSidebar} />
+          {/* Main content area where the routes will render */}
+          <div className="p-6">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/clients" element={<Client />} />
+              <Route path="/offers" element={<Offers />} />
+              <Route path="/messages" element={<Messages />} />
+              <Route path="/settings" element={<Settings />} />
+            </Routes>
+          </div>
+        </div>
+      </div>
+    </Router>
   );
 }
 

src/components/Navbar.jsx

@@ -1,9 +1,44 @@
-import React from 'react'
+import React from "react";
+import notification_bell from "../assets/svgs/notification-bell.svg";
+import { IoIosArrowDown, IoMdMenu } from "react-icons/io";
 
-function Navbar() {
+function Navbar({ toggleSidebar }) {
   return (
-    <div>Navbar</div>
-  )
+    <nav className="h-16 text-neutral-content mb-12 bg-white border-b">
+      <div className="container mx-auto flex justify-between items-center h-full px-4">
+        <div>
+          <button
+            onClick={toggleSidebar}
+            className="lg:hidden p-2 focus:outline-none"
+          >
+            <IoMdMenu className="h-6 w-6" />
+          </button>
+        </div>
+
+        <div className="flex items-center">
+          <img
+            src={notification_bell}
+            alt="Notifications"
+            className="h-6 w-6 mr-6 cursor-pointer"
+          />
+
+          <div className="flex items-center space-x-2 bg-[#F4F5F5] py-2 px-4 rounded-full cursor-pointer">
+            <span className="bg-[#4CAF50] rounded-full text-white w-8 h-8 flex items-center justify-center">
+              L
+            </span>
+
+            <span className="text-sm font-medium text-[#212224]">
+              Leslie Peters
+            </span>
+
+            <span>
+              <IoIosArrowDown />
+            </span>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
 }
 
-export default Navbar
+export default Navbar;