-sidebar mobile

accounting-ng-nuttakit/src/app/component/sidebar/sidebar.component.css

@@ -1,22 +1,27 @@
-/* .sidebar {
-  width: 220px;
-  background: #222;
-  color: white;
+.sidebar-container {
+  width: 250px;
+  transition: width 0.3s ease-in-out;
+  flex-shrink: 0; /* Prevent the sidebar from shrinking in the flex container */
+}
+
+.sidebar-container.is-collapsed {
+  width: 70px;
+}
+
+.sidebar-container.is-mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
   height: 100vh;
-  padding: 20px;
-} */
-/* .sidebar ul {
-  list-style: none;
-  padding: 0;
+  width: 250px; /* Width when shown on mobile */
+  z-index: 40;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
 }
-.sidebar li {
-  margin: 10px 0;
-  cursor: pointer;
-  transition: 0.2s;
+
+.sidebar-container.is-mobile.is-open {
+  transform: translateX(0);
 }
-.sidebar li:hover {
-  color: #00bcd4;
-} */
 
 @keyframes spin-slow {
   0% { transform: rotate(0deg); }
@@ -25,15 +30,3 @@
 .animate-spin-slow {
   animation: spin-slow 8s linear infinite;
 }
-
-@media (max-width: 768px) {
-  .sidebar {
-    position: absolute;
-    z-index: 50;
-    transform: translateX(-100%);
-  }
-
-  .sidebar.expanded {
-    transform: translateX(0);
-  }
-}