further smoothen sidebar toggling

src/assets/css/global.css

@@ -25,11 +25,15 @@ hr,
   color: #ffffff48;
 }
 
+.hidden {
+  display: none;
+
+}
+
 .l-container {
   display: grid;
-  grid-template-columns: 250px 4fr 2fr;
+  grid-template-columns: min-content 4fr 1fr;
   grid-template-rows: 78px 1fr 1fr;
-  gap: 4px;
   grid-auto-flow: row;
   grid-template-areas:
     "l-sidebar nav nav"
@@ -39,21 +43,27 @@ hr,
   height: 100vh;
 }
 
+.collapsed .l-sidebar{
+  width: 70px;
+  transition-timing-function: ease-in-out;
+  transition-duration: .3s;
+  transition-property: width;
+}
+
 .l-sidebar {
+  width: 250px;
   grid-area: l-sidebar;
   padding-top: 0.5em;
   background-color: #131313b2;
+  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition-duration: .3s;
+  transition-property: width;
 }
 
-@media (max-width: 1000px) {
-  .l-sidebar {
-    width: 70px;
-  }
-}
 
 .nav {
   grid-area: nav;
-  border-radius: 5px;
+  border: 1px solid;
 }
 
 .content {

src/assets/icons/menu.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.6875 5.625H25.3125V7.5H4.6875V5.625Z" fill="#FFE5E5"/>
+<path d="M4.6875 14.0625H25.3125V15.9375H4.6875V14.0625Z" fill="#FFE5E5"/>
+<path d="M4.6875 22.5H25.3125V24.375H4.6875V22.5Z" fill="#FFE5E5"/>
+</svg>