Routing

package.json

@@ -15,7 +15,7 @@
     "axios": "^1.5.1",
     "dotenv": "^16.3.1",
     "framer-motion": "^10.16.4",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0"
   },
@@ -30,7 +30,7 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.31",
     "prettier": "3.0.3",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.24.1",
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5"
   }

src/App.jsx

@@ -0,0 +1,29 @@
+// import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Home from "./Components/Home.jsx"
+import Discover from './Components/sidebars/discover.jsx'
+import Aroundyou from './Components/sidebars/aroundyou.jsx'
+import TopCharts from './Components/sidebars/topCharts.jsx'
+import TopArtists from './Components/sidebars/topArtists.jsx'
+import Navbar from './Components/Navbar.jsx'
+import Player from './Components/Player.jsx'
+import SongSearch from './Components/SongSearch.jsx'
+
+const App = () => {
+  return (
+    <div>
+    <Navbar/>
+       <Routes>
+        <Route path="/" element={<Home/>} />
+        <Route path='/discover' element={<Discover/>}/>
+        <Route path='/Aroundyou' element={<Aroundyou/>}/>
+        <Route path='/Top' element={<TopArtists/>}/>
+        <Route path='/Topchart' element={<TopCharts/>}/>
+        <Route path='/player' element={<Player/>} />
+        <Route path='/search' element={<SongSearch/>} />
+       </Routes>
+    </div>
+  )
+}
+
+export default App

src/Components/Home.jsx

@@ -3,7 +3,6 @@ import { motion, useAnimation } from "framer-motion";
 import Background from "/bag.jpg";
 import PageThree from "./PageThree";
 import Features from "./Features";
-import Navbar from "./Navbar";
 import Footer from "./Footer";
 import { Link } from "react-router-dom";
 
@@ -48,7 +47,7 @@ export default function Home() {
 
   return (
     <>
-    <Navbar />
+
       <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
         <img
           src={Background}

src/Components/Navbar.jsx

@@ -1,11 +1,13 @@
 import { useState } from 'react'
-import { FaHome } from "react-icons/fa";
-import { GrGallery } from "react-icons/gr";
-import { BsFillPeopleFill } from "react-icons/bs";
-import { FaHashtag } from "react-icons/fa";
+// import { FaHome } from "react-icons/fa";
+// import { GrGallery } from "react-icons/gr";
+// import { BsFillPeopleFill } from "react-icons/bs";
+// import { FaHashtag } from "react-icons/fa";
 import Hamburger from "/hamburger.png";
 
+// import { Link } from 'react-router-dom';
 
+import Sidebar from './Sidebar';
 export default function Navbar() {
     const [menuOpen, setMenuOpen] = useState(false);
 
@@ -74,25 +76,8 @@ export default function Navbar() {
                     </button>
                 </div>
 
-                <ul className="p-4 font-serif text-xl mb-4 text-BLACK bg-[#352f44] text-[#f3ead3]">
-                    <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
-                        <FaHome className="mr-2" />
-                        Discover
-                    </li>
-                    <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
-                        <GrGallery className="mr-2" />
-                        Around You
-                    </li>
-                    <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
-                        <BsFillPeopleFill className="mr-2" />
-                        Top Artists
-                    </li>
-                    <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
-                        {" "}
-                        <FaHashtag className="mr-2 " />
-                        Top Charts
-                    </li>
-                </ul>
+        <Sidebar/>
+
             </div>
         </>
     )

src/Components/Player.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import API_Controller from "../../utils/API_Controller";
 
-import Navbar from "./Navbar";
+
 import Footer from "./Footer";
 import "../App.css";
 import Background from "/bag.jpg";
@@ -56,11 +56,12 @@ export default function Player() {
 
   return (
     <>
+    <h1>PLayer</h1>
       <div
         className="w-full bg-cover bg-center h-screen"
         style={{ backgroundImage: `url(${Background})` }}
       >
-        <Navbar />
+        {/* <Navbar /> */}
 
         {
           songData && token ? (

src/Components/Sidebar.jsx

@@ -0,0 +1,39 @@
+// import { useState } from 'react'
+import { FaHome } from "react-icons/fa";
+import { GrGallery } from "react-icons/gr";
+import { BsFillPeopleFill } from "react-icons/bs";
+import { FaHashtag } from "react-icons/fa";
+// import Hamburger from "/hamburger.png";
+import { Link } from 'react-router-dom';
+
+const Sidebar = () => {
+  return (
+    <div>
+             <ul className="p-4 font-serif text-xl mb-4 text-BLACK bg-[#352f44] text-[#f3ead3]">
+               <Link to="/discover">   <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
+                        <FaHome className="mr-2" />
+                        Discover
+                    </li>
+                    </Link> 
+                 <Link to="/Aroundyou" ><li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
+                        <GrGallery className="mr-2" />
+                        Around You
+                    </li>
+                    </Link>  
+                <Link to="/Top"> <li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
+                        <BsFillPeopleFill className="mr-2" />
+                        Top Artists
+                    </li></Link>   
+                 <Link to="/Topcharts" ><li className="py-2 pl-4 hover:bg-[#5c5470] cursor-pointer flex items-center">
+                        {" "}
+                        <FaHashtag className="mr-2 " />
+                        Top Charts
+                    </li>
+                    </Link>  
+                </ul>
+    </div>
+  )
+}
+
+export default Sidebar
+

src/Components/SongSearch.jsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 // assets
 import Background from "/bag.jpg";
 import Search from '../assets/search.svg';
-import Navbar from "./Navbar";
+
 import Footer from "./Footer";
 import "../App.css";
 
@@ -28,6 +28,7 @@ export default function SongSearch() {
     }, [])
 
     useEffect(() => {
+        console.log("thissssssss");
         getTracks();
     }, [])
 
@@ -53,7 +54,7 @@ export default function SongSearch() {
                 className="w-full bg-cover bg-center"
                 style={{ backgroundImage: `url(${Background})` }}
             >
-                <Navbar />
+
                 <div className="flex flex-col items-center justify-center min-h-screen w-full">
                     <div className="flex mt-16 justify-between bg-white rounded-full w-10/12 lg:w-2/3">
                         <input

src/Components/sidebars/aroundYou.jsx

@@ -0,0 +1,11 @@
+// import React from 'react'
+
+const aroundyou = () => {
+  return (
+    <div>
+      <h1>This is around you page</h1>
+    </div>
+  )
+}
+
+export default aroundyou

src/Components/sidebars/discover.jsx

@@ -0,0 +1,11 @@
+// import React from 'react'
+
+const discover = () => {
+  return (
+    <div>
+      <h1> This is Discover Page </h1>
+    </div>
+  )
+}
+
+export default discover

src/Components/sidebars/topArtists.jsx

@@ -0,0 +1,11 @@
+// import React from 'react'
+
+const topArtists = () => {
+  return (
+    <div>
+      <h1>This is Top Artists page</h1>
+    </div>
+  )
+}
+
+export default topArtists

src/Components/sidebars/topCharts.jsx

@@ -0,0 +1,11 @@
+// import React from 'react'
+
+const topCharts = () => {
+  return (
+    <div>
+      <h1>This is Top Charts Page</h1>
+    </div>
+  )
+}
+
+export default topCharts