From b4b4a5c6f3337d36f22b9ce0b8a6e90c837aac4b Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 16:06:49 +0200
Subject: [PATCH 1/6] fixing lhs menu

---
 .../SideNavigation/SideNavigation.svelte           |  6 +++---
 packages/bridge-ui-v2/src/styles/components.css    | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index 5605eb76b81..d534072907a 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -28,14 +28,14 @@
   }
 </script>
 
-<div class="drawer md:drawer-open overflow-hidden">
+<div class="drawer mask md:drawer-open">
   <input id={drawerToggleId} type="checkbox" class="drawer-toggle" bind:this={drawerToggleElem} />
 
-  <div class="drawer-content">
+  <div class="drawer-content overflow-auto">
     <slot />
   </div>
 
-  <div class="drawer-side h-full">
+  <div class="drawer-side">
     <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
index aa3ca0d78ad..c43d2297c5e 100644
--- 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 */
 }

From bc28b88b153f886b6d567127e7c4925a8e26d9cb Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 16:25:19 +0200
Subject: [PATCH 2/6] minor change

---
 .../src/components/SideNavigation/SideNavigation.svelte       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index d534072907a..44629d9392a 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -28,10 +28,10 @@
   }
 </script>
 
-<div class="drawer mask md:drawer-open">
+<div class="drawer md:drawer-open">
   <input id={drawerToggleId} type="checkbox" class="drawer-toggle" bind:this={drawerToggleElem} />
 
-  <div class="drawer-content overflow-auto">
+  <div class="drawer-content">
     <slot />
   </div>
 

From 33c1483675e0d549e0aeb17f0015486706e2c64e Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 16:33:21 +0200
Subject: [PATCH 3/6] sticky header

---
 packages/bridge-ui-v2/src/components/Header/Header.svelte       | 2 ++
 .../src/components/SideNavigation/SideNavigation.svelte         | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 55867f56af4..2b4906b32b4 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -10,6 +10,8 @@
 
 <header
   class="
+    sticky 
+    top-0 
     f-between-center
     py-[20px] 
     px-4 
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index 44629d9392a..f43569b20e8 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -31,7 +31,7 @@
 <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>
 

From ceb5579f8984f2cb974123d4508b120f7d78733f Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 16:39:56 +0200
Subject: [PATCH 4/6] header on top

---
 .../src/components/Header/Header.svelte        | 18 ++++++++++--------
 packages/bridge-ui-v2/src/styles/utilities.css |  4 ++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 2b4906b32b4..461c0b863e1 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -10,15 +10,17 @@
 
 <header
   class="
-    sticky 
-    top-0 
+    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
+    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/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css
index 93a24bb9a43..6ba6948cb4f 100644
--- a/packages/bridge-ui-v2/src/styles/utilities.css
+++ b/packages/bridge-ui-v2/src/styles/utilities.css
@@ -17,6 +17,10 @@
     @apply w-full h-full;
   }
 
+  .sticky-top {
+    @apply sticky top-0;
+  }
+
   /* Flex shortcuts */
   .f-between-center {
     @apply flex justify-between items-center;

From 0745d429b3542be08504795e8656b9276062e056 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 17:44:18 +0200
Subject: [PATCH 5/6] improvements

---
 packages/bridge-ui-v2/src/components/Header/Header.svelte  | 1 +
 .../src/components/SideNavigation/SideNavigation.svelte    | 2 +-
 packages/bridge-ui-v2/src/styles/utilities.css             | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 461c0b863e1..5f4172ef08a 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -18,6 +18,7 @@
     py-[20px]
     border-b
     border-b-divider-border
+    hide-under-b
     md:border-b-0
     md:px-10
     md:py-7
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index f43569b20e8..63b49bac338 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -35,7 +35,7 @@
     <slot />
   </div>
 
-  <div class="drawer-side">
+  <div class="drawer-side z-20">
     <label for={drawerToggleId} class="drawer-overlay" />
 
     <!--
diff --git a/packages/bridge-ui-v2/src/styles/utilities.css b/packages/bridge-ui-v2/src/styles/utilities.css
index 6ba6948cb4f..554183513e1 100644
--- a/packages/bridge-ui-v2/src/styles/utilities.css
+++ b/packages/bridge-ui-v2/src/styles/utilities.css
@@ -21,6 +21,13 @@
     @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;

From 1249917e26de38d296286fc1187f5fec861f1c3f Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 4 Jul 2023 17:45:55 +0200
Subject: [PATCH 6/6] add minor comment

---
 .../src/components/SideNavigation/SideNavigation.svelte          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index 63b49bac338..5ef36f806d2 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -35,6 +35,7 @@
     <slot />
   </div>
 
+  <!-- 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" />