feat(search-bar-freeze): resolves issue #380 (#566)

* feat(search-bar-freeze): resolves issue #380 * style: improve --------- Co-authored-by: ldeluigi <44567586+ldeluigi@users.noreply.github.com>
SpaceCowMedia · Oct 30, 2024 · 66835de · 66835de
1 parent 6b1d95c
commit 66835de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/layout/PageWrapper/PageWrapper.tsx b/src/components/layout/PageWrapper/PageWrapper.tsx
@@ -20,10 +20,10 @@ const PageWrapper: React.FC<Props> = ({ children, noMarginFooter }: Props) => {
   }
 
   return (
-    <div className={`flex flex-col h-full`}>
+    <div className={`flex flex-col h-full ${!isHome ? styles.padtop : ''}`}>
       <AnalyticsCookieBanner />
       {!isHome && (
-        <div className={`bg-dark`}>
+        <div className={`bg-dark ${styles.locked}`}>
           <nav className="container">
             <SearchBar />
           </nav>

diff --git a/src/components/layout/PageWrapper/pageWrapper.module.scss b/src/components/layout/PageWrapper/pageWrapper.module.scss
@@ -1,3 +1,16 @@
 .searchBarBorder {
   height: 2px;
 }
+
+.locked{
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+
+}
+
+.padtop{
+  padding-top: 2.6em;
+}