ysandler/midrashim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update nav for demo

Browse Source
This commit is contained in:
Yehoshua Sandler 2025-04-22 13:23:42 -05:00
parent f23bc1976f
commit d24b554d5e
1 changed files with 99 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/app/(frontend)/layout.tsx
View File

@ -7,8 +7,22 @@ import {
DropdownLabel,
DropdownMenu,
} from '@/components/dropdown'
import { Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer } from '@/components/navbar'
import { Sidebar, SidebarBody, SidebarHeader, SidebarItem, SidebarLabel, SidebarSection } from '@/components/sidebar'
import {
Navbar,
NavbarDivider,
NavbarItem,
NavbarLabel,
NavbarSection,
NavbarSpacer,
} from '@/components/navbar'
import {
Sidebar,
SidebarBody,
SidebarHeader,
SidebarItem,
SidebarLabel,
SidebarSection,
} from '@/components/sidebar'
import { StackedLayout } from '@/components/stacked-layout'
import {
ArrowRightStartOnRectangleIcon,
@ -31,8 +45,7 @@ export const metadata = {
const navItems = [
{ label: 'Home', url: '/' },
{ label: 'Events', url: '/events' },
{ label: 'Orders', url: '/orders' },
{ label: 'Broadcasts', url: '/broadcasts' },
{ label: 'Explore', url: '/browse' },
{ label: 'Settings', url: '/settings' },
]
@ -45,115 +58,112 @@ function TeamDropdownMenu() {
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/teams/1">
<Avatar slot="icon" src="/tailwind-logo.svg" />
<DropdownLabel>Tailwind Labs</DropdownLabel>
<Avatar slot="icon" initials="BE" />
<DropdownLabel>Beth-El</DropdownLabel>
</DropdownItem>
<DropdownItem href="/teams/2">
<Avatar slot="icon" initials="WC" className="bg-purple-500 text-white" />
<DropdownLabel>Workcation</DropdownLabel>
<Avatar slot="icon" initials="EM" className="bg-purple-500 text-white" />
<DropdownLabel>Emanuel</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/teams/create">
<DropdownItem href="/repository/create">
<PlusIcon />
<DropdownLabel>New team&hellip;</DropdownLabel>
<DropdownLabel>New Repository&hellip;</DropdownLabel>
</DropdownItem>
</DropdownMenu>
)
}
export default async function RootLayout(props: { children: React.ReactNode }) {
const { children } = props
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<StackedLayout
navbar={
<Navbar>
<Dropdown>
<DropdownButton as={NavbarItem} className="max-lg:hidden">
<Avatar src="/tailwind-logo.svg" />
<NavbarLabel>Tailwind Labs</NavbarLabel>
<ChevronDownIcon />
</DropdownButton>
<TeamDropdownMenu />
</Dropdown>
<NavbarDivider className="max-lg:hidden" />
<NavbarSection className="max-lg:hidden">
{navItems.map(({ label, url }) => (
<NavbarItem key={label} href={url}>
{label}
</NavbarItem>
))}
</NavbarSection>
<NavbarSpacer />
<NavbarSection>
<NavbarItem href="/search" aria-label="Search">
<MagnifyingGlassIcon />
</NavbarItem>
<NavbarItem href="/inbox" aria-label="Inbox">
<InboxIcon />
</NavbarItem>
navbar={
<Navbar>
<Dropdown>
<DropdownButton as={NavbarItem}>
<Avatar src="/profile-photo.jpg" square />
</DropdownButton>
<DropdownMenu className="min-w-64" anchor="bottom end">
<DropdownItem href="/my-profile">
<UserIcon />
<DropdownLabel>My profile</DropdownLabel>
</DropdownItem>
<DropdownItem href="/settings">
<Cog8ToothIcon />
<DropdownLabel>Settings</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/privacy-policy">
<ShieldCheckIcon />
<DropdownLabel>Privacy policy</DropdownLabel>
</DropdownItem>
<DropdownItem href="/share-feedback">
<LightBulbIcon />
<DropdownLabel>Share feedback</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/logout">
<ArrowRightStartOnRectangleIcon />
<DropdownLabel>Sign out</DropdownLabel>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavbarSection>
</Navbar>
}
sidebar={
<Sidebar>
<SidebarHeader>
<Dropdown>
<DropdownButton as={SidebarItem} className="lg:mb-2.5">
<Avatar src="/tailwind-logo.svg" />
<SidebarLabel>Tailwind Labs</SidebarLabel>
<DropdownButton as={NavbarItem} className="max-lg:hidden">
<Avatar src="/api/media/file/bethel-logo.jpg" />
<NavbarLabel>Midrashim</NavbarLabel>
<ChevronDownIcon />
</DropdownButton>
<TeamDropdownMenu />
</Dropdown>
</SidebarHeader>
<SidebarBody>
<SidebarSection>
<NavbarDivider className="max-lg:hidden" />
<NavbarSection className="max-lg:hidden">
{navItems.map(({ label, url }) => (
<SidebarItem key={label} href={url}>
<NavbarItem key={label} href={url}>
{label}
</SidebarItem>
</NavbarItem>
))}
</SidebarSection>
</SidebarBody>
</Sidebar>
}
>
{children}
</StackedLayout>
</NavbarSection>
<NavbarSpacer />
<NavbarSection>
<NavbarItem href="/search" aria-label="Search">
<MagnifyingGlassIcon />
</NavbarItem>
<NavbarItem href="/inbox" aria-label="Inbox">
<InboxIcon />
</NavbarItem>
<Dropdown>
<DropdownButton as={NavbarItem}>
<Avatar src="/api/media/file/bethel-logo.jpg" square />
</DropdownButton>
<DropdownMenu className="min-w-64" anchor="bottom end">
<DropdownItem href="/my-profile">
<UserIcon />
<DropdownLabel>My profile</DropdownLabel>
</DropdownItem>
<DropdownItem href="/settings">
<Cog8ToothIcon />
<DropdownLabel>Settings</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/privacy-policy">
<ShieldCheckIcon />
<DropdownLabel>Privacy policy</DropdownLabel>
</DropdownItem>
<DropdownItem href="/share-feedback">
<LightBulbIcon />
<DropdownLabel>Share feedback</DropdownLabel>
</DropdownItem>
<DropdownDivider />
<DropdownItem href="/logout">
<ArrowRightStartOnRectangleIcon />
<DropdownLabel>Sign out</DropdownLabel>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavbarSection>
</Navbar>
}
sidebar={
<Sidebar>
<SidebarHeader>
<Dropdown>
<DropdownButton as={SidebarItem} className="lg:mb-2.5">
<Avatar src="/api/media/file/bethel-logo.jpg" />
<SidebarLabel>Midrashim</SidebarLabel>
<ChevronDownIcon />
</DropdownButton>
<TeamDropdownMenu />
</Dropdown>
</SidebarHeader>
<SidebarBody>
<SidebarSection>
{navItems.map(({ label, url }) => (
<SidebarItem key={label} href={url}>
{label}
</SidebarItem>
))}
</SidebarSection>
</SidebarBody>
</Sidebar>
}
>
{children}
</StackedLayout>
</ThemeProvider>
)
}