feat: implement sticky header and sticky fixed menu

zerinoid · Jul 7, 2023 · 3384840 · 3384840
1 parent 129cfd8
commit 3384840
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 17 deletions.
diff --git a/src/components/layouts/primary/PrimaryLayout.module.css b/src/components/layouts/primary/PrimaryLayout.module.css
@@ -1 +1,3 @@
-.main {}
+.main {
+  position: relative;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,7 +18,6 @@ const Home: NextPageWithLayout = () => {
   });
   const [isFilterOpen, setIsFilterOpen] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<string>('');
-  const icon = isFilterOpen ? faXmark : faBars;
   const projects = galleryData.projects;
 
   const handleSearchTextChange = (text: string) => {
@@ -81,32 +80,43 @@ const Home: NextPageWithLayout = () => {
 
   return (
     <>
+      <div className={styles.header}>
+        <button
+          className="md:hidden"
+          onClick={() => setIsFilterOpen(isOpen => !isOpen)}
+        >
+          <FontAwesomeIcon icon={faBars} size="xl" />
+        </button>
+        <p>Search and filter</p>
+      </div>
       <div
         className={styles.slidingMenu}
         style={{ left: isFilterOpen ? '0' : '-100%' }}
       >
+        <button
+          className="absolute top-2 right-2"
+          onClick={() => setIsFilterOpen(isOpen => !isOpen)}
+        >
+          <FontAwesomeIcon icon={faXmark} size="xl" />
+        </button>
         <Filter
           searchText={searchText}
           handleSearchTextChange={handleSearchTextChange}
           handleCheckboxChange={handleCheckboxChange}
           filtersState={filters}
         />
       </div>
-      <section className={styles.container}>
-        <button
-          className="fixed top-2 left-2 z-10 md:hidden"
-          onClick={() => setIsFilterOpen(isOpen => !isOpen)}
-        >
-          <FontAwesomeIcon icon={icon} size="xl" />
-        </button>
+      <section className={styles.main}>
         <Gallery projects={filteredItems} />
         <div className={styles.fixedMenu}>
-          <Filter
-            searchText={searchText}
-            handleSearchTextChange={handleSearchTextChange}
-            handleCheckboxChange={handleCheckboxChange}
-            filtersState={filters}
-          />
+          <div className={styles.fixedContainer}>
+            <Filter
+              searchText={searchText}
+              handleSearchTextChange={handleSearchTextChange}
+              handleCheckboxChange={handleCheckboxChange}
+              filtersState={filters}
+            />
+          </div>
         </div>
       </section>
     </>

diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -1,8 +1,23 @@
-.container {
+.header {
+  position: sticky;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  top: 0;
+  height: 40px;
+  border-bottom: 1px solid grey;
+  background-color: white;
+  z-index: 200;
+}
+
+.header p {
+  text-transform: uppercase;
+}
+
+.main {
   display: grid;
   grid-template-columns: 1fr;
   min-height: 100vh;
-  padding: 4rem 0;
 
   @media screen(md) {
     grid-template-columns: 8fr 4fr;
@@ -16,6 +31,7 @@
   left: -100%;
   overflow-y: auto;
   transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 300;
 
   @media screen(md) {
     display: none;
@@ -24,12 +40,19 @@
 
 .fixedMenu {
   display: none;
+  border-left: 1px solid grey;
+  z-index: 100;
 
   @media screen(md) {
     display: block;
   }
 }
 
+.fixedContainer {
+  top: 40px;
+  position: sticky;
+}
+
 @media (prefers-color-scheme: dark) {
 
   .card,