fix: sidebar and some responsive styling (#106)

* sidebar and some responsive styling

* changed breakpoint and fixed toast behind mask

* fix: format the primevue stylesheet

---------

Co-authored-by: catherine meng <mcatherine1994@gmail.com>

style-sheets/primevue-components-overrides.scss

@@ -713,7 +713,7 @@ label {
 /* ------------------------------------ primevue toast --------------------------------- */
 
 .#{variables.$primevue-prefix}-toast {
-    z-index: 99999;
+    z-index: 9999 !important;
 }
 
 .#{variables.$primevue-prefix}-toast
@@ -835,6 +835,50 @@ label {
         map.get(lightTheme.$light-theme, 'support-success') !important;
 }
 
+/* ------------------------------------ Sidebar --------------------------------- */
+
+.#{variables.$primevue-prefix}-sidebar-left
+    .#{variables.$primevue-prefix}-sidebar {
+    width: 66%;
+}
+.#{variables.$primevue-prefix}-sidebar-header {
+    align-items: flex-start !important;
+    justify-content: space-between !important;
+    padding: 1rem 1.25rem 1rem 0 !important;
+}
+
+.#{variables.$primevue-prefix}-sidebar-mask {
+    top: 3rem !important; //header height
+}
+
+.#{variables.$primevue-prefix}-sidebar-visible > div {
+    border: none;
+    border-right: 0.063rem solid
+        map.get(lightTheme.$light-theme, 'layer-selected-01');
+}
+
+@media (min-device-width: 768px) {
+    .#{variables.$primevue-prefix}-sidebar-left
+        .#{variables.$primevue-prefix}-sidebar {
+        width: 33.3% !important;
+    }
+}
+
+@media (min-device-width: 1024px) {
+    .#{variables.$primevue-prefix}-sidebar-mask,
+    .#{variables.$primevue-prefix}-sidebar-left
+        .#{variables.$primevue-prefix}-sidebar {
+        width: 16rem !important;
+    }
+    .#{variables.$primevue-prefix}-sidebar-close {
+        display: none !important;
+    }
+
+    .#{variables.$primevue-prefix}-sidebar-visible > div {
+        transition-duration: 0ms !important;
+    }
+}
+
 /* ------------------------------------ Tag --------------------------------- */
 
 .#{variables.$primevue-prefix}-tag-success {