progress

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -12,6 +12,7 @@ import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import LogoIcon from "../icons/logo";
+import ArrowDownIcon from "../icons/arrowDown";
 
 const Sidebar = () => {
   const router = useRouter();
@@ -39,7 +40,6 @@ const Sidebar = () => {
   };
 
   const pathname = usePathname();
-  console.log(pathname);
   return (
     <div
       className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
@@ -47,9 +47,17 @@ const Sidebar = () => {
       <div className={styles.topContainer}>
         {/* Logo Container */}
         <div className={styles.logoContainer}>
+          <div
+            className={styles.toggleContainer}
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <ArrowDownIcon
+              className={`${styles.arrowIcon} ${isCollapsed ? styles.notToggle : styles.toggle}`}
+            />
+          </div>
           <div>
             <div className={styles.logoIconContainer}>
-              <LogoIcon onClick={() => setIsCollapsed(!isCollapsed)} />
+              <LogoIcon />
             </div>
             <div
               className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}

frontend/src/app/components/sidebar/styles.module.css

@@ -18,6 +18,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
+
   align-self: stretch;
 }
 .logoContainer {
@@ -27,8 +28,10 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+  position: relative;
   gap: 12px;
   align-self: stretch;
+
   border-bottom: 1px solid #2c2d3d;
   border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
@@ -165,6 +168,38 @@
 .blockDisplay {
   display: block;
 }
+
+.logoContainer .toggleContainer {
+  position: absolute;
+  right: -15px;
+  bottom: 50%;
+  transform: translateY(50%);
+  background-color: #191a24;
+  padding: 5px;
+  border-radius: 50%;
+  border: 1px solid #292b43;
+  transition: all 150ms;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrowIcon {
+  transition: all 400ms;
+}
+.arrowIcon path {
+  stroke: rgba(255, 255, 255, 0.858);
+}
+.toggle {
+  transform: rotate(90deg) scale(0.8);
+}
+.notToggle {
+  transform: rotate(-90deg) scale(0.8);
+}
+
+.toggleContainer:hover {
+  background-color: #333652;
+}
 @media (max-width: 1050px) {
   .mainContainer {
     width: 80px;
@@ -172,6 +207,9 @@
   .label {
     display: none;
   }
+  .logoContainer .toggleContainer {
+    display: none;
+  }
 }
 @media (max-width: 768px) {
   .mainContainer {