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