From 71eb0dfed7870a2aa5b64ecff7ef879666de9bc9 Mon Sep 17 00:00:00 2001
From: aftabrehan <aftabrehan52422@gmail.com>
Date: Thu, 1 Feb 2024 23:07:48 +0500
Subject: [PATCH] Improve Navbar for Mobile Screen

---
 components/MobileNav.tsx    | 11 ++++++-----
 components/header.tsx       |  4 ++--
 components/nav-dropdown.tsx |  4 ++--
 components/search-bar.tsx   |  2 +-
 constants/feature-list.ts   |  0
 constants/nav-items.ts      | 19 +++++++++++++++++++
 6 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 constants/feature-list.ts

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index f709de4..7e3fc50 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import { Modal } from '@/components//modal/modal'
 import { NavDropdown } from '@/components/nav-dropdown'
 
-import { ALL_NAV_ITEMS } from '@/constants/nav-items'
+import { MOBILE_NAV_ITEMS } from '@/constants/nav-items'
 
 export const MobileNav = () => {
   const [isOpen, setIsOpen] = useState(false)
@@ -27,13 +27,14 @@ export const MobileNav = () => {
       </button>
 
       <Modal isOpen={isOpen} close={() => setIsOpen(false)}>
-        <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white pointer-events-auto border-t border-zinc-100 border animation-slide-from-right">
-          <nav className="w-full">
-            <ul className="w-full flex flex-col items-end justify-center gap-2 p-4">
-              {ALL_NAV_ITEMS.map((navItem, i) => (
+        <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white pointer-events-auto border-t border-zinc-100 border animation-slide-from-right overflow-auto">
+          <nav className="relative w-full">
+            <ul className="w-full flex flex-col items-end justify-center gap-2 p-4 pb-24">
+              {MOBILE_NAV_ITEMS.map((navItem, i) => (
                 <NavDropdown key={i} {...navItem} />
               ))}
             </ul>
+            <div className="fixed -bottom-2 left-0 w-full h-32 bg-gradient-to-b from-white/75 to-white pointer-events-none blur-[6px]" />
           </nav>
         </div>
       </Modal>
diff --git a/components/header.tsx b/components/header.tsx
index d5b6ceb..b8c43d5 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -7,8 +7,8 @@ import { Navbar } from '@/components/navbar'
 import { MobileNav } from '@/components/MobileNav'
 
 export const Header = () => (
-  <header className="w-full h-36 fixed top-0 shadow-header px-4 pt-6 bg-white">
-    <div className="w-full max-w-7xl mx-auto flex flex-col items-center justify-center gap-3 sm:gap-4 md:gap-6">
+  <header className="w-full h-36 fixed top-0 shadow-header px-4 pt-4 sm:pt-6 bg-white">
+    <div className="w-full max-w-7xl mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
       <div className="w-full flex items-center justify-between">
         <Link href="/" className="overflow-hidden">
           <Image
diff --git a/components/nav-dropdown.tsx b/components/nav-dropdown.tsx
index 2b490cf..b72158c 100644
--- a/components/nav-dropdown.tsx
+++ b/components/nav-dropdown.tsx
@@ -15,8 +15,8 @@ export const NavDropdown = ({
   position = 'center',
 }: navDropdownProps) => {
   const positionCls = {
-    left: 'left-0',
-    right: 'right-0',
+    left: '-left-2',
+    right: '-right-2',
     center: '',
   }[position]
 
diff --git a/components/search-bar.tsx b/components/search-bar.tsx
index 5ac9388..85481cd 100644
--- a/components/search-bar.tsx
+++ b/components/search-bar.tsx
@@ -15,7 +15,7 @@ export const Searchbar = ({ className }: searchbarProps) => (
     <input
       type="search"
       placeholder="Search for Movies, TV Shows, Themes & Cast"
-      className="flex flex-1 outline-none bg-transparent text-black text-base"
+      className="w-full flex flex-1 outline-none bg-transparent text-black text-base"
     />
     <div className="flex items-center justify-end gap-x-2 md:gap-x-6">
       <div className="w-[1px] h-9 bg-gray-400/50 cursor-default" />
diff --git a/constants/feature-list.ts b/constants/feature-list.ts
new file mode 100644
index 0000000..e69de29
diff --git a/constants/nav-items.ts b/constants/nav-items.ts
index bb58600..f3772ee 100644
--- a/constants/nav-items.ts
+++ b/constants/nav-items.ts
@@ -26,3 +26,22 @@ export const LESS_NAV_ITEMS = [
   { title: 'Graphic Templates', ...commonProps },
   { title: 'More', ...commonProps },
 ]
+
+export const MOBILE_NAV_ITEMS = [
+  { title: 'Stock Video', ...commonProps },
+  { title: 'Video Templates', ...commonProps },
+  { title: 'Music', ...commonProps },
+  { title: 'Sound Effects', ...commonProps },
+  { title: 'Graphic Templates', ...commonProps },
+  { title: 'Presentation Templates', ...commonProps },
+  { title: 'Graphics', ...commonProps },
+  { title: 'Photos', ...commonProps },
+  { title: 'Fonts', ...commonProps },
+  { title: 'Web Templates', ...commonProps },
+  { title: 'CMS Templates', ...commonProps },
+  { title: 'Wordpress', ...commonProps },
+  { title: '3D', ...commonProps },
+  { title: 'Free Files', ...commonProps },
+  { title: 'Extentions', ...commonProps },
+  { title: 'Adds-on', ...commonProps },
+]