added menu mobile navbar
This commit is contained in:
Samandar Turgunboyev
@@ -3,9 +3,9 @@ import { Database, Eye, FileText, Lock, Shield, UserCheck } from 'lucide-react';
|
||||
|
||||
const PrivacyPolicy = () => {
|
||||
return (
|
||||
<main className="min-h-screen bg-background">
|
||||
<main className="custom-container">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-20 px-4 bg-gradient-to-b from-primary/5 to-background">
|
||||
<section>
|
||||
<div className="container mx-auto max-w-4xl text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
|
||||
<Shield className="w-8 h-8 text-primary" />
|
||||
|
||||
@@ -11,13 +11,10 @@ import { Card, CardContent } from '@/shared/ui/card';
|
||||
import {
|
||||
CheckCircle,
|
||||
ChevronRight,
|
||||
Handshake,
|
||||
HelpCircle,
|
||||
History,
|
||||
Home,
|
||||
LogOut,
|
||||
MapPin,
|
||||
MessageCircleQuestion,
|
||||
Package,
|
||||
RefreshCw,
|
||||
ShoppingBag,
|
||||
@@ -87,9 +84,6 @@ const Profile = () => {
|
||||
{ id: 'overview', label: 'Umumiy', icon: Home },
|
||||
{ id: 'orders', label: 'Buyurtmalar', icon: ShoppingBag },
|
||||
{ id: 'history', label: 'Tarix', icon: History },
|
||||
{ id: 'agency', label: "Hamkor bo'lish", icon: Handshake },
|
||||
{ id: 'faq', label: 'Savol javoblar', icon: MessageCircleQuestion },
|
||||
{ id: 'support', label: "Qo'llab-quvvatlash", icon: HelpCircle },
|
||||
];
|
||||
|
||||
const statistics = {
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
import { Link, useRouter } from '@/shared/config/i18n/navigation';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { Input } from '@/shared/ui/input';
|
||||
import { Popover, PopoverContent } from '@/shared/ui/popover';
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/shared/ui/sheet';
|
||||
import { categoryList } from '@/widgets/welcome/lib/data';
|
||||
import { PopoverTrigger } from '@radix-ui/react-popover';
|
||||
import {
|
||||
@@ -14,6 +23,7 @@ import {
|
||||
Instagram,
|
||||
LayoutGrid,
|
||||
Mail,
|
||||
MenuIcon,
|
||||
Phone,
|
||||
Search,
|
||||
Send,
|
||||
@@ -73,34 +83,64 @@ const Navbar = () => {
|
||||
<>
|
||||
<div className="w-full bg-[#57A595] h-10 max-lg:hidden">
|
||||
<div className="custom-container h-full flex justify-between items-center">
|
||||
<ul className="text-sm flex items-center justify-center gap-4">
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<ul className="text-sm flex items-center justify-center gap-6">
|
||||
{/* Sahifalar */}
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<Link
|
||||
href="/about"
|
||||
className="flex items-center gap-1.5 font-medium"
|
||||
>
|
||||
Biz haqimizda
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="flex items-center gap-1.5 font-medium"
|
||||
>
|
||||
Maxfiylik siyosati
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<Link
|
||||
href="/faq"
|
||||
className="flex items-center gap-1.5 font-medium"
|
||||
>
|
||||
Savol-javob
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Divider */}
|
||||
<li className="text-white/30">|</li>
|
||||
|
||||
{/* Ijtimoiy tarmoqlar */}
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Send className="size-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Instagram className="size-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Facebook className="size-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Twitter className="size-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Mail className="size-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-white transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<li className="text-white hover:text-white/80 transition-colors cursor-pointer">
|
||||
<a href={'tel:+998901234567'} className="flex items-center gap-2">
|
||||
<Phone className="size-4" />
|
||||
<p>{formatPhone('+998901234567')}</p>
|
||||
</a>
|
||||
@@ -128,7 +168,7 @@ const Navbar = () => {
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end lg:hidden gap-2">
|
||||
<div className="w-full flex justify-end items-center lg:hidden gap-2">
|
||||
<Button
|
||||
variant={'ghost'}
|
||||
size={'icon'}
|
||||
@@ -137,6 +177,160 @@ const Navbar = () => {
|
||||
<Search className="size-5" />
|
||||
</Button>
|
||||
<MobileLanguageSelector />
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<MenuIcon className="size-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[320px] p-0 flex flex-col">
|
||||
<SheetHeader className="px-6 py-4 border-b border-slate-200 bg-gradient-to-r from-[#57A595] to-[#69b5a5]">
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<div className="bg-white p-2 rounded-lg">
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
src={'/logos/logo.png'}
|
||||
alt="logo"
|
||||
className="w-8 h-8"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-white text-xl font-bold">GASTRO</p>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* Menu Bo'limlari */}
|
||||
<div className="px-4 py-6 space-y-6">
|
||||
{/* Asosiy Sahifalar */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">
|
||||
Sahifalar
|
||||
</h3>
|
||||
<nav className="space-y-1">
|
||||
<SheetClose asChild>
|
||||
<Link
|
||||
href="/about"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100 hover:text-[#57A595] transition-all group"
|
||||
>
|
||||
<div className="w-1 h-1 rounded-full bg-slate-400 group-hover:bg-[#57A595]" />
|
||||
<span className="text-sm font-medium">
|
||||
Biz haqimizda
|
||||
</span>
|
||||
<ChevronRight className="size-4 ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</Link>
|
||||
</SheetClose>
|
||||
<SheetClose asChild>
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100 hover:text-[#57A595] transition-all group"
|
||||
>
|
||||
<div className="w-1 h-1 rounded-full bg-slate-400 group-hover:bg-[#57A595]" />
|
||||
<span className="text-sm font-medium">
|
||||
Maxfiylik siyosati
|
||||
</span>
|
||||
<ChevronRight className="size-4 ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</Link>
|
||||
</SheetClose>
|
||||
<SheetClose asChild>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-100 hover:text-[#57A595] transition-all group"
|
||||
>
|
||||
<div className="w-1 h-1 rounded-full bg-slate-400 group-hover:bg-[#57A595]" />
|
||||
<span className="text-sm font-medium">
|
||||
Savol va javoblar
|
||||
</span>
|
||||
<ChevronRight className="size-4 ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</Link>
|
||||
</SheetClose>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-px bg-slate-200" />
|
||||
|
||||
{/* Aloqa */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">
|
||||
{"Biz bilan bog'laning"}
|
||||
</h3>
|
||||
<nav className="space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
||||
<Send className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">Telegram</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-pink-50 hover:text-pink-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-pink-100 text-pink-600 group-hover:bg-pink-600 group-hover:text-white transition-colors">
|
||||
<Instagram className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">Instagram</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
||||
<Facebook className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">Facebook</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-sky-50 hover:text-sky-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-sky-100 text-sky-600 group-hover:bg-sky-600 group-hover:text-white transition-colors">
|
||||
<Twitter className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">Twitter</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@gastro.uz"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-purple-50 hover:text-purple-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-purple-100 text-purple-600 group-hover:bg-purple-600 group-hover:text-white transition-colors">
|
||||
<Mail className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
info@gastro.uz
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="tel:+998901234567"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all group"
|
||||
>
|
||||
<div className="p-1.5 rounded-lg bg-emerald-100 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
|
||||
<Phone className="size-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
{formatPhone('+998901234567')}
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SheetFooter className="px-4 py-4 border-t border-slate-200 bg-slate-50">
|
||||
<SheetClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-slate-300 hover:bg-slate-100"
|
||||
>
|
||||
Yopish
|
||||
</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<div className="flex-1 flex gap-3">
|
||||
<Button
|
||||
@@ -176,7 +370,6 @@ const Navbar = () => {
|
||||
|
||||
<Search className="absolute top-1/2 -translate-y-1/2 left-2 size-5 text-muted-foreground" />
|
||||
|
||||
{/* Search Results Dropdown */}
|
||||
{searchOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white border border-slate-200 rounded-xl shadow-lg min-h-[300px] max-h-[600px] overflow-y-auto scrollbar-thin z-50">
|
||||
<div className="p-4">
|
||||
|
||||
Reference in New Issue
Block a user