Add back in screen blur on sidebar open for certain bps

aasimsyed · May 4, 2024 · 88da263 · 88da263
1 parent 96fa98e
commit 88da263
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/frontend/layouts/sidebar.vue b/frontend/layouts/sidebar.vue
@@ -50,12 +50,10 @@ const handleWindowSizeChange = () => {
 
 const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
 
-const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(
-  sidebarHover.value
-);
-
 const sidebarContentDynamicClass = getSidebarContentDynamicClass(
   sidebarContentScrollable.value,
-  sidebarHover.value
+  sidebarHover
 );
+
+const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(sidebarHover);
 </script>
diff --git a/frontend/utils/sidebarUtils.ts b/frontend/utils/sidebarUtils.ts
@@ -2,7 +2,7 @@ const sidebar = useSidebar();
 
 export function getSidebarContentDynamicClass(
   sidebarContentScrollable: boolean,
-  sidebarHover: boolean
+  sidebarHover: Ref<boolean>
 ) {
   return computed(() => ({
     "md:pl-16 xl:pl-56":
@@ -19,11 +19,11 @@ export function getSidebarContentDynamicClass(
     "blur-sm xl:blur-none":
       sidebar.collapsedSwitch == true &&
       sidebar.collapsed == false &&
-      sidebarHover == true,
+      sidebarHover.value == true,
   }));
 }
 
-export function getSidebarFooterDynamicClass(sidebarHover: boolean) {
+export function getSidebarFooterDynamicClass(sidebarHover: Ref<boolean>) {
   return computed(() => ({
     "md:pl-24 xl:pl-64":
       sidebar.collapsed == false || sidebar.collapsedSwitch == false,
@@ -32,6 +32,6 @@ export function getSidebarFooterDynamicClass(sidebarHover: boolean) {
     "blur-sm xl:blur-none":
       sidebar.collapsedSwitch == true &&
       sidebar.collapsed == false &&
-      sidebarHover == true,
+      sidebarHover.value == true,
   }));
 }