Skip to content

Commit

Permalink
feat: UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@rflihxyz
rflihxyz committed Dec 24, 2024
1 parent 3989319 commit d8185bd
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 182 deletions.
163 changes: 55 additions & 108 deletions apps/webapp/src/components/Nav/main-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,127 +2,74 @@

import { BookOpen, ExternalLink, KeyRound, Scroll, Settings2, Share2, SquareGantt } from "lucide-react";
import { usePathname } from "next/navigation";
import { MouseEvent, ReactNode, useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { LucideIcon } from "lucide-react";

interface MainNavProps {
onLinkClick: (name: string) => void;
className: string;
}

interface NavLinkProps {
name: string;
content: ReactNode;
onClick: (name: string) => void;
isSelected: boolean;
interface NavItem {
title: string;
href: string;
icon: LucideIcon;
isExternal?: boolean;
href?: string;
}

export function NavLink({
name,
content,
onClick,
isSelected,
isExternal = false,
href = '#'
}: NavLinkProps): JSX.Element {
const navItemClassName = `group flex gap-1 items-center rounded-md px-2 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground cursor-pointer ${isSelected ? 'bg-accent' : 'transparent'
} transition-colors`;

function handleClick(e: MouseEvent<HTMLAnchorElement>): void {
if (!isExternal) {
e.preventDefault();
onClick(name);
}
const items: NavItem[] = [
{
title: "Connections",
href: "connections",
icon: Share2
},
{
title: "Events",
href: "events",
icon: Scroll
},
{
title: "Configuration",
href: "configuration",
icon: Settings2
},
{
title: "API Keys",
href: "api-keys",
icon: KeyRound
},
{
title: "Docs",
href: "https://docs.panora.dev/",
icon: BookOpen,
isExternal: true
}

return (
<a
href={isExternal ? href : '#'}
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined}
className={navItemClassName}
onClick={handleClick}
>
{content}
{isExternal && <ExternalLink className="w-4" />}
</a>
);
}
];

export function MainNav({
onLinkClick,
className,
onLinkClick,
...props
}: MainNavProps) {
const [selectedItem, setSelectedItem] = useState<string>("");
}: React.HTMLAttributes<HTMLElement> & {
onLinkClick: (page: string) => void;
}) {
const pathname = usePathname();

useEffect(() => {
setSelectedItem(pathname.substring(1))
}, [pathname])

return (
<nav
className={`grid items-start ${className}`}
{...props}
>
{navItems.map(({ name, content, isExternal, href }) => (
<NavLink
key={name}
name={name}
content={content}
onClick={onLinkClick}
isSelected={selectedItem === name}
isExternal={isExternal}
href={href}
/>
<nav className={cn("flex flex-col space-y-1", className)} {...props}>
{items.map((item) => (
<div
key={item.href}
onClick={() => onLinkClick(item.href)}
className={cn(
"flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer",
"transition-colors",
"hover:bg-accent hover:text-accent-foreground",
pathname === `/${item.href}`
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:text-primary"
)}
>
<item.icon className="mr-2 h-4 w-4" />
<span>{item.title}</span>
{item.isExternal && <ExternalLink className="ml-2 h-4 w-4" />}
</div>
))}
</nav>
);
}

const navItems: Omit<NavLinkProps, 'onClick' | 'isSelected'>[] = [
{
name: 'connections',
content: (
<>
Connections
</>
),
},
{
name: 'events',
content: (
<>
Events
</>
),
},
{
name: 'configuration',
content: (
<>
Configuration
</>
),
},
{
name: 'api-keys',
content: (
<>
API Keys
</>
),
},
{
name: 'docs',
content: (
<>
<p className="pr-2">Docs</p>
</>
),
isExternal: true,
href: "https://docs.panora.dev/",
},
];
132 changes: 58 additions & 74 deletions apps/webapp/src/components/RootLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,87 +63,71 @@ export const RootLayout = ({children}:{children:React.ReactNode}) => {

return (
<>
{/* <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
<nav className="h-14 flex items-center justify-between px-4">
<div className="hidden lg:block">
<div className="flex h-screen overflow-hidden">
<nav
className={cn(
"relative hidden h-screen border-r lg:block w-72",
"bg-muted/50"
)}
>
<div className='flex items-center justify-center min-w-full'>
<div className="hidden lg:block pt-5">
<Link href='/'>
{theme == "light" ? <img src="/logo-panora-black.png" className='w-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />}
{theme == "light" ?
<img src="/logo-panora-black.png" className='w-14' /> :
<img src="/logo-panora-white-hq.png" className='w-14' />
}
</Link>
</div>
<div className={cn("block lg:!hidden")}>
<SmallNav onLinkClick={handlePageChange} />
</div>
<div className="flex items-center gap-2">
<UserNav />
<ThemeToggle />
</div>
</nav>
</div> */}
<div className="flex h-screen overflow-hidden">

<nav
className={cn(`relative hidden h-screen border-r lg:block w-72`)}
>
<div className='flex items-center justify-center min-w-full'>
<div className="hidden lg:block pt-5">
<Link href='/'>
{theme == "light" ? <img src="/logo-panora-black.png" className='w-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />}
</Link>
</div>

</div>

<div className="space-y-4 py-4 pt-10">
<div className="px-3 py-2">
<div className="space-y-3">
<div className='flex gap-2 items-center'>
<TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/>
<div
className="cursor-pointer"
onClick={handleCopyRight}
>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button size="sm" variant="outline">{copiesProjectID ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
</svg>
) : (
<>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
</svg>
</>
)}
</Button>
</TooltipTrigger>
<TooltipContent>
<p className="text-sm">Copy Project ID</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<p className='text-xs cursor-default dark:text-gray-400 text-gray-950 font-semibold pt-5'>General</p>
<MainNav onLinkClick={handlePageChange} className=''/>
</div>

<div className="space-y-4 py-4 pt-10">
<div className="px-3 py-2">
<div className="space-y-3">
<div className='flex gap-2 items-center'>
<TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/>
<div
className="cursor-pointer"
onClick={handleCopyRight}
>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<Button size="sm" variant="outline">
{copiesProjectID ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff">
<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>
</svg>
) : (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
</svg>
)}
</Button>
</TooltipTrigger>
<TooltipContent>
<p className="text-sm">Copy Project ID</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<p className='text-xs cursor-default dark:text-gray-400 text-gray-950 font-semibold pt-5'>General</p>
<MainNav onLinkClick={handlePageChange} className=''/>
</div>

<div className='absolute bottom-0 left-0 w-full cursor-pointer'>
<UserNav/>
</div>
</nav>
<div className={cn("block lg:!hidden")}>
<SmallNav onLinkClick={handlePageChange} />
</div>
<main className="w-full overflow-y-scroll">{children}</main>
</div>

</div>
</>
<div className='absolute bottom-0 left-0 w-full cursor-pointer'>
<UserNav/>
</div>
</nav>

)

<div className={cn("block lg:!hidden")}>
<SmallNav onLinkClick={handlePageChange} />
</div>
<main className="w-full overflow-y-scroll">{children}</main>
</div>
</>
);
};

0 comments on commit d8185bd

Please sign in to comment.