Skip to content

Commit

Permalink
wip: main nav
Browse files Browse the repository at this point in the history
  • Loading branch information
katallaxie committed Jan 20, 2024
1 parent 618b66c commit 9e24d68
Show file tree
Hide file tree
Showing 7 changed files with 10,733 additions and 12,764 deletions.
23,360 changes: 10,639 additions & 12,721 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"migrate:undo:all": "npx sequelize-cli db:migrate:undo:all"
},
"dependencies": {
"@auth/sequelize-adapter": "^1.0.13",
"@auth/sequelize-adapter": "^1.0.16",
"@fontsource-variable/inter": "^5.0.16",
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-accordion": "^1.1.2",
Expand Down Expand Up @@ -47,7 +47,7 @@
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@tanstack/react-table": "^8.11.3",
"@tanstack/react-table": "^8.11.6",
"@trpc/client": "^10.45.0",
"@trpc/next": "^10.45.0",
"@trpc/react-query": "^10.45.0",
Expand Down Expand Up @@ -76,7 +76,7 @@
"react-dom": "^18",
"react-error-boundary": "^4.0.12",
"react-hook-form": "^7.49.2",
"react-icons": "^4.11.0",
"react-icons": "^5.0.1",
"react-markdown": "^9.0.1",
"recharts": "^2.10.3",
"reflect-metadata": "^0.2.1",
Expand All @@ -94,7 +94,7 @@
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20.10.6",
"@types/node": "^20.11.5",
"@types/pg": "^8.10.9",
"@types/react": "^18",
"@types/react-dom": "^18",
Expand Down
26 changes: 14 additions & 12 deletions packages/app/src/app/teams/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import {
SubNav,
SubNavTitle,
SubNavActions,
SubNavSubtitle
} from '@/components/sub-nav'
import { SidebarNav } from '@/components/sidebar-nav'
import { Main } from '@/components/main'
import type { PropsWithChildren } from 'react'
import { MainNav } from '@/components/teams/main-nav'
import DefaultLayout from '@/components/default-layout'

type PageProps = {
children?: React.ReactNode
export interface NextPageProps<TeamSlug = string> {
params: { team: TeamSlug }
searchParams?: { [key: string]: string | string[] | undefined }
}

export default function Layout({ children }: PageProps) {
export default function Layout({
params,
children
}: PropsWithChildren<NextPageProps>) {
return (
<>
<DefaultLayout>{children}</DefaultLayout>
<DefaultLayout
fallback={<MainNav teamId={params.team} className="mx-6" />}
>
{children}
</DefaultLayout>
</>
)
}
18 changes: 12 additions & 6 deletions packages/app/src/components/default-layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '@/styles/globals.css'
import React from 'react'
import type { ReactNode } from 'react'

import { MainNav } from '@/components/main-nav'
import { Search } from '@/components/search'
Expand All @@ -9,18 +9,24 @@ import { ThemeToggle } from '@/components/theme-toggle'
import { Toaster } from '@/components/ui/toaster'
import Footer from '@/components/footer'

interface DefaultLayoutProps {
children?: ReactNode | undefined

/** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
fallback?: ReactNode
}

export default function DefaultLayout({
children
}: {
children: React.ReactNode
}) {
children,
fallback = <MainNav className="mx-6" />
}: DefaultLayoutProps) {
return (
<>
<div className="flex-col">
<div className="border-b">
<div className="flex h-16 items-center px-4">
<TeamSwitcher />
<MainNav className="mx-6" />
{fallback}
<div className="ml-auto flex items-center space-x-4">
<Search />
<ThemeToggle />
Expand Down
18 changes: 1 addition & 17 deletions packages/app/src/components/main-nav.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
import Link from 'next/link'
import { headers } from 'next/headers'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const nav = [
{
name: 'Dashboard',
link: '/dashboard'
},
{
name: 'Workloads',
link: '/dashboard/workloads'
},
{
name: 'Solutions',
link: '/dashboard/solutions'
},
{
name: 'Lenses',
link: '/dashboard/lenses'
},
{
name: 'Profiles',
link: '/dashboard/profiles'
}
]

Expand All @@ -33,6 +16,7 @@ export function MainNav({
}: React.HTMLAttributes<HTMLElement>) {
const headerList = headers()
const pathname = headerList.get('x-pathname')
console.log(pathname)

return (
<nav
Expand Down
10 changes: 6 additions & 4 deletions packages/app/src/components/team-switcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,13 @@ import {
import { api } from '@/trpc/client'
import { usePathname, useRouter } from 'next/navigation'

type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>

interface TeamSwitcherProps extends PopoverTriggerProps { }
export type TeamSwitcherProps = {
className?: string
}

export default function TeamSwitcher({ className }: TeamSwitcherProps) {
export default function TeamSwitcher({
className
}: React.PropsWithChildren<TeamSwitcherProps>) {
const user = React.use(api.users.get.query())
const groups = React.useMemo(
() => [
Expand Down
57 changes: 57 additions & 0 deletions packages/app/src/components/teams/main-nav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Link from 'next/link'
import { headers } from 'next/headers'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

export interface MainNavProps extends React.HTMLAttributes<HTMLElement> {
teamId: string
}

export function MainNav({ className, teamId, ...props }: MainNavProps) {
const headerList = headers()
const pathname = headerList.get('x-pathname')

const nav = [
{
name: 'Dashboard',
link: `/team/${teamId}/dashboard`
},
{
name: 'Workloads',
link: `/team/${teamId}/workloads`
},
{
name: 'Solutions',
link: `/team/${teamId}/solutions`
},
{
name: 'Lenses',
link: `/team/${teamId}/lenses`
},
{
name: 'Profiles',
link: `/team/${teamId}/profiles`
}
]

return (
<nav
className={cn('flex items-center space-x-4 lg:space-x-6', className)}
{...props}
>
{nav.map((item, idx) => (
<Link
key={idx}
href={item.link}
className={cn(
buttonVariants({ variant: 'ghost' }),
'hover:bg-transparent hover:bg-muted hover:rounded',
'justify-start'
)}
>
{item.name}
</Link>
))}
</nav>
)
}

0 comments on commit 9e24d68

Please sign in to comment.