Skip to content

fix(navbar): align mobile sidebar typography for Solutions and Resources #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ferranrego merged 1 commit into from
Apr 23, 2026
Merged

fix(navbar): align mobile sidebar typography for Solutions and Resources #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const linkVariants = cva('transition-colors', {
navbarItem:
'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
navbarMobile: 'text-sm text-muted-foreground hover:text-foreground py-2 block',
navbarStatic: 'text-sm font-medium hover:text-primary transition-colors py-2 border-b border-border/40 block',
navbarStatic: 'text-sm font-medium hover:text-primary transition-colors py-3 border-b border-border/40 block',
footerNav: 'text-sm text-muted-foreground hover:text-foreground transition-colors',
footerLegal: 'text-muted-foreground hover:text-foreground transition-colors',
heroBadge:
Expand Down
24 changes: 14 additions & 10 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,13 @@ export function Navbar() {
{/* Logo */}
<div className='pointer-events'>
<Link href='/' variant='unstyled' aria-label={t('navbar.logo_aria_label', 'Vocdoni - go to homepage')}>
<VocdoniLogo minimal className='h-7 lg:hidden' aria-hidden='true' />
<VocdoniLogo className='hidden lg:block h-8' aria-hidden='true' />
<VocdoniLogo minimal className='h-7 xl:hidden' aria-hidden='true' />
<VocdoniLogo className='hidden xl:block h-8' aria-hidden='true' />
</Link>
</div>

{/* Desktop Navigation */}
<NavigationMenu className='hidden lg:flex min-w-max'>
<NavigationMenu className='hidden xl:flex min-w-max'>
<NavigationMenuList>
{/* Solutions (formerly Product) */}
<NavigationMenuItem>
Expand Down Expand Up @@ -243,7 +243,7 @@ export function Navbar() {
<div className='flex items-center gap-2'>
<LanguageSwitcher />
{/* Mobile Menu Trigger */}
<div className='lg:hidden'>
<div className='xl:hidden'>
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger asChild>
<Button variant='ghost' size='icon'>
Expand All @@ -262,8 +262,10 @@ export function Navbar() {
<div className='flex-1 overflow-auto py-6 px-4'>
<Accordion type='single' collapsible className='w-full'>
{/* Solutions (mobile) */}
<AccordionItem value='product'>
<AccordionTrigger className='text-sm font-medium'>{t('navbar.solutions')}</AccordionTrigger>
<AccordionItem value='product' className='border-border/40'>
<AccordionTrigger className='font-sans text-sm font-medium py-3 hover:text-primary hover:no-underline transition-colors'>
{t('navbar.solutions')}
</AccordionTrigger>
<AccordionContent>
<div className='flex flex-col space-y-2 pl-4'>
{/* Featured solution - mobile version */}
Expand Down Expand Up @@ -324,8 +326,10 @@ export function Navbar() {
</AccordionItem>

{/* Resources (mobile) */}
<AccordionItem value='resources'>
<AccordionTrigger className='text-sm font-medium'>{t('navbar.resources')}</AccordionTrigger>
<AccordionItem value='resources' className='border-border/40'>
<AccordionTrigger className='font-sans text-sm font-medium py-3 hover:text-primary hover:no-underline transition-colors'>
{t('navbar.resources')}
</AccordionTrigger>
<AccordionContent>
<div className='flex flex-col space-y-2 pl-4'>
{resourcesItems.map((item) => (
Expand All @@ -346,7 +350,7 @@ export function Navbar() {
</Accordion>

{/* Static Links */}
<div className='mt-4 flex flex-col space-y-4'>
<div className='flex flex-col'>
<Link href='/use-cases' variant='navbarStatic' onClick={() => setIsOpen(false)}>
{t('navbar.use_cases')}
</Link>
Expand Down Expand Up @@ -388,7 +392,7 @@ export function Navbar() {
</div>

{/* App Button (hidden on mobile) */}
<div className='hidden lg:block'>
<div className='hidden xl:block'>
<Button asChild className='rounded-full px-6'>
<Link href='https://app.vocdoni.io' target='_blank' rel='noopener noreferrer' variant='unstyled'>
{t('navbar.app_button')}
Expand Down
Loading