0ct0pu5/pangolin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
7 changed files with 92 additions and 98 deletions
Show stats 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">

68
src/app/globals.css
View file

@ -4,48 +4,48 @@
@layer base {
:root {
--background: 37 0% 95%;
--foreground: 37 0% 10%;
--card: 37 0% 90%;
--card-foreground: 37 0% 15%;
--popover: 37 0% 95%;
--popover-foreground: 37 95% 10%;
--primary: 37 31% 25%;
--background: 231 0% 100%;
--foreground: 231 0% 10%;
--card: 231 0% 100%;
--card-foreground: 231 0% 15%;
--popover: 231 0% 100%;
--popover-foreground: 231 95% 10%;
--primary: 231 34% 49%;
--primary-foreground: 0 0% 100%;
--secondary: 37 10% 74%;
--secondary: 231 10% 90%;
--secondary-foreground: 0 0% 0%;
--muted: -1 10% 85%;
--muted-foreground: 37 0% 40%;
--accent: -1 10% 80%;
--accent-foreground: 37 0% 15%;
--muted: 193 10% 95%;
--muted-foreground: 231 0% 40%;
--accent: 193 10% 90%;
--accent-foreground: 231 0% 15%;
--destructive: 0 50% 50%;
--destructive-foreground: 37 0% 90%;
--border: 37 20% 74%;
--input: 37 20% 50%;
--ring: 37 31% 25%;
--radius: 0.5rem;
--destructive-foreground: 231 0% 100%;
--border: 231 20% 82%;
--input: 231 20% 50%;
--ring: 231 34% 49%;
--radius: 0.75rem;
}
.dark {
--background: 37 10% 10%;
--foreground: 37 0% 90%;
--card: 37 0% 10%;
--card-foreground: 37 0% 90%;
--popover: 37 10% 5%;
--popover-foreground: 37 0% 90%;
--primary: 37 31% 25%;
--background: 231 10% 10%;
--foreground: 231 0% 100%;
--card: 231 0% 10%;
--card-foreground: 231 0% 100%;
--popover: 231 10% 5%;
--popover-foreground: 231 0% 100%;
--primary: 231 34% 49%;
--primary-foreground: 0 0% 100%;
--secondary: 37 10% 20%;
--secondary: 231 10% 20%;
--secondary-foreground: 0 0% 100%;
--muted: -1 10% 25%;
--muted-foreground: 37 0% 65%;
--accent: -1 10% 25%;
--accent-foreground: 37 0% 90%;
--muted: 193 10% 25%;
--muted-foreground: 231 0% 65%;
--accent: 193 10% 25%;
--accent-foreground: 231 0% 95%;
--destructive: 0 50% 50%;
--destructive-foreground: 37 0% 90%;
--border: 37 20% 50%;
--input: 37 20% 50%;
--ring: 37 31% 25%;
--radius: 0.5rem;
--destructive-foreground: 231 0% 100%;
--border: 231 20% 50%;
--input: 231 20% 50%;
--ring: 231 34% 49%;
--radius: 0.75rem;
}
}

8
src/app/layout.tsx
View file

@ -1,14 +1,14 @@
import type { Metadata } from "next";
import "./globals.css";
import { Roboto } from "next/font/google";
import { Toaster } from "@/components/ui/toaster"
import { Inter, Roboto } from "next/font/google";
import { Toaster } from "@/components/ui/toaster";
export const metadata: Metadata = {
title: process.env.NEXT_PUBLIC_APP_NAME,
description: "",
};
const font = Roboto({ subsets: ["latin"], style: "normal", weight: "400" });
const font = Inter({ subsets: ["latin"] });
export default async function RootLayout({
children,
@ -17,7 +17,7 @@ export default async function RootLayout({
}>) {
return (
<html>
<body className={`${font.className}`}>
<body className={`${font.className} pb-3`}>
<main>{children}</main>
<Toaster />
</body>