updated sidebar and added accordion wrapper (#115)

* updated sidebar and added accordion wrapper

* updated mobilesidebar css

react/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.25",
+  "version": "0.0.2-beta.26",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",

react/css/src/digitv2/components/accordionV2.scss

@@ -102,4 +102,71 @@
     &.cardBg{
       background-color: theme(digitv2.lightTheme.paper-secondary);
     }
+  }
+
+  @keyframes rotateOpen {
+    from {
+      transform: rotate(-180deg);
+    }
+    to {
+      transform: rotate(-90deg);
+    }
+  }
+
+  @keyframes rotateClose {
+    from {
+      transform: rotate(-90deg);
+    }
+    to {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .digit-accordion-toggle.animate-open svg {
+    animation: rotateOpen 0.5s ease forwards;
+  }
+
+  .digit-accordion-toggle.animate-close svg {
+    animation: rotateClose 0.5s ease forwards;
+  }
+
+
+/* .digit-accordion-content {
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+    height: 0; 
+    overflow: hidden;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+  }
+  
+  .digit-accordion-content.open {
+    transform: scaleY(1);
+    opacity: 1;
+    height: auto; 
+    overflow: visible;
+  }*/
+
+  .digit-accordion-wrapper{
+    display: flex;
+    flex-direction: column;
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      gap: theme(digitv2.spacers.spacer6);
+    }
+  }
+
+  .digit-accordion-divider{
+    width: 100%;
   }