Circular Navbar

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2import { Button } from "@/components/ui/button";
3import { Bell, Home, Search, Settings } from "lucide-react";
4 
5export default function CircularNavbar() {
6  return (
7    // add fixed  to the nav class name to make the navbar stick to the bottom of the screen
8    <nav className=" bottom-0 left-0 right-0 border-t bg-background p-4 backdrop-blur-xs">
9      <div className="container mx-auto flex items-center justify-between">
10        <Button size="icon" className="rounded-full" variant="ghost">
11          <Home className="h-6 w-6" />
12          <span className="sr-only">Home</span>
13        </Button>
14        <Button size="icon" className="rounded-full" variant="ghost">
15          <Search className="h-6 w-6" />
16          <span className="sr-only">Search</span>
17        </Button>
18        <Button
19          size="icon"
20          className="rounded-full bg-primary text-primary-foreground"
21        >
22          <Bell className="h-6 w-6" />
23          <span className="sr-only">Notifications</span>
24        </Button>
25        <Button size="icon" className="rounded-full" variant="ghost">
26          <Settings className="h-6 w-6" />
27          <span className="sr-only">Settings</span>
28        </Button>
29        <Avatar>
30          <AvatarImage src="/placeholder-user.jpg" alt="User" />
31          <AvatarFallback>U</AvatarFallback>
32        </Avatar>
33      </div>
34    </nav>
35  );
36}