💄Nav

noeypatt · Apr 2, 2020 · d49e620 · d49e620 · vercel · Apr 2, 2020
1 parent 96fddfc
commit d49e620
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 22 deletions.
diff --git a/components/layout/nav.js b/components/layout/nav.js
@@ -1,11 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useMediaQuery } from 'react-responsive';
 
 const NavBar = props => {
 
     const tab = props.tab
     const name = props.name
+    const [navbar,setNavbar] = useState("")
     const [status, setStatus] = useState(false)
     const isBigScreen = useMediaQuery({ minDeviceWidth: 769 })
     const isSmallScreen = useMediaQuery({ maxDeviceWidth: 768.99 })
@@ -22,13 +23,22 @@ const NavBar = props => {
         }
     }
 
+    useEffect(() => {
+        window.onscroll = () => {
+            if (window.scrollY <= 10) 
+            setNavbar(null)
+            else 
+            setNavbar("scroll")
+        };
+    }, [])
+
     return (
         <React.Fragment>
             {
                 typeof document === 'undefined' ?
                     null :
                     isBigScreen && name == "index" ?
-                        <nav>
+                        <nav className={navbar}>
                             <ul>
                                 <Link href="/">
                                     <li>

diff --git a/pages/index.js b/pages/index.js
@@ -48,20 +48,21 @@ const Home = () => {
       {
         typeof document === 'undefined' ?
           null :
-          <div className="warp-index">
+          <React.Fragment>
             <Head>
               <title>Eldery DB</title>
               <link rel='icon' href='/static/logomain.svg' />
             </Head>
-            <React.Fragment>
-              <NavBar name="index" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
-              <Cover />
-              <About />
-              <Agency />
-              <Info />
-              <Footer />
-            </React.Fragment>
-          </div>
+            <NavBar name="index" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+            <div className="warp-index">
+                <Cover />
+                <About />
+                <Agency />
+                <Info />
+                <Footer />
+            </div>
+          </React.Fragment>
+
       }
     </React.Fragment>
 

diff --git a/styles/cover.scss b/styles/cover.scss
@@ -6,6 +6,7 @@ $border-bg-color: 1px solid #83d2ae;
 
 
 .warp-cover {
+  margin-top: 5rem;
   // position: relative;
   // text-align: center;
   // line-height: 0;

diff --git a/styles/nav.scss b/styles/nav.scss
@@ -6,19 +6,43 @@ $bg-color: linear-gradient(to left, #a6d254, #83d2ae);
 $border-bg-color: 1px solid #83d2ae;
 $line-color: #e8e9fe;
 
-.warp-index {
-  nav {
-    width: 100%;
-    min-height: 5rem;
-    ul {
-      user-select: none;
-      padding: 0.5rem;
-      display: flex;
-      justify-content: space-between;
-    }
+
+nav {
+  width: 100%;
+  min-height: 5rem;
+  ul {
+    user-select: none;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
   }
 }
 
+
+//Navbar-Scroll
+// nav {
+//   position: fixed;
+//   width: 100%;
+//   min-height: 5rem;
+//   top: 0;
+//   z-index: 1000;
+//   ul {
+//     user-select: none;
+//     padding: 0.5rem;
+//     display: flex;
+//     justify-content: space-between;
+//   }
+// }
+
+// nav.scroll {
+//   position: fixed;
+//   width: 100%;
+//   top: 0;
+//   z-index: 1000;
+//   background-color: greenyellow;
+//   transition: background-color 0.4s ease-out;
+// }
+
 .warp-main {
   ul {
     cursor: pointer;