pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-03 09:16:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

rearage top nav bar

Browse Source
This commit is contained in:
Milo Schwartz
2024-10-14 12:10:02 -04:00
parent 7a019ccd32
commit 23b98960cc
7 changed files with 92 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/[orgId]/components/Header.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
import { Badge } from "@app/components/ui/badge";
import { Button } from "@app/components/ui/button";
import {
DropdownMenu,
@@ -12,7 +11,14 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu";
import { Separator } from "@app/components/ui/separator";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@app/components/ui/select";
import Link from "next/link";
type HeaderProps = {
@@ -33,41 +39,14 @@ export default function Header({ email, orgName, name }: HeaderProps) {
return (
<>
<div className="flex items-center justify-between">
<div className="flex items-center">
<Badge variant="default" className="text-md font-bold">
{orgName}
</Badge>
<div className="hidden md:block">
<div className="flex items-center gap-4 ml-4">
<Link
href="/docs"
className="text-primary hover:text-primary"
>
Documentation
</Link>
<Link
href="/support"
className="text-primary hover:text-primary"
>
Support
</Link>
</div>
</div>
</div>
<div className="flex items-center gap-4">
{/* Make the text truncate on smaller screens */}
<span className="text-lg font-medium truncate max-w-[150px] md:max-w-none">
{name || email}
</span>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
variant="outline"
className="relative h-10 w-10 rounded-full"
>
<Avatar className="h-10 w-10">
<Avatar className="h-9 w-9">
<AvatarFallback>
{getInitials()}
</AvatarFallback>
@@ -76,7 +55,7 @@ export default function Header({ email, orgName, name }: HeaderProps) {
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56"
align="end"
align="start"
forceMount
>
<DropdownMenuLabel className="font-normal">
@@ -93,11 +72,46 @@ export default function Header({ email, orgName, name }: HeaderProps) {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<Link href="/profile"><DropdownMenuItem>Profile</DropdownMenuItem></Link>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<span className="truncate max-w-[150px] md:max-w-none">
{name || email}
</span>
</div>
<div className="flex items-center">
<div className="hidden md:block">
<div className="flex items-center gap-4 mr-4">
<Link
href="/docs"
className="text-muted-foreground hover:text-black"
>
Documentation
</Link>
<Link
href="/support"
className="text-muted-foreground hover:text-black"
>
Support
</Link>
</div>
</div>
<Select defaultValue={orgName}>
<SelectTrigger className="w-[100px] md:w-[180px]">
<SelectValue placeholder="Select an org" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value={orgName}>
{orgName}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
</div>
</>

4
src/app/[orgId]/components/TopbarNav.tsx
View File

@@ -40,8 +40,8 @@ export function TopbarNav({
className={cn(
"px-2 py-3 text-md",
pathname.startsWith(item.href.replace("{orgId}", orgId))
? "border-b-2 border-base-600 text-base-600"
: "hover:text-gray-600 text-base-400",
? "border-b-2 border-primary text-primary font-medium"
: "hover:text-primary text-muted-foreground font-medium",
"whitespace-nowrap",
disabled && "cursor-not-allowed",
)}