first commit
This commit is contained in:
83
apps/Frontend/src/components/layout/sidebar.tsx
Normal file
83
apps/Frontend/src/components/layout/sidebar.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { Search, LayoutDashboard, Users, Calendar, FileText, Settings } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SidebarProps {
|
||||
isMobileOpen: boolean;
|
||||
setIsMobileOpen: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
|
||||
const [location] = useLocation();
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
name: "Dashboard",
|
||||
path: "/",
|
||||
icon: <LayoutDashboard className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
name: "Appointments",
|
||||
path: "/appointments",
|
||||
icon: <Calendar className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
name: "Patients",
|
||||
path: "/patients",
|
||||
icon: <Users className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
name: "Reports",
|
||||
path: "/reports",
|
||||
icon: <FileText className="h-5 w-5" />,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
path: "/settings",
|
||||
icon: <Settings className="h-5 w-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-white w-64 border-r border-gray-200 shadow-sm z-10 fixed h-full md:static",
|
||||
isMobileOpen ? "block" : "hidden md:block"
|
||||
)}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200 flex items-center space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5 text-primary">
|
||||
<path d="M12 14c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3s3 1.35 3 3v6c0 1.65-1.35 3-3 3Z" />
|
||||
<path d="M19 14v-4a7 7 0 0 0-14 0v4" />
|
||||
<path d="M12 19c-5 0-8-2-9-5.5m18 0c-1 3.5-4 5.5-9 5.5Z" />
|
||||
</svg>
|
||||
<h1 className="text-lg font-medium text-primary">DentalConnect</h1>
|
||||
</div>
|
||||
|
||||
<div className="p-2">
|
||||
|
||||
<nav>
|
||||
{navItems.map((item) => (
|
||||
<div key={item.path}>
|
||||
<Link
|
||||
to={item.path}
|
||||
onClick={() => setIsMobileOpen(false)}
|
||||
>
|
||||
<div className={cn(
|
||||
"flex items-center space-x-3 p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer",
|
||||
location === item.path
|
||||
? "text-primary font-medium border-l-2 border-primary"
|
||||
: "text-gray-600 hover:bg-gray-100"
|
||||
)}>
|
||||
{item.icon}
|
||||
<span>{item.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
83
apps/Frontend/src/components/layout/top-app-bar.tsx
Normal file
83
apps/Frontend/src/components/layout/top-app-bar.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user