mohiit1502/zin-tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve Navbar for Mobile Screen

Browse Source
This commit is contained in:
aftabrehan
2024-02-01 23:07:48 +05:00
parent bc7cad7e3b
commit 71eb0dfed7
6 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/MobileNav.tsx
View File

@@ -6,7 +6,7 @@ import Image from 'next/image'
import { Modal } from '@/components//modal/modal' import { Modal } from '@/components//modal/modal'
import { NavDropdown } from '@/components/nav-dropdown' 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 = () => { export const MobileNav = () => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
@@ -27,13 +27,14 @@ export const MobileNav = () => {
</button> </button>
<Modal isOpen={isOpen} close={() => setIsOpen(false)}> <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"> <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="w-full"> <nav className="relative w-full">
<ul className="w-full flex flex-col items-end justify-center gap-2 p-4"> <ul className="w-full flex flex-col items-end justify-center gap-2 p-4 pb-24">
{ALL_NAV_ITEMS.map((navItem, i) => ( {MOBILE_NAV_ITEMS.map((navItem, i) => (
<NavDropdown key={i} {...navItem} /> <NavDropdown key={i} {...navItem} />
))} ))}
</ul> </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> </nav>
</div> </div>
</Modal> </Modal>

4
components/header.tsx
View File

@@ -7,8 +7,8 @@ import { Navbar } from '@/components/navbar'
import { MobileNav } from '@/components/MobileNav' import { MobileNav } from '@/components/MobileNav'
export const Header = () => ( export const Header = () => (
<header className="w-full h-36 fixed top-0 shadow-header px-4 pt-6 bg-white"> <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-3 sm:gap-4 md:gap-6"> <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"> <div className="w-full flex items-center justify-between">
<Link href="/" className="overflow-hidden"> <Link href="/" className="overflow-hidden">
<Image <Image

4
components/nav-dropdown.tsx
View File

@@ -15,8 +15,8 @@ export const NavDropdown = ({
position = 'center', position = 'center',
}: navDropdownProps) => { }: navDropdownProps) => {
const positionCls = { const positionCls = {
left: 'left-0', left: '-left-2',
right: 'right-0', right: '-right-2',
center: '', center: '',
}[position] }[position]

2
components/search-bar.tsx
View File

@@ -15,7 +15,7 @@ export const Searchbar = ({ className }: searchbarProps) => (
<input <input
type="search" type="search"
placeholder="Search for Movies, TV Shows, Themes & Cast" 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="flex items-center justify-end gap-x-2 md:gap-x-6">
<div className="w-[1px] h-9 bg-gray-400/50 cursor-default" /> <div className="w-[1px] h-9 bg-gray-400/50 cursor-default" />

0
constants/feature-list.ts Normal file
View File

19
constants/nav-items.ts
View File

@@ -26,3 +26,22 @@ export const LESS_NAV_ITEMS = [
{ title: 'Graphic Templates', ...commonProps }, { title: 'Graphic Templates', ...commonProps },
{ title: 'More', ...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 },
]