activist-org#578 apply slight shadow to sidebar header on scroll

aasimsyed · May 18, 2024 · 5852fa0 · 5852fa0
1 parent 7612a5a
commit 5852fa0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/frontend/components/sidebar/left/SidebarLeft.vue b/frontend/components/sidebar/left/SidebarLeft.vue
@@ -23,7 +23,10 @@
         sidebarContentScrollable,
     }"
   >
-    <SidebarLeftHeader @toggle-pressed="setSidebarContentScrollable()" />
+    <SidebarLeftHeader
+      @toggle-pressed="setSidebarContentScrollable()"
+      :atTopShadow="applyTopShadow"
+    />
     <div
       ref="content"
       class="h-full overflow-x-hidden"
@@ -244,12 +247,20 @@ const sidebarContentScrollable = useState<boolean>(
   "sidebarContentScrollable",
   () => false
 );
+const applyTopShadow = ref(false);
 
 function setSidebarContentScrollable(): void {
   setTimeout(() => {
     sidebarContentScrollable.value =
       content.value.scrollHeight > content.value.clientHeight ? true : false;
   }, 50);
+  isAtTop();
+}
+
+function isAtTop(): void {
+  if (sidebarContentScrollable) {
+    applyTopShadow.value = !(content.value.scrollTop === 0);
+  }
 }
 
 const sidebarWrapper = ref<HTMLElement | null>(null);

diff --git a/frontend/components/sidebar/left/SidebarLeftFooter.vue b/frontend/components/sidebar/left/SidebarLeftFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="w-full bg-light-layer-1 p-1 transition-all duration-500 dark:bg-dark-layer-1"
+    class="p-1 transition-all duration-500"
     :class="{
       'pr-4': sidebarContentScrollable,
     }"

diff --git a/frontend/components/sidebar/left/SidebarLeftHeader.vue b/frontend/components/sidebar/left/SidebarLeftHeader.vue
@@ -1,6 +1,9 @@
 <template>
   <header
-    class="w-full bg-light-layer-1 pl-1 transition-all duration-500 dark:bg-dark-layer-1"
+    class="z-40 w-full bg-light-layer-1 pl-1 transition-all duration-500 dark:bg-dark-layer-1"
+    :class="{
+      'elem-shadow-sm': atTopShadow,
+    }"
   >
     <div class="flex items-center pb-2 pl-[0.85rem] pr-6 pt-3">
       <div
@@ -52,6 +55,10 @@
 </template>
 
 <script setup lang="ts">
+defineProps<{
+  atTopShadow: boolean;
+}>();
+
 const sidebar = useSidebar();
 const emit = defineEmits(["toggle-pressed"]);
 </script>