progress

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 {