more tweaks to layout

This commit is contained in:
miloschwartz
2025-04-13 14:21:18 -04:00
parent b731a50cc9
commit 8b0c30f19f
22 changed files with 172 additions and 193 deletions

View File

@@ -45,7 +45,7 @@ export default async function OrgPage(props: OrgPageProps) {
return (
<UserProvider user={user}>
<Layout
<Layout
orgId={orgId}
navItems={orgNavItems}
>

View File

@@ -14,6 +14,7 @@ import {
} from "@app/components/ui/breadcrumb";
import Link from "next/link";
import { cache } from "react";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
interface UserLayoutProps {
children: React.ReactNode;
@@ -48,28 +49,11 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
return (
<>
<SettingsSectionTitle
title={`${user?.email}`}
description="Manage the settings on this user"
/>
<OrgUserProvider orgUser={user}>
<div className="mb-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../../">Users</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{user.email}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="space-y-0.5 mb-6">
<h2 className="text-2xl font-bold tracking-tight">
User {user?.email}
</h2>
<p className="text-muted-foreground">Manage user</p>
</div>
<HorizontalTabs items={navItems}>
{children}
</HorizontalTabs>

View File

@@ -18,6 +18,7 @@ import { GetOrgUserResponse } from "@server/routers/user";
import UserProvider from "@app/providers/UserProvider";
import { Layout } from "@app/components/Layout";
import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
import { orgNavItems } from "@app/app/navigation";
export const dynamic = "force-dynamic";
@@ -26,51 +27,6 @@ export const metadata: Metadata = {
description: ""
};
const navItems: SidebarNavItem[] = [
{
title: "Sites",
href: "/{orgId}/settings/sites"
// icon: <Combine className="h-4 w-4" />
},
{
title: "Resources",
href: "/{orgId}/settings/resources"
// icon: <Waypoints className="h-4 w-4" />
},
{
title: "Access Control",
href: "/{orgId}/settings/access",
// icon: <Users className="h-4 w-4" />,
autoExpand: true,
children: [
{
title: "Users",
href: "/{orgId}/settings/access/users",
children: [
{
title: "Invitations",
href: "/{orgId}/settings/access/invitations"
}
]
},
{
title: "Roles",
href: "/{orgId}/settings/access/roles"
}
]
},
{
title: "Shareable Links",
href: "/{orgId}/settings/share-links"
// icon: <LinkIcon className="h-4 w-4" />
},
{
title: "General",
href: "/{orgId}/settings/general"
// icon: <Settings className="h-4 w-4" />
}
];
interface SettingsLayoutProps {
children: React.ReactNode;
params: Promise<{ orgId: string }>;
@@ -119,7 +75,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
return (
<UserProvider user={user}>
<Layout orgId={params.orgId} orgs={orgs} navItems={navItems}>
<Layout orgId={params.orgId} orgs={orgs} navItems={orgNavItems}>
{children}
</Layout>
</UserProvider>

View File

@@ -569,7 +569,7 @@ export default function ReverseProxyTargets(props: {
<Button
type="submit"
variant="outlinePrimary"
className="mt-8"
className="mt-6"
>
Add Target
</Button>

View File

@@ -693,7 +693,7 @@ export default function ResourceRules(props: {
control={addRuleForm.control}
name="value"
render={({ field }) => (
<FormItem>
<FormItem className="space-y-0 mb-2">
<InfoPopup
text="Value"
info={
@@ -714,6 +714,7 @@ export default function ResourceRules(props: {
<Button
type="submit"
variant="outlinePrimary"
className="mb-2"
disabled={!rulesEnabled}
>
Add Rule

View File

@@ -9,6 +9,7 @@ import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/lib/api/cookies";
import { Layout } from "@app/components/Layout";
import { adminNavItems } from "../navigation";
export const dynamic = "force-dynamic";
@@ -17,14 +18,6 @@ export const metadata: Metadata = {
description: ""
};
const navItems = [
{
title: "All Users",
href: "/admin/users",
icon: <Users className="h-4 w-4" />
}
];
interface LayoutProps {
children: React.ReactNode;
}
@@ -51,7 +44,7 @@ export default async function AdminLayout(props: LayoutProps) {
return (
<UserProvider user={user}>
<Layout orgs={orgs} navItems={navItems}>
<Layout orgs={orgs} navItems={adminNavItems}>
{props.children}
</Layout>
</UserProvider>

View File

@@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap");
@import 'tailwindcss';
@custom-variant dark (&:is(.dark *));

View File

@@ -1,33 +1,37 @@
import { Home, Settings, Users, Link as LinkIcon, Waypoints, Combine } from "lucide-react";
import { SidebarNavItem } from "@app/components/SidebarNav";
import {
Home,
Settings,
Users,
Link as LinkIcon,
Waypoints,
Combine
} from "lucide-react";
export const rootNavItems = [
export const rootNavItems: SidebarNavItem[] = [
{
title: "Home",
href: "/",
icon: <Home className="h-4 w-4" />
href: "/"
// icon: <Home className="h-4 w-4" />
}
];
export const orgNavItems = [
{
title: "Overview",
href: "/{orgId}",
icon: <Home className="h-4 w-4" />
},
export const orgNavItems: SidebarNavItem[] = [
{
title: "Sites",
href: "/{orgId}/settings/sites",
icon: <Combine className="h-4 w-4" />
href: "/{orgId}/settings/sites"
// icon: <Combine className="h-4 w-4" />
},
{
title: "Resources",
href: "/{orgId}/settings/resources",
icon: <Waypoints className="h-4 w-4" />
href: "/{orgId}/settings/resources"
// icon: <Waypoints className="h-4 w-4" />
},
{
title: "Access Control",
href: "/{orgId}/settings/access",
icon: <Users className="h-4 w-4" />,
// icon: <Users className="h-4 w-4" />,
autoExpand: true,
children: [
{
title: "Users",
@@ -41,12 +45,20 @@ export const orgNavItems = [
},
{
title: "Shareable Links",
href: "/{orgId}/settings/share-links",
icon: <LinkIcon className="h-4 w-4" />
href: "/{orgId}/settings/share-links"
// icon: <LinkIcon className="h-4 w-4" />
},
{
title: "Settings",
href: "/{orgId}/settings/general",
icon: <Settings className="h-4 w-4" />
href: "/{orgId}/settings/general"
// icon: <Settings className="h-4 w-4" />
}
];
];
export const adminNavItems: SidebarNavItem[] = [
{
title: "All Users",
href: "/admin/users"
// icon: <Users className="h-4 w-4" />
}
];

View File

@@ -71,7 +71,7 @@ export default async function Page(props: {
return (
<UserProvider user={user}>
<Layout
<Layout
orgs={orgs}
navItems={rootNavItems}
showBreadcrumbs={false}

View File

@@ -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 (
<>
<div className="p-3">
{user && (
<UserProvider user={user}>
<div>
<ProfileIcon />
</div>
</UserProvider>
)}
<div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
{children}
</div>
</div>
<UserProvider user={user}>
<Layout navItems={rootNavItems} showBreadcrumbs={false}>
<div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
{children}
</div>
</Layout>
</UserProvider>
</>
);
}