first commit

apps/Frontend/src/components/layout/top-app-bar.tsx

@@ -0,0 +1,83 @@
+import { Bell, Menu, Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface TopAppBarProps {
+  toggleMobileMenu: () => void;
+}
+
+export function TopAppBar({ toggleMobileMenu }: TopAppBarProps) {
+  const { user, logoutMutation } = useAuth();
+
+  const handleLogout = () => {
+    logoutMutation.mutate();
+  };
+
+  const getInitials = (username: string) => {
+    return username.substring(0, 2).toUpperCase();
+  };
+
+  return (
+    <header className="bg-white shadow-sm z-10">
+      <div className="flex items-center justify-between h-16 px-4">
+        <div className="flex items-center">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="md:hidden mr-2" 
+            onClick={toggleMobileMenu}
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+          <h1 className="md:hidden text-lg font-medium text-primary">DentalConnect</h1>
+        </div>
+        
+        <div className="hidden md:flex md:flex-1 items-center justify-center">
+          {/* Search bar removed */}
+        </div>
+        
+        <div className="flex items-center space-x-3">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="relative p-0 h-9 w-9 rounded-full"
+          >
+            <Bell className="h-5 w-5" />
+            <span className="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
+          </Button>
+          
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="relative p-0 h-8 w-8 rounded-full">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src="" alt={user?.username} />
+                  <AvatarFallback className="bg-primary text-white">
+                    {user?.username ? getInitials(user.username) : "U"}
+                  </AvatarFallback>
+                </Avatar>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>{user?.username}</DropdownMenuItem>
+              <DropdownMenuItem>My Profile</DropdownMenuItem>
+              <DropdownMenuItem>Account Settings</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleLogout}>
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  );
+}