From 22dd132b6baa43e97867ca34a686e78336ddac62 Mon Sep 17 00:00:00 2001
From: J0taFerreira <126905995+J0taFerreira@users.noreply.github.com>
Date: Thu, 5 Oct 2023 16:26:08 -0300
Subject: [PATCH] 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>
---
 .../primevue-components-overrides.scss        | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/style-sheets/primevue-components-overrides.scss b/style-sheets/primevue-components-overrides.scss
index 5d6e687..478a9ce 100644
--- a/style-sheets/primevue-components-overrides.scss
+++ b/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 {