From 2f86ee45501073a91db624ce470eaef0dbc75ed6 Mon Sep 17 00:00:00 2001
From: Samandar Turgunboyev <turgunboyevsamandar4@gmail.com>
Date: Tue, 16 Dec 2025 18:42:38 +0500
Subject: [PATCH] added menu mobile navbar

---
 .../privacy-policy/ui/PrivacyPlicy.tsx        |   4 +-
 src/features/profile/ui/Profile.tsx           |   6 -
 src/widgets/navbar/ui/index.tsx               | 215 +++++++++++++++++-
 3 files changed, 206 insertions(+), 19 deletions(-)

diff --git a/src/features/privacy-policy/ui/PrivacyPlicy.tsx b/src/features/privacy-policy/ui/PrivacyPlicy.tsx
index 86c56b5..30ea34b 100644
--- a/src/features/privacy-policy/ui/PrivacyPlicy.tsx
+++ b/src/features/privacy-policy/ui/PrivacyPlicy.tsx
@@ -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" />
diff --git a/src/features/profile/ui/Profile.tsx b/src/features/profile/ui/Profile.tsx
index 54d433b..4be39c7 100644
--- a/src/features/profile/ui/Profile.tsx
+++ b/src/features/profile/ui/Profile.tsx
@@ -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 = {
diff --git a/src/widgets/navbar/ui/index.tsx b/src/widgets/navbar/ui/index.tsx
index add65bd..d63715e 100644
--- a/src/widgets/navbar/ui/index.tsx
+++ b/src/widgets/navbar/ui/index.tsx
@@ -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">