Merge branch 'main' of github.com:ankushKun/betterIDE

src/assets/index.ts

@@ -13,4 +13,10 @@ import browse from "./browse.svg";
 import search from "./search.svg";
 import stamp from "./stamp.svg";
 import personalProjects from "./code.svg";
-export { code, test, browse, personalCloud, dropDown, dropRight, nextArrow, tutorial, home, close, horizontal, deploy, search, stamp, personalProjects};
+import activehome from "./activeFolders/home.svg";
+import activeTest from "./activeFolders/test.svg";
+import activeCode from "./activeFolders/code.svg";
+import activeDeploy from "./activeFolders/deploy.svg";
+import activeBrowse from "./activeFolders/browse.svg";
+import tutorialFlow from "./tutorialFlow.png";
+export { code, test, browse, personalCloud, dropDown, dropRight, nextArrow, tutorial, home, close, horizontal, deploy, search, stamp, personalProjects, activehome, activeTest, activeCode, activeDeploy, activeBrowse, tutorialFlow};

src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { test, deploy, code, home, browse, personalProjects } from '../assets'
+import { test, deploy, code, home, browse, personalProjects, activehome, activeCode, activeDeploy, activeTest, activeBrowse } from '../assets'
 import { Link } from 'react-router-dom'
 import cloud from '../assets/cloud.svg'
 
@@ -38,39 +38,63 @@ export const navlinks = [
     }
 ]
 const Sidebar = () => {
+    const [hoveredLink,setHoveredLink]= useState("");
     const [active, setActive] = useState("");
     const handleSelect = (name: string) => {
         setActive(name);
     }
-    return (
-        <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} 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>);
-                })}
-
-                {/* <Link to="/deploy">
-                <div className='flex flex-col justify-center items-center hover:bg-[#24312F] hover:rounded duration-300 p-1'>
-                <img src={deploy} alt="test" className='w-12 h-12'/>
-                </div>
-            </Link>
-            <Link to="/personal-cloud">
-            <div className='flex flex-col justify-center items-center hover:bg-[#24312F] hover:rounded duration-300 p-1'>
-            <img src={personalCloud} alt="personal cloud" className='w-12 h-12'/>
-            </div>
-            </Link>
-            <Link to="/global-cloud">
-            <div className='flex flex-col justify-center items-center hover:bg-[#24312F] hover:rounded duration-300 p-1'>
-            <img src={globalCloud} alt="global cloud" className='w-12 h-12'/>
-            </div>
-            </Link> */}
+    const navlinks = [
+    {
+        iconName:"Home",
+        name: home,
+        activeName: activehome,
+        link: "/"
+    },
+    {
+        iconName:"Contracts",
+        name: code,
+        activeName: activeCode,
+        link: "/code"
+    },
+    {
+        iconName:"Deploy",
+        name: deploy,
+        activeName: activeDeploy,
+        link: "/deploy"
+    },
+    {
+        iconName:"Test",
+        name: test,
+        activeName: activeTest,
+        link: "/test"
+    },
+    ,
+    {
+        iconName:"Personal Contracts",
+        name: test,
+        activeName: activeTest,
+        link: "/my-projects"
+    },
+    {
+        iconName:"Browse",
+        name: browse,
+        activeName: activeBrowse,
+        link: "/browse"
+    }
+]
+  return (
+    <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} className='w-full'>
+                    <div onMouseEnter={()=>setHoveredLink(link.iconName)} onClick={()=>handleSelect(link.iconName)} className={`flex group flex-col justify-start rounded-[5px] items-start w-full text-[] ${active===link.iconName&&'bg-[#093E494D]'} hover:bg-[#093E494D] hover:rounded duration-300 p-1 transition-all `}>
+                    <div className='flex items-center justify-start'>
+                        <img src={(active===link.iconName||hoveredLink===link.iconName)?link.activeName:link.name} alt="deploy" className='w-12 max-w-xs h-12 hover:opacity-80'/>
+                        <p className={` text-sm group-hover:text-[#81A5A0] ${active===link.name&&'text-[#81A5A0]'}`}>{link.iconName}</p>
+                    </div>
+                    </div>          
+                </Link>);
+            })}
             </div>
         </div>
     )

src/components/Tour.tsx

@@ -1,9 +1,9 @@
 
-import { tutorial } from "../assets"
+import { tutorialFlow } from "../assets"
 export const Tour = () => {
   return (
-    <div className="pt-2">
-        <img src={tutorial} alt="Tutorial" />
+    <div className="pt-2 w-[1250px]">
+        <img src={tutorialFlow} alt="Tutorial" />
     </div>
   )
 }