sidebar updates

src/App.tsx

@@ -30,8 +30,8 @@ function App() {
             {/* <Route path="/editor" element={<CodeEditor setShowSidebar={setShowSidebar} />}></Route> */}
             <Route path="/code" element={<Code setShowSidebar={setShowSidebar} />}></Route>
             <Route path="/deploy" element={<Deploy setShowSidebar={setShowSidebar} />}></Route>
-            <Route path="/personal-cloud" element={<PersonalCloud setShowSidebar={setShowSidebar} />}></Route>
-            <Route path="/global-cloud" element={<GlobalCloud setShowSidebar={setShowSidebar} />}></Route>
+            <Route path="/browse" element={<GlobalCloud setShowSidebar={setShowSidebar} />}></Route>
+            {/* <Route path="/global-cloud" element={<GlobalCloud setShowSidebar={setShowSidebar} />}></Route> */}
             <Route path="/test" element={<Test setShowSidebar={setShowSidebar} />}></Route>
           </Routes>
         </div>

src/assets/index.ts

@@ -1,11 +1,13 @@
 import code from "./code.svg"
-import deploy from "./deploy.svg"
-import globalCloud from "./global-cloud.svg"
+import test from "./test.svg"
 import personalCloud from "./personal-cloud.svg"
 import dropDown from "./drop-down.svg";
 import nextArrow from "./next-arrow.svg";
 import dropRight from "./drop-right.svg";
 import tutorial from "./tutorial.png";
 import home from "./home.svg";
 import close from "./close.svg";
-export { code, deploy, globalCloud, personalCloud, dropDown,dropRight, nextArrow, tutorial, home, close};
+import horizontal from "./horizontal-scroll.svg";
+import deploy from "./deploy.svg"
+import browse from "./browse.svg";
+export { code, test, browse, personalCloud, dropDown, dropRight, nextArrow, tutorial, home, close, horizontal, deploy};

src/components/Sidebar.tsx

@@ -1,28 +1,33 @@
 import { useState } from 'react'
-import { deploy, globalCloud, personalCloud, code, home } from '../assets'
+import { test, deploy, code, home, browse } from '../assets'
 import { Link } from 'react-router-dom'
 
 // links for sidebar naviagtion
 export const navlinks = [
     {
+        iconName:"Home",
         name: home,
         link: "/"
     },
     {
+        iconName:"My Projects",
         name: code,
         link: "/code"
     },
     {
+        iconName:"Deploy",
         name: deploy,
         link: "/deploy"
     },
     {
-        name: personalCloud,
-        link: "/personal-cloud"
+        iconName:"Test",
+        name: test,
+        link: "/test"
     },
     {
-        name: globalCloud,
-        link: "/global-cloud"
+        iconName:"Browse",
+        name: browse,
+        link: "/browse"
     }
 ]
 const Sidebar = () => {
@@ -31,12 +36,15 @@ const Sidebar = () => {
         setActive(name);
     }
   return (
-    <div className='pt-10'>
-        <div className='flex px-2 flex-col gap-5 justify-center items-center'>
+    <div className='pt-2'>
+        <div className='flex px-2 flex-col items-start w-full gap-5 min-w-[200px]'>
             {navlinks.map((link)=>{
-                return (<Link to={link.link}>
-                    <div onClick={()=>handleSelect(link.name)} className={`flex flex-col justify-center rounded-[5px] items-center ${active===link.name&&'bg-[#24312F]'} hover:bg-[#24312F] hover:rounded duration-300 p-1`}>
-                    <img src={link.name} alt="deploy" className='w-12 max-w-xs h-12'/>
+                return (<Link to={link.link} className='w-full'>
+                    <div onClick={()=>handleSelect(link.name)} className={`flex flex-col justify-start rounded-[5px] items-start w-full ${active===link.name&&'bg-[#24312F]'} hover:bg-[#24312F] hover:rounded duration-300 p-1`}>
+                    <div className='flex items-center justify-start'>
+                        <img src={link.name} alt="deploy" className='w-12 max-w-xs h-12'/>
+                        <p className=' text-sm '>{link.iconName}</p>
+                    </div>
                     </div>          
                 </Link>);
             })}

src/components/Templates.tsx

@@ -1,4 +1,4 @@
-import { nextArrow } from "../assets"
+import { nextArrow, horizontal } from "../assets"
 
 const TemplateTab=({name,description}:{name:string,description:string})=>{
     return (
@@ -53,7 +53,7 @@ const Templates = () => {
         }
     ]
   return (
-    <div className="overflow-x-auto pb-10 p-2 flex gap-8 max-w-[90%]">
+    <div className="overflow-x-auto  pb-10 p-2 flex gap-8 max-w-[90%]">
         {
             templates.map((template)=>{
                 return <TemplateTab
@@ -62,6 +62,7 @@ const Templates = () => {
                     description={template.description}/>
             })
         }
+        <img className="absolute mt-16 mr-5 bg-invert w-10 right-0 " src={horizontal} alt="Scroll" />
     </div>
   )
 }

src/pages/Home.tsx

@@ -6,7 +6,7 @@ import { Tour } from "../components/Tour"
 const Home = ({ setShowSidebar }: { setShowSidebar: any }) => {
   setShowSidebar(true)
   return (
-    <div className=" pl-14 pt-9 cursor-pointer">
+    <div className="  pt-9 cursor-pointer">
       <div className="w-full">
       <div className="flex p-2.5 w-fit text-left justify-center items-center gap-1.5 border-t border-white">
       <p>Start with a project template</p>