Skip to content

Commit

Permalink
[#173] Add active state
Browse files Browse the repository at this point in the history
  • Loading branch information
@mazipan
mazipan committed Oct 27, 2024
1 parent df8e153 commit 9f48b24
Show file tree
Hide file tree
Showing 9 changed files with 385 additions and 214 deletions.
149 changes: 8 additions & 141 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,23 @@
'use client'

import { getFirebaseAuth } from '@/lib/firebase'
import { Loader2 } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { signOut } from 'firebase/auth'
import {
BellIcon,
Camera,
Loader2,
LogOut,
MessageCircle,
MoveUpRight,
Wrench,
} from 'lucide-react'

import { destroyActiveSession } from '@/lib/api'
import { getFirebaseAuth } from '@/lib/firebase'
import { DEFAULT_AVATAR } from '@/lib/utils'
import { useOwner } from '@/queries/useQueries'
import { usePathname } from 'next/navigation'
import logoSvg from '~/public/logo/TanyaAja.svg'

import { useAuth } from './FirebaseAuth'
import { ThemeSwitcher } from './ThemeSwitcher'
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
import {} from './ui/avatar'
import { Button } from './ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from './ui/dropdown-menu'
import { useToast } from './ui/use-toast'
import {} from './ui/dropdown-menu'

const auth = getFirebaseAuth()

export function Header() {
const router = useRouter()
const pathname = usePathname()
const { toast } = useToast()
const { isLogin, user, isLoading } = useAuth(auth)
const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
enabled: !isLoading && isLogin && !!user,
})

const handleLogout = async () => {
if (user) {
try {
await destroyActiveSession(user)
} catch {}
}

signOut(auth)
.then(() => {
toast({
description: `Berhasil logout!`,
})

setTimeout(() => {
router.push('/login')
}, 500)
})
.catch((error) => {
toast({
title: 'Gagal logout',
description: `${error.message}`,
variant: 'destructive',
})
})
}

if (pathname.startsWith('/account')) {
return null
Expand All @@ -92,89 +39,9 @@ export function Header() {
{!isLoading ? (
<>
{isLogin && user && user.displayName ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar className="cursor-pointer border">
{!isLoadingOwner && dataOwner && dataOwner.data && (
<>
<AvatarImage
src={
dataOwner?.data?.image ||
user?.photoURL ||
DEFAULT_AVATAR
}
alt={user?.displayName}
className="bg-white"
/>

<AvatarFallback>
{user?.displayName
?.split(' ')
.map((n: string) => n[0])
.join('')
.substring(2, 0)
.toUpperCase()}
</AvatarFallback>
</>
)}
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>
<div className="flex flex-col">
<span>{user?.displayName}</span>
<span className="font-light text-sm text-secondary-foreground">
{user?.email}
</span>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
{!isLoadingOwner && dataOwner && (
<DropdownMenuItem className="cursor-pointer py-3" asChild>
<Link
href={`/p/${dataOwner?.data?.slug}`}
target="_blank"
rel="noopener noreferrer"
>
<MoveUpRight className="h-4 w-4 mr-2" />
Laman Publik
</Link>
</DropdownMenuItem>
)}
<DropdownMenuItem className="cursor-pointer py-3" asChild>
<Link href="/account/questions/pending">
<MessageCircle className="h-4 w-4 mr-2" />
Daftar Pertanyaan
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer py-3" asChild>
<Link href="/account/settings">
<Wrench className="h-4 w-4 mr-2" />
Setelan Akun
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer py-3" asChild>
<Link href="/account/settings/og-image">
<Camera className="h-4 w-4 mr-2" />
Setelan OG Image
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer py-3" asChild>
<Link href="/account/settings/notification">
<BellIcon className="h-4 w-4 mr-2" />
Setelan Notifikasi
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={handleLogout}
className="cursor-pointer py-3"
>
<LogOut className="h-4 w-4 mr-2" />
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button asChild>
<Link href="/account">Ke Laman Akun</Link>
</Button>
) : (
<Button asChild>
<Link href="/login">Login</Link>
Expand Down
32 changes: 25 additions & 7 deletions src/components/ThemeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,38 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
import type { ReactNode } from 'react'

export function ThemeSwitcher() {
export function ThemeSwitcher({
customTrigger,
classNames,
side,
}: {
customTrigger?: ReactNode
classNames?: { content?: string }
side?: 'top' | 'right' | 'bottom' | 'left'
}) {
const { setTheme } = useTheme()

return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" type="button">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
{customTrigger ? (
<>{customTrigger}</>
) : (
<Button variant="outline" size="icon" type="button">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
)}
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent
side={side}
align="end"
className={cn(classNames?.content)}
>
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
Expand Down
63 changes: 58 additions & 5 deletions src/components/app-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,19 @@ import { signOut } from 'firebase/auth'
import {
Bell,
ChevronsUpDown,
Image,
Image as ImageIcon,
ListCheck,
ListTodo,
LogOut,
Monitor,
Moon,
Sun,
UserRoundCog,
} from 'lucide-react'
import { useRouter } from 'next/navigation'
import { useTheme } from 'next-themes'
import Image from 'next/image'
import { usePathname, useRouter } from 'next/navigation'
import logoSvg from '~/public/logo/TanyaAja.svg'
import { useAuth } from './FirebaseAuth'
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
import {
Expand Down Expand Up @@ -62,7 +67,7 @@ const items = [
{
title: 'Pengaturan OG',
url: '/account/settings/og-image',
icon: Image,
icon: ImageIcon,
},
{
title: 'Pengaturan Notifikasi',
Expand All @@ -75,6 +80,9 @@ const auth = getFirebaseAuth()

export function AppSidebar() {
const router = useRouter()
const pathname = usePathname()
const { setTheme } = useTheme()

const { toast } = useToast()
const { isLogin, user, isLoading } = useAuth(auth)
const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
Expand Down Expand Up @@ -109,15 +117,34 @@ export function AppSidebar() {

return (
<Sidebar>
<SidebarHeader />
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<Image
src={logoSvg}
alt="Tanya Aja"
width={30}
height={20}
className=""
/>
TanyaAja.in
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild size="lg">
<SidebarMenuButton
asChild
size="lg"
isActive={pathname === item.url}
>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
Expand All @@ -130,6 +157,32 @@ export function AppSidebar() {
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton size="lg">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
Tema Aplikasi
<ChevronsUpDown className="ml-auto" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
side="top"
className="w-[--radix-popper-anchor-width]"
>
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenu>
<SidebarMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
Expand Down
Loading

0 comments on commit 9f48b24

Please sign in to comment.