midrashim/src/components/SiteNavigation.tsx

'use client'

import { Avatar } from '@/components/avatar'
import {
  Dropdown,
  DropdownButton,
  DropdownDivider,
  DropdownItem,
  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 { StackedLayout } from '@/components/stacked-layout'
import { Media } from '@/payload-types'
import { useGlobal } from '@/providers/GlobalProvider'
import { ArrowRightStartOnRectangleIcon, LightBulbIcon, UserIcon } from '@heroicons/react/16/solid'
import { MagnifyingGlassIcon, SunIcon, MoonIcon } from '@heroicons/react/20/solid'
import { useTheme } from 'next-themes'
import Link from 'next/link'
import React, { useMemo } from 'react'

const navItems = [
  { label: 'Home', url: '/' },
  { label: 'Browse', url: '/books' },
  { label: 'Events', url: '/events' },
  { label: 'Settings', url: '/settings' },
]

export default function SiteNavigation(props: { children: React.ReactNode }) {
  const { children } = props
  const { theme, setTheme } = useTheme()
  const { user, setUser } = useGlobal()

  useMemo(() => {
    if (user) return
    fetch('/api/users/me', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
    }).then(async (response) => {
      const userRequest = await response.json()
      setUser(userRequest.user)
    })
  }, [user, setUser])

  const profilePicture = user?.profilePicture as Media | undefined
  const initials = user?.firstName
    ? `${user?.firstName.slice(0, 1) || ''}${user?.lastName?.slice(0, 1)}`
    : 'U'

  return (
    <StackedLayout
      navbar={
        <Navbar>
          <Dropdown>
            <DropdownButton
              as={NavbarItem}
              onClick={() => (window.location.href = '/')}
              className="max-lg:hidden"
            >
              <Avatar src="/api/media/file/bethel-logo.jpg" />
              <NavbarLabel>Midrashim</NavbarLabel>
            </DropdownButton>
          </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
              aria-label="Inbox"
              role={'button'}
              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
            >
              <SunIcon className="dark:hidden" />
              <MoonIcon className="hidden dark:block" />
            </NavbarItem>
            <Dropdown>
              <DropdownButton as={NavbarItem}>
                <Avatar src={profilePicture?.url || ''} initials={initials} square={false} />
              </DropdownButton>
              <DropdownMenu className="min-w-64" anchor="bottom end">
                <DropdownItem href="/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="/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">
                <Link href="/" className="flex items-center justify-around gap-3">
                  <Avatar src="/api/media/file/bethel-logo.jpg" className="size-8" />
                  <SidebarLabel>Midrashim</SidebarLabel>
                </Link>
              </DropdownButton>
            </Dropdown>
          </SidebarHeader>
          <SidebarBody>
            <SidebarSection>
              {navItems.map(({ label, url }) => (
                <SidebarItem key={label} href={url}>
                  {label}
                </SidebarItem>
              ))}
            </SidebarSection>
          </SidebarBody>
        </Sidebar>
      }
    >
      {children}
    </StackedLayout>
  )
}