From 62bb558706ed35fe3c91f1993b97870c200389cc Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Mon, 16 Mar 2026 15:25:01 +0800
Subject: [PATCH] progress

---
 .../src/app/components/sidebar/Sidebar.jsx    | 12 +++++-
 .../app/components/sidebar/styles.module.css  | 38 +++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index b8d70a6..b10e182 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/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}`}
diff --git a/frontend/src/app/components/sidebar/styles.module.css b/frontend/src/app/components/sidebar/styles.module.css
index 406660e..cee0f55 100644
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/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 {