Skip to content

Add missing home link in mobile view in navigation bar #1330

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
MrgSub merged 6 commits into from
Jun 20, 2025
Merged

Add missing home link in mobile view in navigation bar #1330

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4b9cea
add missing home link in mobile view in navigation bar
kartik-212004 Jun 17, 2025
9f4e0ff
fix: close mobile drawer on link click and replace anchor tags with Link
kartik-212004 Jun 17, 2025
9329bb0
Merge branch 'staging' into bug/navbar-home-link
kartik-212004 Jun 17, 2025
64a4cf5
resolved merge conflicts
kartik-212004 Jun 17, 2025
0045219
Merge branch 'staging' into bug/navbar-home-link
kartik-212004 Jun 18, 2025
22e1a7e
Merge branch 'staging' into bug/navbar-home-link
kartik-212004 Jun 18, 2025
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
59 changes: 36 additions & 23 deletions apps/mail/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import { GitHub, Twitter, Discord, LinkedIn, Star } from './icons/icons';
import { AnimatedNumber } from '@/components/ui/animated-number';
import { signIn, useSession } from '@/lib/auth-client';
import { Separator } from '@/components/ui/separator';
import { useQuery } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router';
import { Button } from '@/components/ui/button';
import { Menu } from 'lucide-react';
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Menu } from 'lucide-react';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';

const resources = [
{
Expand Down Expand Up @@ -92,7 +92,7 @@ export function Navigation() {
queryFn: async () => {
const response = await fetch('https://api.github.com/repos/Mail-0/Zero', {
headers: {
'Accept': 'application/vnd.github.v3+json',
Accept: 'application/vnd.github.v3+json',
},
});
if (!response.ok) {
Expand Down Expand Up @@ -123,7 +123,9 @@ export function Navigation() {
<NavigationMenu>
<NavigationMenuList className="gap-1">
<NavigationMenuItem>
<NavigationMenuTrigger className='bg-transparent text-white'>Company</NavigationMenuTrigger>
<NavigationMenuTrigger className="bg-transparent text-white">
Company
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-1 lg:w-[600px]">
{aboutLinks.map((link) => (
Expand All @@ -135,7 +137,9 @@ export function Navigation() {
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger className='bg-transparent text-white'>Resources</NavigationMenuTrigger>
<NavigationMenuTrigger className="bg-transparent text-white">
Resources
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{resources.map((resource) => (
Expand All @@ -151,7 +155,7 @@ export function Navigation() {
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem className='bg-transparent text-white'>
<NavigationMenuItem className="bg-transparent text-white">
<a href="/pricing">
<Button variant="ghost" className="h-9 bg-transparent">
Pricing
Expand All @@ -167,20 +171,17 @@ export function Navigation() {
target="_blank"
rel="noopener noreferrer"
className={cn(
"h-8 inline-flex items-center gap-2 rounded-lg bg-black px-3 text-sm text-white hover:bg-black/90 transition-colors group"
'group inline-flex h-8 items-center gap-2 rounded-lg bg-black px-3 text-sm text-white transition-colors hover:bg-black/90',
)}
>
<div className="flex items-center text-white">
<GitHub className="size-4 fill-white mr-1" />
<GitHub className="mr-1 size-4 fill-white" />
<span className="ml-1 lg:hidden">Star</span>
<span className="ml-1 hidden lg:inline">Stars on GitHub</span>
</div>
<div className="flex items-center gap-1 text-sm">
<Star className="size-4 fill-gray-400 transition-all duration-300 group-hover:fill-yellow-400 group-hover:drop-shadow-[0_0_8px_rgba(250,204,21,0.6)] relative top-[1px]" />
<AnimatedNumber
value={stars}
className="font-medium text-white"
/>
<Star className="relative top-[1px] size-4 fill-gray-400 transition-all duration-300 group-hover:fill-yellow-400 group-hover:drop-shadow-[0_0_8px_rgba(250,204,21,0.6)]" />
<AnimatedNumber value={stars} className="font-medium text-white" />
</div>
</a>
<Button
Expand Down Expand Up @@ -215,23 +216,35 @@ export function Navigation() {
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-[300px] dark:bg-[#111111] sm:w-[400px]">
<SheetContent side="left" className="w-[300px] sm:w-[400px] dark:bg-[#111111]">
<SheetHeader className="flex flex-row items-center justify-between">
<SheetTitle>
<img src="white-icon.svg" alt="Zero Email" className='hidden object-contain dark:block' width={22} height={22} />
<img
src="/black-icon.svg"
alt="0.email Logo"
className="object-contain dark:hidden"
width={22} height={22}
/>
<Link to="/" onClick={() => setOpen(false)}>
<img
src="white-icon.svg"
alt="Zero Email"
className="hidden object-contain dark:block"
width={22}
height={22}
/>
<img
src="/black-icon.svg"
alt="0.email Logo"
className="object-contain dark:hidden"
width={22}
height={22}
/>
</Link>
</SheetTitle>
<a href="/login">
<Button className="w-full">Sign in</Button>
</a>
</SheetHeader>
<div className="mt-8 flex flex-col space-y-3">
<div className="space-y-3 flex flex-col">
<div className="flex flex-col space-y-3">
<Link to="/" className="mt-2" onClick={() => setOpen(false)}>
Home
</Link>
<Link to="/pricing" className="mt-2">
Pricing
</Link>
Expand Down