|
|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
|
|
import { Coffee, Search, X } from "lucide-react";
|
|
|
|
import { Coffee, Search, X } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
|
|
interface MenuItem {
|
|
|
|
interface MenuItem {
|
|
|
|
@@ -15,112 +15,162 @@ interface MenuItem {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const MENU_CATEGORIES = [
|
|
|
|
const MENU_CATEGORIES = [
|
|
|
|
"Beverages", "Breakfast", "Appetizers", "Burgers", "Pizzas", "Wraps", "Salads", "Mains", "Naans", "Breads", "Desserts", "Shakes", "Smoothies", "Mocktails", "Specials"];
|
|
|
|
"Beverages", "Breakfast", "Appetizers", "Burgers", "Pizzas", "Wraps", "Salads", "Mains", "Naans", "Breads", "Desserts", "Shakes", "Smoothies", "Mocktails", "Specials"
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
const MENU_ITEMS: MenuItem[] = [
|
|
|
|
const MENU_ITEMS: MenuItem[] = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "1", category: "Beverages", name: "Cold Coffee", description: "Chilled espresso with vanilla and whipped cream", price: "₹150", image: "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg"},
|
|
|
|
id: "1", category: "Beverages", name: "Cold Coffee", description: "Chilled espresso with vanilla and whipped cream", price: "₹150", image: "http://img.b2bpic.net/free-photo/delicious-iced-coffee-table-beans_23-2149600676.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", category: "Beverages", name: "Iced Tea", description: "Refreshing homemade iced tea with lemon", price: "₹120", image: "http://img.b2bpic.net/free-photo/glass-iced-tea-with-lemon-mint_1203-7883.jpg"},
|
|
|
|
id: "2", category: "Beverages", name: "Iced Tea", description: "Refreshing homemade iced tea with lemon", price: "₹120", image: "http://img.b2bpic.net/free-photo/glass-iced-tea-with-lemon-mint_1203-7883.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", category: "Beverages", name: "Masala Chai", description: "Traditional Indian chai with aromatic spices", price: "₹80", image: "http://img.b2bpic.net/free-photo/cup-tea-with-spices_1203-4885.jpg"},
|
|
|
|
id: "3", category: "Beverages", name: "Masala Chai", description: "Traditional Indian chai with aromatic spices", price: "₹80", image: "http://img.b2bpic.net/free-photo/cup-tea-with-spices_1203-4885.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "4", category: "Beverages", name: "Hot Coffee", description: "Premium espresso with steamed milk", price: "₹130", image: "http://img.b2bpic.net/free-photo/top-view-coffee-with-milk-beans_23-2149255391.jpg"},
|
|
|
|
id: "4", category: "Beverages", name: "Hot Coffee", description: "Premium espresso with steamed milk", price: "₹130", image: "http://img.b2bpic.net/free-photo/top-view-coffee-with-milk-beans_23-2149255391.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "5", category: "Breakfast", name: "Paneer Paratha", description: "Soft paratha stuffed with cottage cheese", price: "₹140", image: "http://img.b2bpic.net/free-photo/indian-flatbread-paratha_1203-4520.jpg"},
|
|
|
|
id: "5", category: "Breakfast", name: "Paneer Paratha", description: "Soft paratha stuffed with cottage cheese", price: "₹140", image: "http://img.b2bpic.net/free-photo/indian-flatbread-paratha_1203-4520.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "6", category: "Breakfast", name: "Eggs Benedict", description: "Toasted bread with poached eggs and hollandaise", price: "₹180", image: "http://img.b2bpic.net/free-photo/eggs-benedict-toast_1203-4521.jpg"},
|
|
|
|
id: "6", category: "Breakfast", name: "Eggs Benedict", description: "Toasted bread with poached eggs and hollandaise", price: "₹180", image: "http://img.b2bpic.net/free-photo/eggs-benedict-toast_1203-4521.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "7", category: "Breakfast", name: "French Toast", description: "Crispy bread with maple syrup and berries", price: "₹160", image: "http://img.b2bpic.net/free-photo/french-toast-with-berries_1203-4522.jpg"},
|
|
|
|
id: "7", category: "Breakfast", name: "French Toast", description: "Crispy bread with maple syrup and berries", price: "₹160", image: "http://img.b2bpic.net/free-photo/french-toast-with-berries_1203-4522.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "8", category: "Breakfast", name: "Chur Chur Naan", description: "Crispy layered naan with butter and spices", price: "₹180", image: "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg"},
|
|
|
|
id: "8", category: "Breakfast", name: "Chur Chur Naan", description: "Crispy layered naan with butter and spices", price: "₹180", image: "http://img.b2bpic.net/free-photo/delicious-composition-traditional-roti_23-2149034026.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "9", category: "Appetizers", name: "Paneer Tikka", description: "Marinated cottage cheese grilled to perfection", price: "₹220", image: "http://img.b2bpic.net/free-photo/paneer-tikka-skewers_1203-4523.jpg"},
|
|
|
|
id: "9", category: "Appetizers", name: "Paneer Tikka", description: "Marinated cottage cheese grilled to perfection", price: "₹220", image: "http://img.b2bpic.net/free-photo/paneer-tikka-skewers_1203-4523.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "10", category: "Appetizers", name: "Chicken Wings", description: "Spiced chicken wings with tangy sauce", price: "₹240", image: "http://img.b2bpic.net/free-photo/grilled-chicken-wings_1203-4524.jpg"},
|
|
|
|
id: "10", category: "Appetizers", name: "Chicken Wings", description: "Spiced chicken wings with tangy sauce", price: "₹240", image: "http://img.b2bpic.net/free-photo/grilled-chicken-wings_1203-4524.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "11", category: "Appetizers", name: "Cigar Rolls", description: "Crispy spring rolls with vegetable filling", price: "₹120", image: "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg"},
|
|
|
|
id: "11", category: "Appetizers", name: "Cigar Rolls", description: "Crispy spring rolls with vegetable filling", price: "₹120", image: "http://img.b2bpic.net/free-photo/egg-roll-fried-spring-rolls-white-plate-thai-food-top-view_1150-21489.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "12", category: "Appetizers", name: "Garlic Bread", description: "Toasted bread with garlic butter and herbs", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-bread-plate_1203-4525.jpg"},
|
|
|
|
id: "12", category: "Appetizers", name: "Garlic Bread", description: "Toasted bread with garlic butter and herbs", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-bread-plate_1203-4525.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "13", category: "Burgers", name: "Classic Burger", description: "Beef patty with cheese, lettuce, and special sauce", price: "₹220", image: "http://img.b2bpic.net/free-photo/delicious-burger-wooden-table_23-2149246644.jpg"},
|
|
|
|
id: "13", category: "Burgers", name: "Classic Burger", description: "Beef patty with cheese, lettuce, and special sauce", price: "₹220", image: "http://img.b2bpic.net/free-photo/delicious-burger-wooden-table_23-2149246644.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "14", category: "Burgers", name: "Paneer Burger", description: "Grilled paneer with tomato and cucumber", price: "₹200", image: "http://img.b2bpic.net/free-photo/paneer-burger_1203-4526.jpg"},
|
|
|
|
id: "14", category: "Burgers", name: "Paneer Burger", description: "Grilled paneer with tomato and cucumber", price: "₹200", image: "http://img.b2bpic.net/free-photo/paneer-burger_1203-4526.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "15", category: "Burgers", name: "Chicken Burger", description: "Spiced chicken patty with coleslaw", price: "₹210", image: "http://img.b2bpic.net/free-photo/chicken-burger_1203-4527.jpg"},
|
|
|
|
id: "15", category: "Burgers", name: "Chicken Burger", description: "Spiced chicken patty with coleslaw", price: "₹210", image: "http://img.b2bpic.net/free-photo/chicken-burger_1203-4527.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "16", category: "Pizzas", name: "Margherita Pizza", description: "Tomato, mozzarella, fresh basil", price: "₹280", image: "http://img.b2bpic.net/free-photo/margherita-pizza-with-basil_1203-4528.jpg"},
|
|
|
|
id: "16", category: "Pizzas", name: "Margherita Pizza", description: "Tomato, mozzarella, fresh basil", price: "₹280", image: "http://img.b2bpic.net/free-photo/margherita-pizza-with-basil_1203-4528.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "17", category: "Pizzas", name: "Pepperoni Pizza", description: "Classic pepperoni with mozzarella cheese", price: "₹300", image: "http://img.b2bpic.net/free-photo/pepperoni-pizza_1203-4529.jpg"},
|
|
|
|
id: "17", category: "Pizzas", name: "Pepperoni Pizza", description: "Classic pepperoni with mozzarella cheese", price: "₹300", image: "http://img.b2bpic.net/free-photo/pepperoni-pizza_1203-4529.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "18", category: "Pizzas", name: "Paneer Pizza", description: "Cottage cheese with onion and capsicum", price: "₹290", image: "http://img.b2bpic.net/free-photo/paneer-pizza_1203-4530.jpg"},
|
|
|
|
id: "18", category: "Pizzas", name: "Paneer Pizza", description: "Cottage cheese with onion and capsicum", price: "₹290", image: "http://img.b2bpic.net/free-photo/paneer-pizza_1203-4530.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "19", category: "Pizzas", name: "Special Pizza", description: "Mixed vegetables and sausage", price: "₹320", image: "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg"},
|
|
|
|
id: "19", category: "Pizzas", name: "Special Pizza", description: "Mixed vegetables and sausage", price: "₹320", image: "http://img.b2bpic.net/free-photo/mixed-pizza-with-sausages-tomato_140725-3789.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "20", category: "Wraps", name: "Chicken Wrap", description: "Grilled chicken with fresh vegetables", price: "₹180", image: "http://img.b2bpic.net/free-photo/chicken-wrap_1203-4531.jpg"},
|
|
|
|
id: "20", category: "Wraps", name: "Chicken Wrap", description: "Grilled chicken with fresh vegetables", price: "₹180", image: "http://img.b2bpic.net/free-photo/chicken-wrap_1203-4531.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "21", category: "Wraps", name: "Paneer Wrap", description: "Grilled paneer with mint and yogurt", price: "₹160", image: "http://img.b2bpic.net/free-photo/paneer-wrap_1203-4532.jpg"},
|
|
|
|
id: "21", category: "Wraps", name: "Paneer Wrap", description: "Grilled paneer with mint and yogurt", price: "₹160", image: "http://img.b2bpic.net/free-photo/paneer-wrap_1203-4532.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "22", category: "Wraps", name: "Veggie Wrap", description: "Mix of fresh vegetables and hummus", price: "₹140", image: "http://img.b2bpic.net/free-photo/veggie-wrap_1203-4533.jpg"},
|
|
|
|
id: "22", category: "Wraps", name: "Veggie Wrap", description: "Mix of fresh vegetables and hummus", price: "₹140", image: "http://img.b2bpic.net/free-photo/veggie-wrap_1203-4533.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "23", category: "Salads", name: "Caesar Salad", description: "Crisp lettuce with parmesan and croutons", price: "₹200", image: "http://img.b2bpic.net/free-photo/caesar-salad-plate_1203-4534.jpg"},
|
|
|
|
id: "23", category: "Salads", name: "Caesar Salad", description: "Crisp lettuce with parmesan and croutons", price: "₹200", image: "http://img.b2bpic.net/free-photo/caesar-salad-plate_1203-4534.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "24", category: "Salads", name: "Caprese Salad", description: "Tomato, mozzarella, basil with olive oil", price: "₹220", image: "http://img.b2bpic.net/free-photo/caprese-salad_1203-4535.jpg"},
|
|
|
|
id: "24", category: "Salads", name: "Caprese Salad", description: "Tomato, mozzarella, basil with olive oil", price: "₹220", image: "http://img.b2bpic.net/free-photo/caprese-salad_1203-4535.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "25", category: "Salads", name: "Greek Salad", description: "Feta cheese, olives, cucumbers and tomatoes", price: "₹210", image: "http://img.b2bpic.net/free-photo/greek-salad_1203-4536.jpg"},
|
|
|
|
id: "25", category: "Salads", name: "Greek Salad", description: "Feta cheese, olives, cucumbers and tomatoes", price: "₹210", image: "http://img.b2bpic.net/free-photo/greek-salad_1203-4536.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "26", category: "Mains", name: "Butter Chicken", description: "Tender chicken in creamy tomato sauce", price: "₹320", image: "http://img.b2bpic.net/free-photo/butter-chicken-curry_1203-4537.jpg"},
|
|
|
|
id: "26", category: "Mains", name: "Butter Chicken", description: "Tender chicken in creamy tomato sauce", price: "₹320", image: "http://img.b2bpic.net/free-photo/butter-chicken-curry_1203-4537.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "27", category: "Mains", name: "Paneer Tikka Masala", description: "Grilled paneer in aromatic tomato cream sauce", price: "₹300", image: "http://img.b2bpic.net/free-photo/paneer-tikka-masala_1203-4538.jpg"},
|
|
|
|
id: "27", category: "Mains", name: "Paneer Tikka Masala", description: "Grilled paneer in aromatic tomato cream sauce", price: "₹300", image: "http://img.b2bpic.net/free-photo/paneer-tikka-masala_1203-4538.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "28", category: "Mains", name: "Chicken Biryani", description: "Fragrant basmati rice with spiced chicken", price: "₹340", image: "http://img.b2bpic.net/free-photo/chicken-biryani_1203-4539.jpg"},
|
|
|
|
id: "28", category: "Mains", name: "Chicken Biryani", description: "Fragrant basmati rice with spiced chicken", price: "₹340", image: "http://img.b2bpic.net/free-photo/chicken-biryani_1203-4539.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "29", category: "Naans", name: "Plain Naan", description: "Soft tandoori-baked naan bread", price: "₹80", image: "http://img.b2bpic.net/free-photo/plain-naan-bread_1203-4540.jpg"},
|
|
|
|
id: "29", category: "Naans", name: "Plain Naan", description: "Soft tandoori-baked naan bread", price: "₹80", image: "http://img.b2bpic.net/free-photo/plain-naan-bread_1203-4540.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "30", category: "Naans", name: "Garlic Naan", description: "Naan infused with fresh garlic", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-naan_1203-4541.jpg"},
|
|
|
|
id: "30", category: "Naans", name: "Garlic Naan", description: "Naan infused with fresh garlic", price: "₹100", image: "http://img.b2bpic.net/free-photo/garlic-naan_1203-4541.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "31", category: "Naans", name: "Paneer Naan", description: "Soft naan stuffed with spiced paneer", price: "₹140", image: "http://img.b2bpic.net/free-photo/paneer-naan_1203-4542.jpg"},
|
|
|
|
id: "31", category: "Naans", name: "Paneer Naan", description: "Soft naan stuffed with spiced paneer", price: "₹140", image: "http://img.b2bpic.net/free-photo/paneer-naan_1203-4542.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "32", category: "Breads", name: "Roti", description: "Traditional Indian whole wheat bread", price: "₹30", image: "http://img.b2bpic.net/free-photo/indian-roti-bread_1203-4543.jpg"},
|
|
|
|
id: "32", category: "Breads", name: "Roti", description: "Traditional Indian whole wheat bread", price: "₹30", image: "http://img.b2bpic.net/free-photo/indian-roti-bread_1203-4543.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "33", category: "Breads", name: "Paratha", description: "Layered flatbread with butter", price: "₹60", image: "http://img.b2bpic.net/free-photo/indian-paratha_1203-4544.jpg"},
|
|
|
|
id: "33", category: "Breads", name: "Paratha", description: "Layered flatbread with butter", price: "₹60", image: "http://img.b2bpic.net/free-photo/indian-paratha_1203-4544.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "34", category: "Desserts", name: "Gulab Jamun", description: "Sweet dumplings in sugar syrup", price: "₹120", image: "http://img.b2bpic.net/free-photo/gulab-jamun_1203-4545.jpg"},
|
|
|
|
id: "34", category: "Desserts", name: "Gulab Jamun", description: "Sweet dumplings in sugar syrup", price: "₹120", image: "http://img.b2bpic.net/free-photo/gulab-jamun_1203-4545.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "35", category: "Desserts", name: "Chocolate Cake", description: "Rich chocolate cake with frosting", price: "₹150", image: "http://img.b2bpic.net/free-photo/chocolate-cake-slice_1203-4546.jpg"},
|
|
|
|
id: "35", category: "Desserts", name: "Chocolate Cake", description: "Rich chocolate cake with frosting", price: "₹150", image: "http://img.b2bpic.net/free-photo/chocolate-cake-slice_1203-4546.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "36", category: "Desserts", name: "Ice Cream", description: "Vanilla or chocolate ice cream", price: "₹100", image: "http://img.b2bpic.net/free-photo/ice-cream-bowl_1203-4547.jpg"},
|
|
|
|
id: "36", category: "Desserts", name: "Ice Cream", description: "Vanilla or chocolate ice cream", price: "₹100", image: "http://img.b2bpic.net/free-photo/ice-cream-bowl_1203-4547.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "37", category: "Shakes", name: "Chocolate Shake", description: "Creamy chocolate milkshake", price: "₹140", image: "http://img.b2bpic.net/free-photo/chocolate-milkshake_1203-4548.jpg"},
|
|
|
|
id: "37", category: "Shakes", name: "Chocolate Shake", description: "Creamy chocolate milkshake", price: "₹140", image: "http://img.b2bpic.net/free-photo/chocolate-milkshake_1203-4548.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "38", category: "Shakes", name: "Vanilla Shake", description: "Smooth vanilla milkshake", price: "₹130", image: "http://img.b2bpic.net/free-photo/vanilla-milkshake_1203-4549.jpg"},
|
|
|
|
id: "38", category: "Shakes", name: "Vanilla Shake", description: "Smooth vanilla milkshake", price: "₹130", image: "http://img.b2bpic.net/free-photo/vanilla-milkshake_1203-4549.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "39", category: "Shakes", name: "Strawberry Shake", description: "Fresh strawberry milkshake", price: "₹150", image: "http://img.b2bpic.net/free-photo/strawberry-milkshake_1203-4550.jpg"},
|
|
|
|
id: "39", category: "Shakes", name: "Strawberry Shake", description: "Fresh strawberry milkshake", price: "₹150", image: "http://img.b2bpic.net/free-photo/strawberry-milkshake_1203-4550.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "40", category: "Smoothies", name: "Mango Smoothie", description: "Blended mango with yogurt", price: "₹140", image: "http://img.b2bpic.net/free-photo/mango-smoothie_1203-4551.jpg"},
|
|
|
|
id: "40", category: "Smoothies", name: "Mango Smoothie", description: "Blended mango with yogurt", price: "₹140", image: "http://img.b2bpic.net/free-photo/mango-smoothie_1203-4551.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "41", category: "Smoothies", name: "Berry Smoothie", description: "Mixed berries with yogurt", price: "₹150", image: "http://img.b2bpic.net/free-photo/berry-smoothie_1203-4552.jpg"},
|
|
|
|
id: "41", category: "Smoothies", name: "Berry Smoothie", description: "Mixed berries with yogurt", price: "₹150", image: "http://img.b2bpic.net/free-photo/berry-smoothie_1203-4552.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "42", category: "Smoothies", name: "Banana Smoothie", description: "Banana with milk and honey", price: "₹120", image: "http://img.b2bpic.net/free-photo/banana-smoothie_1203-4553.jpg"},
|
|
|
|
id: "42", category: "Smoothies", name: "Banana Smoothie", description: "Banana with milk and honey", price: "₹120", image: "http://img.b2bpic.net/free-photo/banana-smoothie_1203-4553.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "43", category: "Mocktails", name: "Mojito", description: "Refreshing mint and lime mocktail", price: "₹180", image: "http://img.b2bpic.net/free-photo/mojito-drink_1203-4554.jpg"},
|
|
|
|
id: "43", category: "Mocktails", name: "Mojito", description: "Refreshing mint and lime mocktail", price: "₹180", image: "http://img.b2bpic.net/free-photo/mojito-drink_1203-4554.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "44", category: "Mocktails", name: "Virgin Pina Colada", description: "Tropical coconut and pineapple drink", price: "₹190", image: "http://img.b2bpic.net/free-photo/pina-colada_1203-4555.jpg"},
|
|
|
|
id: "44", category: "Mocktails", name: "Virgin Pina Colada", description: "Tropical coconut and pineapple drink", price: "₹190", image: "http://img.b2bpic.net/free-photo/pina-colada_1203-4555.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "45", category: "Mocktails", name: "Lemonade", description: "Fresh homemade lemonade", price: "₹100", image: "http://img.b2bpic.net/free-photo/lemonade-glass_1203-4556.jpg"},
|
|
|
|
id: "45", category: "Mocktails", name: "Lemonade", description: "Fresh homemade lemonade", price: "₹100", image: "http://img.b2bpic.net/free-photo/lemonade-glass_1203-4556.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "46", category: "Specials", name: "Signature Bowl", description: "Chef's special fusion bowl", price: "₹280", image: "http://img.b2bpic.net/free-photo/food-bowl_1203-4557.jpg"},
|
|
|
|
id: "46", category: "Specials", name: "Signature Bowl", description: "Chef's special fusion bowl", price: "₹280", image: "http://img.b2bpic.net/free-photo/food-bowl_1203-4557.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "47", category: "Specials", name: "Loaded Nachos", description: "Crispy nachos with cheese and toppings", price: "₹240", image: "http://img.b2bpic.net/free-photo/loaded-nachos_1203-4558.jpg"},
|
|
|
|
id: "47", category: "Specials", name: "Loaded Nachos", description: "Crispy nachos with cheese and toppings", price: "₹240", image: "http://img.b2bpic.net/free-photo/loaded-nachos_1203-4558.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "48", category: "Specials", name: "Truffle Fries", description: "Crispy fries with truffle oil and parmesan", price: "₹220", image: "http://img.b2bpic.net/free-photo/truffle-fries_1203-4559.jpg"},
|
|
|
|
id: "48", category: "Specials", name: "Truffle Fries", description: "Crispy fries with truffle oil and parmesan", price: "₹220", image: "http://img.b2bpic.net/free-photo/truffle-fries_1203-4559.jpg"
|
|
|
|
|
|
|
|
},
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
export default function MenuPage() {
|
|
|
|
export default function MenuPage() {
|
|
|
|
const [activeCategory, setActiveCategory] = useState("Beverages");
|
|
|
|
const [activeCategory, setActiveCategory] = useState("Beverages");
|
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
const [filteredItems, setFilteredItems] = useState<MenuItem[]>([]);
|
|
|
|
const [filteredItems, setFilteredItems] = useState<MenuItem[]>([]);
|
|
|
|
const [scrollSpy, setScrollSpy] = useState("Beverages");
|
|
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
const categoryRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
const filtered = MENU_ITEMS.filter((item) => {
|
|
|
|
const filtered = MENU_ITEMS.filter((item) => {
|
|
|
|
@@ -134,6 +184,18 @@ export default function MenuPage() {
|
|
|
|
setFilteredItems(filtered);
|
|
|
|
setFilteredItems(filtered);
|
|
|
|
}, [activeCategory, searchQuery]);
|
|
|
|
}, [activeCategory, searchQuery]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Smooth scroll-spy navigation
|
|
|
|
|
|
|
|
const handleCategoryClick = (category: string) => {
|
|
|
|
|
|
|
|
setActiveCategory(category);
|
|
|
|
|
|
|
|
const element = categoryRefs.current[category];
|
|
|
|
|
|
|
|
if (element && contentRef.current) {
|
|
|
|
|
|
|
|
const topOffset = element.offsetTop - contentRef.current.offsetTop;
|
|
|
|
|
|
|
|
contentRef.current.scrollTo({
|
|
|
|
|
|
|
|
top: topOffset,
|
|
|
|
|
|
|
|
behavior: "smooth"});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ThemeProvider
|
|
|
|
<ThemeProvider
|
|
|
|
defaultButtonVariant="elastic-effect"
|
|
|
|
defaultButtonVariant="elastic-effect"
|
|
|
|
@@ -158,7 +220,8 @@ export default function MenuPage() {
|
|
|
|
{ name: "Contact", id: "/#contact" },
|
|
|
|
{ name: "Contact", id: "/#contact" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
button={{
|
|
|
|
button={{
|
|
|
|
text: "Reserve Table", href: "/#contact"}}
|
|
|
|
text: "Reserve Table", href: "/#contact"
|
|
|
|
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -197,14 +260,35 @@ export default function MenuPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Mobile Horizontal Tabs */}
|
|
|
|
|
|
|
|
<div className="lg:hidden mb-8 px-4 overflow-x-auto">
|
|
|
|
|
|
|
|
<div className="flex gap-2 pb-2">
|
|
|
|
|
|
|
|
{MENU_CATEGORIES.map((category) => (
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
key={category}
|
|
|
|
|
|
|
|
onClick={() => handleCategoryClick(category)}
|
|
|
|
|
|
|
|
className={`px-4 py-2 rounded-full font-semibold whitespace-nowrap transition-all duration-300 ${
|
|
|
|
|
|
|
|
activeCategory === category
|
|
|
|
|
|
|
|
? "scale-110 shadow-lg"
|
|
|
|
|
|
|
|
: "opacity-70 hover:opacity-100"
|
|
|
|
|
|
|
|
}`}
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
color: activeCategory === category ? "var(--primary-cta-text)" : "var(--foreground)", backgroundColor: activeCategory === category ? "var(--primary-cta)" : "var(--card)"}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{category}
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Main Content */}
|
|
|
|
{/* Main Content */}
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8 px-4 max-w-7xl mx-auto">
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8 px-4 max-w-7xl mx-auto">
|
|
|
|
{/* Left Sidebar Navigation */}
|
|
|
|
{/* Left Sidebar Navigation - Desktop Only */}
|
|
|
|
<div className="lg:w-48 flex-shrink-0">
|
|
|
|
<div className="hidden lg:block lg:w-48 flex-shrink-0">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
className="sticky top-32 rounded-xl p-4"
|
|
|
|
className="sticky top-32 rounded-xl p-4 border-2"
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
backgroundColor: "var(--card)"}}
|
|
|
|
backgroundColor: "var(--card)", borderColor: "var(--background-accent)"}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<h3 className="font-bold text-lg mb-4" style={{ color: "var(--foreground)" }}>
|
|
|
|
<h3 className="font-bold text-lg mb-4" style={{ color: "var(--foreground)" }}>
|
|
|
|
Categories
|
|
|
|
Categories
|
|
|
|
@@ -213,10 +297,10 @@ export default function MenuPage() {
|
|
|
|
{MENU_CATEGORIES.map((category) => (
|
|
|
|
{MENU_CATEGORIES.map((category) => (
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
key={category}
|
|
|
|
key={category}
|
|
|
|
onClick={() => setActiveCategory(category)}
|
|
|
|
onClick={() => handleCategoryClick(category)}
|
|
|
|
className={`w-full text-left px-3 py-2 rounded-lg transition-all duration-300 ${
|
|
|
|
className={`w-full text-left px-3 py-2 rounded-lg transition-all duration-300 ${
|
|
|
|
activeCategory === category
|
|
|
|
activeCategory === category
|
|
|
|
? "font-bold scale-105"
|
|
|
|
? "font-bold scale-105 shadow-md"
|
|
|
|
: "hover:opacity-70"
|
|
|
|
: "hover:opacity-70"
|
|
|
|
}`}
|
|
|
|
}`}
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
@@ -230,12 +314,15 @@ export default function MenuPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* Right Content Area */}
|
|
|
|
{/* Right Content Area */}
|
|
|
|
<div className="flex-1">
|
|
|
|
<div className="flex-1" ref={contentRef}>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
{filteredItems.map((item, index) => (
|
|
|
|
{filteredItems.map((item, index) => (
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
key={item.id}
|
|
|
|
key={item.id}
|
|
|
|
className="rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105 animate-fade-in"
|
|
|
|
ref={(el) => {
|
|
|
|
|
|
|
|
if (el) categoryRefs.current[item.category] = el;
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
className="rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105 animate-fade-in-slide-up"
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
backgroundColor: "var(--card)", animationDelay: `${index * 0.1}s`,
|
|
|
|
backgroundColor: "var(--card)", animationDelay: `${index * 0.1}s`,
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@@ -301,7 +388,7 @@ export default function MenuPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style jsx>{`
|
|
|
|
<style jsx>{`
|
|
|
|
@keyframes fadeIn {
|
|
|
|
@keyframes fadeInSlideUp {
|
|
|
|
from {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(20px);
|
|
|
|
transform: translateY(20px);
|
|
|
|
@@ -312,8 +399,8 @@ export default function MenuPage() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.animate-fade-in {
|
|
|
|
.animate-fade-in-slide-up {
|
|
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
|
|
animation: fadeInSlideUp 0.6s ease-out forwards;
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
