fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix mobile tabs

Browse source
This commit is contained in:
fred 2025-08-07 11:57:11 -07:00
parent 2da4c0aa12
commit fdaf4cff1f
4 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/RecipeBookTabs.tsx
View file

@ -35,9 +35,9 @@ const RecipeBookTabs = () => {
const tabs = [
{ id: '/', label: 'All Recipes', icon: '📚' },
{ id: '/', label: 'Cookbook', icon: '📚' },
{ id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
{ id: '/add-recipe', label: 'Add', icon: '➕' },
{ id: '/about', label: 'About', icon: '🍽️' },
];
@ -55,7 +55,7 @@ const RecipeBookTabs = () => {
key={tab.id}
to={tab.id}
className={`
relative px-6 py-3 rounded-t-lg font-bold text-sm transform text-amber-800
relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
${isActive
? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
: 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
@ -64,21 +64,23 @@ const RecipeBookTabs = () => {
${isActive ? '' : ''}
`}
>
<div className="flex items-center space-x-2">
<span className="text-lg">{tab.icon}</span>
<div className="flex items-center">
<span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
<span>{tab.label}</span>
</div>
{isActive && (
<>
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
</div>
<div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
</div>
</>
)}
{
isActive && (
<>
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
</div>
<div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
</div>
</>
)
}
</Link>
);
})}