mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-01 08:34:53 +02:00
add server admin button
This commit is contained in:
miloschwartz
parent
ab933d48de
commit
334fc55dd0
2 changed files with 62 additions and 14 deletions
|
|
@ -10,7 +10,7 @@ import { ListOrgsResponse } from "@server/routers/org";
|
|||
import SupporterStatus from "@app/components/SupporterStatus";
|
||||
import { Separator } from "@app/components/ui/separator";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { ExternalLink, Menu, X } from "lucide-react";
|
||||
import { ExternalLink, Menu, X, Server } from "lucide-react";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
|
|
@ -21,6 +21,7 @@ import {
|
|||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { Breadcrumbs } from "@app/components/Breadcrumbs";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -54,6 +55,8 @@ export function Layout({
|
|||
}: LayoutProps) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const { env } = useEnvContext();
|
||||
const pathname = usePathname();
|
||||
const isAdminPage = pathname?.startsWith("/admin");
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
|
@ -85,7 +88,26 @@ export function Layout({
|
|||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<SidebarNav items={navItems} onItemClick={() => setIsMobileMenuOpen(false)} />
|
||||
<SidebarNav
|
||||
items={navItems}
|
||||
onItemClick={() =>
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
/>
|
||||
{!isAdminPage && (
|
||||
<div className="mt-8 pt-4 border-t">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center justify-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 w-full"
|
||||
onClick={() =>
|
||||
setIsMobileMenuOpen(false)
|
||||
}
|
||||
>
|
||||
<Server className="h-4 w-4" />
|
||||
Server Admin
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 space-y-4 border-t shrink-0">
|
||||
<SupporterStatus />
|
||||
|
|
@ -109,8 +131,21 @@ export function Layout({
|
|||
<Header orgId={orgId} orgs={orgs} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<SidebarNav items={navItems} />
|
||||
<div className="flex-1 overflow-y-auto p-4 flex flex-col">
|
||||
<div className="flex-1">
|
||||
<SidebarNav items={navItems} />
|
||||
</div>
|
||||
{!isAdminPage && (
|
||||
<div className="mt-8 pt-4 border-t">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center justify-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 w-full"
|
||||
>
|
||||
<Server className="h-4 w-4" />
|
||||
Server Admin
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 space-y-4 border-t shrink-0">
|
||||
<SupporterStatus />
|
||||
|
|
@ -124,7 +159,7 @@ export function Layout({
|
|||
className="flex items-center justify-center gap-1"
|
||||
>
|
||||
Open Source
|
||||
<ExternalLink size={12}/>
|
||||
<ExternalLink size={12} />
|
||||
</Link>
|
||||
</div>
|
||||
{env?.app?.version && (
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Link from "next/link";
|
|||
import { useParams, usePathname } from "next/navigation";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
|
||||
export interface SidebarNavItem {
|
||||
href: string;
|
||||
|
|
@ -35,6 +36,8 @@ export function SidebarNav({
|
|||
const userId = params.userId as string;
|
||||
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
||||
|
||||
const { user } = useUserContext();
|
||||
|
||||
function hydrateHref(val: string): string {
|
||||
return val
|
||||
.replace("{orgId}", orgId)
|
||||
|
|
@ -47,19 +50,22 @@ export function SidebarNav({
|
|||
useEffect(() => {
|
||||
const autoExpanded = new Set<string>();
|
||||
|
||||
function findAutoExpandedAndActivePath(items: SidebarNavItem[], parentHrefs: string[] = []) {
|
||||
items.forEach(item => {
|
||||
function findAutoExpandedAndActivePath(
|
||||
items: SidebarNavItem[],
|
||||
parentHrefs: string[] = []
|
||||
) {
|
||||
items.forEach((item) => {
|
||||
const hydratedHref = hydrateHref(item.href);
|
||||
|
||||
|
||||
// Add current item's href to the path
|
||||
const currentPath = [...parentHrefs, hydratedHref];
|
||||
|
||||
|
||||
// Auto expand if specified or if this item or any child is active
|
||||
if (item.autoExpand || pathname.startsWith(hydratedHref)) {
|
||||
// Expand all parent sections when a child is active
|
||||
currentPath.forEach(href => autoExpanded.add(href));
|
||||
currentPath.forEach((href) => autoExpanded.add(href));
|
||||
}
|
||||
|
||||
|
||||
// Recursively check children
|
||||
if (item.children) {
|
||||
findAutoExpandedAndActivePath(item.children, currentPath);
|
||||
|
|
@ -72,7 +78,7 @@ export function SidebarNav({
|
|||
}, [items, pathname]);
|
||||
|
||||
function toggleItem(href: string) {
|
||||
setExpandedItems(prev => {
|
||||
setExpandedItems((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(href)) {
|
||||
newSet.delete(href);
|
||||
|
|
@ -93,7 +99,10 @@ export function SidebarNav({
|
|||
|
||||
return (
|
||||
<div key={hydratedHref}>
|
||||
<div className="flex items-center group" style={{ marginLeft: `${indent}px` }}>
|
||||
<div
|
||||
className="flex items-center group"
|
||||
style={{ marginLeft: `${indent}px` }}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center w-full transition-colors rounded-md",
|
||||
|
|
@ -120,7 +129,11 @@ export function SidebarNav({
|
|||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
{item.icon && <span className="mr-3 opacity-70">{item.icon}</span>}
|
||||
{item.icon && (
|
||||
<span className="mr-3 opacity-70">
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
{item.title}
|
||||
</Link>
|
||||
{hasChildren && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue