- {supporterData?.tier ? (
-
- ) : (
-
- {version && (
- <>
-
- v{version}
-
-
- )}
+
diff --git a/src/app/navigation.tsx b/src/app/navigation.tsx
new file mode 100644
index 0000000..91a1f52
--- /dev/null
+++ b/src/app/navigation.tsx
@@ -0,0 +1,64 @@
+import { SidebarNavItem } from "@app/components/SidebarNav";
+import {
+ Home,
+ Settings,
+ Users,
+ Link as LinkIcon,
+ Waypoints,
+ Combine
+} from "lucide-react";
+
+export const rootNavItems: SidebarNavItem[] = [
+ {
+ title: "Home",
+ href: "/"
+ // icon:
+ }
+];
+
+export const orgNavItems: SidebarNavItem[] = [
+ {
+ title: "Sites",
+ href: "/{orgId}/settings/sites"
+ // icon:
+ },
+ {
+ title: "Resources",
+ href: "/{orgId}/settings/resources"
+ // icon:
+ },
+ {
+ title: "Access Control",
+ href: "/{orgId}/settings/access",
+ // icon:
,
+ autoExpand: true,
+ children: [
+ {
+ title: "Users",
+ href: "/{orgId}/settings/access/users"
+ },
+ {
+ title: "Roles",
+ href: "/{orgId}/settings/access/roles"
+ }
+ ]
+ },
+ {
+ title: "Shareable Links",
+ href: "/{orgId}/settings/share-links"
+ // icon:
+ },
+ {
+ title: "Settings",
+ href: "/{orgId}/settings/general"
+ // icon:
+ }
+];
+
+export const adminNavItems: SidebarNavItem[] = [
+ {
+ title: "All Users",
+ href: "/admin/users"
+ // icon:
+ }
+];
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8e9c044..3535c65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +1,16 @@
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
-import ProfileIcon from "@app/components/ProfileIcon";
import { verifySession } from "@app/lib/auth/verifySession";
import UserProvider from "@app/providers/UserProvider";
import { ListOrgsResponse } from "@server/routers/org";
import { AxiosResponse } from "axios";
-import { ArrowUpRight } from "lucide-react";
-import Link from "next/link";
import { redirect } from "next/navigation";
import { cache } from "react";
import OrganizationLanding from "./components/OrganizationLanding";
import { pullEnv } from "@app/lib/pullEnv";
import { cleanRedirect } from "@app/lib/cleanRedirect";
+import { Layout } from "@app/components/Layout";
+import { rootNavItems } from "./navigation";
export const dynamic = "force-dynamic";
@@ -71,16 +70,12 @@ export default async function Page(props: {
}
return (
- <>
-
-
+
+
);
}
diff --git a/src/app/setup/layout.tsx b/src/app/setup/layout.tsx
index 0e2583f..f274bcf 100644
--- a/src/app/setup/layout.tsx
+++ b/src/app/setup/layout.tsx
@@ -1,3 +1,4 @@
+import { Layout } from "@app/components/Layout";
import ProfileIcon from "@app/components/ProfileIcon";
import { verifySession } from "@app/lib/auth/verifySession";
import { pullEnv } from "@app/lib/pullEnv";
@@ -5,6 +6,7 @@ import UserProvider from "@app/providers/UserProvider";
import { Metadata } from "next";
import { redirect } from "next/navigation";
import { cache } from "react";
+import { rootNavItems } from "../navigation";
export const metadata: Metadata = {
title: `Setup - Pangolin`,
@@ -27,27 +29,19 @@ export default async function SetupLayout({
redirect("/?redirect=/setup");
}
- if (
- !(!env.flags.disableUserCreateOrg || user.serverAdmin)
- ) {
+ if (!(!env.flags.disableUserCreateOrg || user.serverAdmin)) {
redirect("/");
}
return (
<>
-
);
}
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
new file mode 100644
index 0000000..9db2db2
--- /dev/null
+++ b/src/components/Breadcrumbs.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+interface BreadcrumbItem {
+ label: string;
+ href: string;
+}
+
+export function Breadcrumbs() {
+ const pathname = usePathname();
+ const segments = pathname.split("/").filter(Boolean);
+
+ const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
+ const href = `/${segments.slice(0, index + 1).join("/")}`;
+ let label = segment;
+
+ // Format labels
+ if (segment === "settings") {
+ label = "Settings";
+ } else if (segment === "sites") {
+ label = "Sites";
+ } else if (segment === "resources") {
+ label = "Resources";
+ } else if (segment === "access") {
+ label = "Access Control";
+ } else if (segment === "general") {
+ label = "General";
+ } else if (segment === "share-links") {
+ label = "Shareable Links";
+ } else if (segment === "users") {
+ label = "Users";
+ } else if (segment === "roles") {
+ label = "Roles";
+ } else if (segment === "invitations") {
+ label = "Invitations";
+ } else if (segment === "connectivity") {
+ label = "Connectivity";
+ } else if (segment === "authentication") {
+ label = "Authentication";
+ }
+
+ return { label, href };
+ });
+
+ return (
+
+ );
+}
diff --git a/src/components/CopyTextBox.tsx b/src/components/CopyTextBox.tsx
index b6c838e..c8ba204 100644
--- a/src/components/CopyTextBox.tsx
+++ b/src/components/CopyTextBox.tsx
@@ -28,7 +28,7 @@ export default function CopyTextBox({
return (
-
-
-
-
-
-
- {orgs && (
-
-
-
-
-
-
-
-
- No organizations found.
-
- {(!env.flags.disableUserCreateOrg ||
- user.serverAdmin) && (
- <>
-
-
- {
- router.push(
- "/setup"
- );
- }}
- >
-
- New Organization
-
-
-
-
-
- )}
-
-
- {orgs.map((org) => (
- {
- router.push(
- `/${org.orgId}/settings`
- );
- }}
- >
-
- {org.name}
-
- ))}
-
-
-
-
-
- )}
-
-
+
+
+ Pangolin
+
+
);
}
diff --git a/src/components/HorizontalTabs.tsx b/src/components/HorizontalTabs.tsx
new file mode 100644
index 0000000..8517fd3
--- /dev/null
+++ b/src/components/HorizontalTabs.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@app/lib/cn";
+import { buttonVariants } from "@/components/ui/button";
+
+interface HorizontalTabsProps {
+ children: React.ReactNode;
+ items: Array<{
+ title: string;
+ href: string;
+ icon?: React.ReactNode;
+ }>;
+ disabled?: boolean;
+}
+
+export function HorizontalTabs({
+ children,
+ items,
+ disabled = false
+}: HorizontalTabsProps) {
+ const pathname = usePathname();
+ const params = useParams();
+
+ function hydrateHref(href: string) {
+ return href
+ .replace("{orgId}", params.orgId as string)
+ .replace("{resourceId}", params.resourceId as string)
+ .replace("{niceId}", params.niceId as string)
+ .replace("{userId}", params.userId as string);
+ }
+
+ return (
+
+
+
+
+ {items.map((item) => {
+ const hydratedHref = hydrateHref(item.href);
+ const isActive =
+ pathname.startsWith(hydratedHref) &&
+ !pathname.includes("create");
+
+ return (
+
e.preventDefault()
+ : undefined
+ }
+ tabIndex={disabled ? -1 : undefined}
+ aria-disabled={disabled}
+ >
+ {item.icon ? (
+
+ {item.icon}
+ {item.title}
+
+ ) : (
+ item.title
+ )}
+
+ );
+ })}
+
+
+
+
{children}
+
+ {/* Mobile Menu Button */}
+ {showSidebar && (
+
+
+
+
+
+
+
+ Navigation Menu
+
+
+ Main navigation menu for the application
+
+ {showHeader && (
+
+
+
+ )}
+
+ setIsMobileMenuOpen(false)} />
+
+
+
+
+ {env?.app?.version && (
+
+ v{env.app.version}
+
+ )}
+
+
+ )}
+
+ {/* Desktop Sidebar */}
+ {showSidebar && (
+
+ {showHeader && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Open Source
+
+
+
+ {env?.app?.version && (
+
+ v{env.app.version}
+
+ )}
+
+
+
+ )}
+
+ {/* Main content */}
+
+ {showTopBar && (
+
+ )}
+ {showBreadcrumbs &&
}
+
+
+ {children}
+
+
+
+
+
+
+ {user.email}
+
-
- {user.email}
-
-
-
-
);
diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index 20ef5bd..39c9ac0 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -1,35 +1,30 @@
"use client";
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
import { cn } from "@app/lib/cn";
-import { buttonVariants } from "@/components/ui/button";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue
-} from "@/components/ui/select";
-import { CornerDownRight } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
-interface SidebarNavItem {
+export interface SidebarNavItem {
href: string;
title: string;
icon?: React.ReactNode;
children?: SidebarNavItem[];
+ autoExpand?: boolean;
}
-interface SidebarNavProps extends React.HTMLAttributes
{
+export interface SidebarNavProps extends React.HTMLAttributes {
items: SidebarNavItem[];
disabled?: boolean;
+ onItemClick?: () => void;
}
export function SidebarNav({
className,
items,
disabled = false,
+ onItemClick,
...props
}: SidebarNavProps) {
const pathname = usePathname();
@@ -38,43 +33,27 @@ export function SidebarNav({
const niceId = params.niceId as string;
const resourceId = params.resourceId as string;
const userId = params.userId as string;
+ const [expandedItems, setExpandedItems] = useState>(new Set());
- const [selectedValue, setSelectedValue] =
- React.useState(getSelectedValue());
-
+ // Initialize expanded items based on autoExpand property
useEffect(() => {
- setSelectedValue(getSelectedValue());
- }, [usePathname()]);
+ const autoExpanded = new Set();
- const router = useRouter();
-
- const handleSelectChange = (value: string) => {
- if (!disabled) {
- router.push(value);
- }
- };
-
- function getSelectedValue() {
- let foundHref = "";
- for (const item of items) {
- const hydratedHref = hydrateHref(item.href);
- if (hydratedHref === pathname) {
- foundHref = hydratedHref;
- break;
- }
- if (item.children) {
- for (const child of item.children) {
- const hydratedChildHref = hydrateHref(child.href);
- if (hydratedChildHref === pathname) {
- foundHref = hydratedChildHref;
- break;
- }
+ function findAutoExpanded(items: SidebarNavItem[]) {
+ items.forEach(item => {
+ const hydratedHref = hydrateHref(item.href);
+ if (item.autoExpand) {
+ autoExpanded.add(hydratedHref);
}
- }
- if (foundHref) break;
+ if (item.children) {
+ findAutoExpanded(item.children);
+ }
+ });
}
- return foundHref;
- }
+
+ findAutoExpanded(items);
+ setExpandedItems(autoExpanded);
+ }, [items]);
function hydrateHref(val: string): string {
return val
@@ -84,143 +63,85 @@ export function SidebarNav({
.replace("{userId}", userId);
}
- function renderItems(items: SidebarNavItem[]) {
- return items.map((item) => (
-
-
e.preventDefault() : undefined}
- tabIndex={disabled ? -1 : undefined}
- aria-disabled={disabled}
- >
- {item.icon ? (
-
- {item.icon}
- {item.title}
-
- ) : (
- item.title
- )}
-
- {item.children && (
-
- {item.children.map((child) => (
-
{
+ const newSet = new Set(prev);
+ if (newSet.has(href)) {
+ newSet.delete(href);
+ } else {
+ newSet.add(href);
+ }
+ return newSet;
+ });
+ }
+
+ function renderItems(items: SidebarNavItem[], level = 0) {
+ return items.map((item) => {
+ const hydratedHref = hydrateHref(item.href);
+ const isActive = pathname.startsWith(hydratedHref);
+ const hasChildren = item.children && item.children.length > 0;
+ const isExpanded = expandedItems.has(hydratedHref);
+ const indent = level * 16; // Base indent for each level
+
+ return (
+
+
+
{
+ if (disabled) {
+ e.preventDefault();
+ } else if (onItemClick) {
+ onItemClick();
+ }
+ }}
+ tabIndex={disabled ? -1 : undefined}
+ aria-disabled={disabled}
+ >
+ {item.icon &&
{item.icon}}
+ {item.title}
+
+ {hasChildren && (
+
- ))}
+ {isExpanded ? (
+
+ ) : (
+
+ )}
+
+ )}
- )}
-
- ));
+ {hasChildren && isExpanded && (
+
+ {renderItems(item.children || [], level + 1)}
+
+ )}
+
+ );
+ });
}
return (
-
-
-
-
-
-
+
);
}
diff --git a/src/components/StrategySelect.tsx b/src/components/StrategySelect.tsx
index 86ad466..f6a899f 100644
--- a/src/components/StrategySelect.tsx
+++ b/src/components/StrategySelect.tsx
@@ -44,7 +44,7 @@ export function StrategySelect
({
selected === option.id ? "checked" : "unchecked"
}
className={cn(
- "relative flex rounded-lg border-2 p-4 transition-colors cursor-pointer",
+ "relative flex rounded-lg border p-4 transition-colors cursor-pointer",
option.disabled
? "border-input text-muted-foreground cursor-not-allowed opacity-50"
: selected === option.id
diff --git a/src/components/SupporterStatus.tsx b/src/components/SupporterStatus.tsx
index a08fdf7..baeeb54 100644
--- a/src/components/SupporterStatus.tsx
+++ b/src/components/SupporterStatus.tsx
@@ -419,7 +419,7 @@ export default function SupporterStatus() {