fix(bridge-ui-v2): fixed menus (#14099)

taikoxyz · Jul 4, 2023 · fabefb2 · fabefb2
1 parent 4197654
commit fabefb2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -10,13 +10,18 @@
 
 <header
   class="
+    sticky-top
     f-between-center
-    py-[20px] 
-    px-4 
-    border-b 
-    border-b-divider-border 
-    md:border-b-0 
-    md:px-10 md:py-7 
+    bg-primary-background
+    z-10
+    px-4
+    py-[20px]
+    border-b
+    border-b-divider-border
+    hide-under-b
+    md:border-b-0
+    md:px-10
+    md:py-7
     md:justify-end">
   <LogoWithText class="w-[77px] h-[20px] md:hidden" />
 

diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -28,14 +28,15 @@
   }
 </script>
 
-<div class="drawer md:drawer-open overflow-hidden">
+<div class="drawer md:drawer-open">
   <input id={drawerToggleId} type="checkbox" class="drawer-toggle" bind:this={drawerToggleElem} />
 
-  <div class="drawer-content">
+  <div class="drawer-content relative">
     <slot />
   </div>
 
-  <div class="drawer-side h-full">
+  <!-- Side drawer's z-index (20) must be greater than content's header (10)-->
+  <div class="drawer-side z-20">
     <label for={drawerToggleId} class="drawer-overlay" />
 
     <!--

diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
@@ -95,11 +95,6 @@
     @apply divider divider-horizontal w-[1px] border-divider-border;
   }
 
-  /* Other components */
-  .overlay-backdrop {
-    @apply modal-backdrop bg-overlay-background;
-  }
-
   /* Links and buttons */
   .link {
     @apply link-regular text-primary-link underline hover:text-primary-link-hover;
@@ -118,5 +113,14 @@
       hover:shadow-[0_0_0_2px_#E81899];
   }
 
+  /* Other components */
+  .overlay-backdrop {
+    @apply modal-backdrop bg-overlay-background;
+  }
+
+  .mask {
+    @apply absolute top-0 right-0 bottom-0 left-0 overflow-hidden;
+  }
+
   /* TODO: add more components here */
 }
diff --git a/packages/bridge-ui-v2/src/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css
@@ -17,6 +17,17 @@
     @apply w-full h-full;
   }
 
+  .sticky-top {
+    @apply sticky top-0;
+  }
+
+  /* TODO: shadow color, vertical length and blur radius are hardcoded */
+  .hide-under-b {
+    /* primary-background[#0B101B => grey-900] */
+    @apply shadow-[0_5px_10px_0_#0B101B];
+    clip-path: inset(0px 0px -10px 0px);
+  }
+
   /* Flex shortcuts */
   .f-between-center {
     @apply flex justify-between items-center;