feat: create navigation menu for 3bear design

This commit is contained in:
Nam Doan
2025-11-25 16:38:53 +07:00
parent f21a4251e3
commit f35fd8b09a
5 changed files with 331 additions and 44 deletions
+159 -43
View File
@@ -24,7 +24,7 @@
"className": ""
}
],
"className": "bg-[#009b93] text-white"
"className": "sticky top-0 z-20 bg-[#009b93] text-white"
}
}
},
@@ -55,79 +55,195 @@
},
"children": [
{
"DropdownMenus": {
"NavMenu": {
"props": {
"label": "Shop",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"className": "",
"data-testid": "nav-categories-link",
"isShowArrow": true
},
"children": [
"menuItems": [
{
"DropdownMenuItems": {
"props": {
"label": "All Categories",
"className": "hover:text-ui-fg-base",
"data-testid": "nav-all-categories-link"
"title": {
"text": "Categories",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Overnight Oats",
"href": "/categories/overnight-oats",
"className": "text-red-500"
},
{
"label": "Porridge",
"href": "/categories/porridge"
},
{
"label": "Cereals",
"href": "/categories/cereals"
},
{
"label": "Granola",
"href": "/categories/granola"
},
{
"label": "Glasses & Bowls",
"href": "/categories/glasses-bowls"
},
{
"label": "Oat Bars",
"href": "/categories/oat-bars"
},
{
"label": "Nut butters",
"href": "/categories/nut-butters"
}
}
]
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"data-testid": "nav-new-arrivals-link"
"title": {
"text": "Specials",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Advent calendar ✨",
"href": "/collections/advent-calendar"
},
{
"label": "Saver subscription",
"href": "/collections/saver-subscription"
},
{
"label": "bestseller",
"href": "/collections/bestseller"
},
{
"label": "New 🔥",
"href": "/collections/new"
},
{
"label": "Bluey Kidsrange",
"href": "/collections/bluey-kidsrange"
},
{
"label": "Value sets",
"href": "/collections/value-sets"
},
{
"label": "Sale",
"href": "/collections/sale"
}
}
]
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"data-testid": "nav-best-sellers-link"
"title": {
"text": "All products",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Shop all",
"href": "/store"
}
}
]
}
]
}
},
{
"DropdownMenus": {
"NavMenu": {
"props": {
"label": "About us",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"className": "",
"data-testid": "nav-categories-link",
"isShowArrow": true
},
"children": [
"menuItems": [
{
"DropdownMenuItems": {
"props": {
"label": "All Categories",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"data-testid": "nav-all-categories-link"
"title": {
"text": "About us",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Check",
"href": "/categories/overnight-oats",
"className": "text-red-500"
},
{
"label": "Porridge",
"href": "/categories/porridge"
},
{
"label": "Cereals",
"href": "/categories/cereals"
},
{
"label": "Granola",
"href": "/categories/granola"
},
{
"label": "Glasses & Bowls",
"href": "/categories/glasses-bowls"
},
{
"label": "Oat Bars",
"href": "/categories/oat-bars"
},
{
"label": "Nut butters",
"href": "/categories/nut-butters"
}
}
]
},
{
"DropdownMenuItems": {
"props": {
"label": "New Arrivals",
"className": "hover:text-ui-fg-base flex items-center gap-2",
"data-testid": "nav-new-arrivals-link"
"title": {
"text": "Specials",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Advent calendar ✨",
"href": "/collections/advent-calendar"
},
{
"label": "Saver subscription",
"href": "/collections/saver-subscription"
},
{
"label": "bestseller",
"href": "/collections/bestseller"
},
{
"label": "New 🔥",
"href": "/collections/new"
},
{
"label": "Bluey Kidsrange",
"href": "/collections/bluey-kidsrange"
},
{
"label": "Value sets",
"href": "/collections/value-sets"
},
{
"label": "Sale",
"href": "/collections/sale"
}
}
]
},
{
"DropdownMenuItems": {
"props": {
"label": "Best Sellers",
"className": "hover:text-ui-fg-base",
"data-testid": "nav-best-sellers-link"
"title": {
"text": "All products",
"className": "text-[#003F31] text-xl font-bold"
},
"links": [
{
"label": "Shop all",
"href": "/store"
}
}
]
}
]
}