sidebar modified with small animations

web/src/components/Sidebar/SidebarButtonElement.tsx

@@ -13,12 +13,12 @@ function SidebarButtonElement({
   icon,
 }: SidebarButtonElementProps) {
   return (
-    <ListItemButton
+    <div
       onClick={onClick}
-      className="!flex !justify-start !p-3 !gap-3">
+      className="flex gap-2 mx-2 px-2 py-1 items-center max-w-full rounded text-gray-500 hover:bg-gray-50 cursor-pointer">
       <div className="text-gray-500">{icon}</div>
       <p className="text-sm flex-1">{label}</p>
-    </ListItemButton>
+    </div>
   );
 }
 

web/src/components/Sidebar/SidebarElement.tsx

@@ -1,6 +1,6 @@
-import { ListItemIcon } from "@mui/material";
 import { ReactNode } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
+import { motion } from "framer-motion";
 
 type SidebarElementProps = {
   to: string;
@@ -9,14 +9,29 @@ type SidebarElementProps = {
 };
 
 function SidebarElement({ to, label, icon }: SidebarElementProps) {
-  const activeStyle = ({ isActive }) => (isActive ? "activeNavLink" : "");
+  const location = useLocation();
+  const isActive = location.pathname === to;
 
   return (
-    <NavLink className={activeStyle} to={to}>
-      <div className={`flex gap-3 items-center`}>
-        <div className="text-gray-500">{icon}</div>
+    <NavLink className="relative flex px-2 items-center" to={to}>
+      <div
+        className={`flex gap-2 py-1 pl-2 items-center w-full rounded ${
+          isActive
+            ? "bg-violet-50 text-violet-500"
+            : "text-gray-500 hover:bg-gray-50"
+        }`}>
+        <div className="">{icon}</div>
         <p className="text-sm">{label}</p>
       </div>
+      {isActive && (
+        <motion.div
+          layoutId="sidebar-indicator"
+          className="absolute left-2 h-[70%] w-1 bg-violet-500 rounded"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3 }}
+        />
+      )}
     </NavLink>
   );
 }

web/src/components/Sidebar/index.tsx

@@ -25,14 +25,14 @@ function Sidebar() {
       <div className="flex w-full flex-col gap-0">
         <HeadElement />
 
-        <List sx={{ padding: 0 }}>
+        <div className="flex flex-col gap-2 my-1">
           {elements.map((element, index) => (
             <SidebarElement key={index} {...element} />
           ))}
-        </List>
+        </div>
       </div>
 
-      <List className="w-full">
+      <div className="flex flex-col gap-2 w-full">
         <SidebarButtonElement
           label="Join Slack Community"
           icon={
@@ -51,10 +51,10 @@ function Sidebar() {
         />
         <SidebarButtonElement
           label="Logout"
-          icon={<LogoutRounded />}
+          icon={<LogoutRounded fontSize="small" />}
           onClick={signOut}
         />
-      </List>
+      </div>
 
       <SlackConnectOverlay isOpen={isActionOpen} toggleOverlay={toggle} />
     </div>

web/src/index.css

@@ -169,13 +169,13 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-.sidebar a {
+/* .sidebar a {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   transition: all 0.2s;
-}
+} */
 
-.sidebar a:hover {
+/* .sidebar a:hover {
   background-color: #f3f3f3;
-}
+} */