Merge pull request #98 from dhawal-793/feature/Navbar

Feature/navbar
dhawal-793 · Jun 1, 2023 · 2bbfc8c · 2bbfc8c · vercel · Jun 1, 2023
2 parents 1c657a2 + 71f151c
commit 2bbfc8c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -6,6 +6,8 @@
   :root {
     --accent-primary: #f97316;
     --accent-secondary: #1e293b;
+    --dark:#18181b;
+    --light:#f3f4f6;
   }
   /* Works on Firefox */
   * {
@@ -36,6 +38,12 @@
   .md-notFound {
     height: calc(100vh - 350px);
   }
+  .shadow-light{
+    box-shadow: 0px 30px 30px -6px var(--light);
+  }
+  .shadow-dark{
+    box-shadow: 0px 40px 40px -6px var(--dark);
+  }
 
   :is(:not(.dark) .text-accent)::selection {
     background-color: rgb(113 113 122 / var(--tw-bg-opacity));

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -10,14 +10,49 @@ const Header = () => {
     const handleClick = () => {
         setShowMenu(prev => !prev);
     }
+
     return (
-        <header>
-            <Navbar handleClick={handleClick} isNavOpen={showMenu} />
-            <Navlinks handleClick={handleClick} navOpen={showMenu} className="py-5 my-12 hidden md:flex text-sm max-w-6xl" />
-            <Navlinks handleClick={handleClick} navOpen={showMenu} className={` ${showMenu ? "translate-x-0" : "translate-x-80"} navLinks-md`} />
-            <SearchBox />
-        </header>
+        <>
+            <header className="fixed z-[60] left-0 top-0 w-full ">
+                <div className="bg-light dark:bg-dark px-5 pt-5 pb-2 transition-all duration-1000">
+                    <Navbar handleClick={handleClick} isNavOpen={showMenu} />
+                    <Navlinks handleClick={handleClick} navOpen={showMenu} className="py-2 my-4 hidden md:flex text-sm max-w-6xl" />
+                    <Navlinks handleClick={handleClick} navOpen={showMenu} className={` ${showMenu ? "translate-x-0" : "translate-x-80"} navLinks-md`} />
+                    <SearchBox />
+                </div>
+                <BlurdArea />
+            </header>
+            <div className="h-[148.800px] sm:h-[152.800px] md:h-[237.600px]" />
+        </>
     )
 }
 
-export default Header
+export default Header
+
+
+const BlurdArea = () => {
+    return (
+        <div className="">
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[1]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.95]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.9]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.85]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.8]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.75]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.7]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.65]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.6]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.55]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.5]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.45]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.4]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.35]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.3]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.25]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.2]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.15]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.1]" />
+            <div className="bg-light dark:bg-dark transition-all duration-1000 h-[0.8px] opacity-[0.05]" />
+        </div>
+    )
+}
diff --git a/components/SearchBox.tsx b/components/SearchBox.tsx
@@ -13,7 +13,7 @@ const SearchBox = () => {
         router.push(`/search?term=${input}`)
     }
     return (
-        <form onSubmit={handleSubmit} className="mt-10 mb-5 md:mt-5 px-3 max-w-6xl mx-auto flex gap-5 justify-between items-center border-b-2 md:border border-dark-secondary dark:border-light md:rounded-md">
+        <form onSubmit={handleSubmit} className="mt-6 md:mt-5 px-3 max-w-6xl mx-auto flex gap-5 justify-between items-center border-b-2 md:border border-dark-secondary dark:border-light md:rounded-md">
             <input type="text"
                 placeholder="Search Keywords..."
                 className="w-full h-10  flex-1 outline-none bg-transparent placeholder:text-light-primary text-accent"