pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-05 02:06:41 +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",
)}

4
src/app/[orgId]/layout.tsx
View File

@@ -50,8 +50,8 @@ export default async function ConfigurationLaytout({
return (
<>
<div className="w-full bg-secondary border-b border-secondary mb-8 select-none sm:px-0 px-3">
<div className="container mx-auto flex flex-col content-between gap-4 pt-2">
<div className="w-full bg-neutral-100 border-b border-neutral-200 mb-6 select-none sm:px-0 px-3 pt-3">
<div className="container mx-auto flex flex-col content-between gap-4">
<Header email={user.email} orgName={params.orgId} />
<TopbarNav items={topNavItems} orgId={params.orgId} />
</div>

22
src/app/[orgId]/resources/[resourceId]/layout.tsx
View File

@@ -22,10 +22,6 @@ const sidebarNavItems = [
title: "Notifications",
href: "/{orgId}/resources/{resourceId}/notifications",
},
{
title: "Display",
href: "/{orgId}/resources/{resourceId}/display",
},
]
interface SettingsLayoutProps {
@@ -36,23 +32,7 @@ interface SettingsLayoutProps {
export default function SettingsLayout({ children, params }: SettingsLayoutProps) {
return (
<>
<div className="md:hidden">
<Image
src="/configuration/forms-light.png"
width={1280}
height={791}
alt="Forms"
className="block dark:hidden"
/>
<Image
src="/configuration/forms-dark.png"
width={1280}
height={791}
alt="Forms"
className="hidden dark:block"
/>
</div>
<div className="hidden space-y-6 p-10 pb-16 md:block">
<div>
<div className="space-y-0.5">
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
<p className="text-muted-foreground">

4
src/app/[orgId]/sites/[siteId]/layout.tsx
View File

@@ -55,7 +55,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
return null;
}
}
return (
<>
<div className="md:hidden">
@@ -74,7 +74,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
className="hidden dark:block"
/>
</div>
<div className="hidden space-y-6 p-10 pb-16 md:block">
<div className="hidden space-y-6 0 pb-16 md:block">
<div className="space-y-0.5">
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
<p className="text-muted-foreground">