Skip to content

Commit dfc7f9c

Browse files
sombraSoftsombraSoft
authored
Added burger menu to home page (#149)
* Implemented Burger menu * commented unused components * feat: Update BurgerMenu to display user's name when logged in * removed comments * implemented login and logout button
1 parent 25022ea commit dfc7f9c

File tree

6 files changed

+253
-13
lines changed

6 files changed

+253
-13
lines changed

‎src/components/BurgerMenu/BurgerMenu.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
2+
import { IBurgerMenu, IPartnerLink } from './types';
3+
import {
4+
CircleHelp,
5+
CirclePlus,
6+
DoorClosed,
7+
DoorOpen,
8+
Link as LinkIcon,
9+
Menu,
10+
User,
11+
} from 'lucide-react';
12+
import { Link } from 'react-router-dom';
13+
14+
const BurgerMenu = (props: IBurgerMenu) => {
15+
const { session } = props;
16+
const partnerLinks: IPartnerLink[] = [];
17+
const logout = () => {
18+
localStorage.removeItem('token');
19+
window.location.href = '/';
20+
};
21+
return (
22+
<Sheet>
23+
<SheetTrigger>
24+
<Menu color="white" className="ml-2 mr-2" />
25+
</SheetTrigger>
26+
<SheetContent side={'left'} className="pt-[96px] flex flex-col">
27+
<div className="flex">
28+
<ul className="flex flex-col text-base">
29+
{session ? (
30+
<li className="inline-flex items-center mb-5">
31+
<User className="mr-2" />
32+
Olá, {session.name}
33+
</li>
34+
) : (
35+
<Link to={'/entrar'} className="hover:font-semibold">
36+
<li className="inline-flex items-center mb-5">
37+
<DoorClosed className="mr-2" />
38+
Entrar
39+
</li>
40+
</Link>
41+
)}
42+
<Link
43+
to={'https://forms.gle/2S7L2gR529Dc8P3T9'}
44+
target="_blank"
45+
className="hover:font-semibold"
46+
>
47+
<li className="inline-flex items-center mb-5">
48+
<CirclePlus className="mr-2" />
49+
Cadastrar Abrigo
50+
</li>
51+
</Link>
52+
<Link
53+
to={'https://www.instagram.com/reel/C613CfGuh4b'}
54+
target="_blank"
55+
className="hover:font-semibold"
56+
>
57+
<li className="inline-flex items-center mb-5">
58+
<CircleHelp className="mr-2" />
59+
Como Ajudar
60+
</li>
61+
</Link>
62+
</ul>
63+
{!!partnerLinks.length && (
64+
<>
65+
<div className="mt-5 text-sm text-gray-500">Links Úteis</div>
66+
<ul className="flex flex-col text-base">
67+
{partnerLinks.map((link, index) => (
68+
<Link
69+
key={index}
70+
to={link.url}
71+
target="_blank"
72+
className="hover:font-semibold"
73+
>
74+
<li className="inline-flex items-center mt-5">
75+
<LinkIcon className="mr-2" />
76+
{link.name}
77+
</li>
78+
</Link>
79+
))}
80+
</ul>
81+
</>
82+
)}
83+
</div>
84+
{session && (
85+
<div className="mt-auto mb-8">
86+
<span
87+
className="inline-flex items-center hover:font-semibold cursor-pointer"
88+
onClick={logout}
89+
>
90+
<DoorOpen className="mr-2" /> Sair
91+
</span>
92+
</div>
93+
)}
94+
</SheetContent>
95+
</Sheet>
96+
);
97+
};
98+
99+
export { BurgerMenu };

‎src/components/BurgerMenu/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { BurgerMenu } from "./BurgerMenu";
2+
3+
export { BurgerMenu };

‎src/components/BurgerMenu/types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ISession } from '@/service/sessions/types';
2+
3+
export interface IBurgerMenu {
4+
session: ISession | null;
5+
}
6+
7+
export interface IPartnerLink {
8+
name: string;
9+
url: string;
10+
}

‎src/components/Header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
1616
<div
1717
ref={ref}
1818
className={cn(
19-
'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full',
19+
'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
2020
className
2121
)}
2222
{...rest}

‎src/components/ui/sheet.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import * as React from 'react';
2+
import * as SheetPrimitive from '@radix-ui/react-dialog';
3+
import { cva, type VariantProps } from 'class-variance-authority';
4+
5+
import { cn } from '@/lib/utils';
6+
import { X } from 'lucide-react';
7+
8+
const Sheet = SheetPrimitive.Root;
9+
10+
const SheetTrigger = SheetPrimitive.Trigger;
11+
12+
const SheetClose = SheetPrimitive.Close;
13+
14+
const SheetPortal = SheetPrimitive.Portal;
15+
16+
const SheetOverlay = React.forwardRef<
17+
React.ElementRef<typeof SheetPrimitive.Overlay>,
18+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
19+
>(({ className, ...props }, ref) => (
20+
<SheetPrimitive.Overlay
21+
className={cn(
22+
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
23+
className
24+
)}
25+
{...props}
26+
ref={ref}
27+
/>
28+
));
29+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
30+
31+
const sheetVariants = cva(
32+
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
33+
{
34+
variants: {
35+
side: {
36+
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
37+
bottom:
38+
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
39+
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
40+
right:
41+
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
42+
},
43+
},
44+
defaultVariants: {
45+
side: 'right',
46+
},
47+
}
48+
);
49+
50+
interface SheetContentProps
51+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
52+
VariantProps<typeof sheetVariants> {}
53+
54+
const SheetContent = React.forwardRef<
55+
React.ElementRef<typeof SheetPrimitive.Content>,
56+
SheetContentProps
57+
>(({ side = 'right', className, children, ...props }, ref) => (
58+
<SheetPortal>
59+
<SheetOverlay />
60+
<SheetPrimitive.Content
61+
ref={ref}
62+
className={cn(sheetVariants({ side }), className)}
63+
{...props}
64+
>
65+
{children}
66+
<SheetPrimitive.Close className="absolute right-3 mt-[-30px] rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
67+
<X className="h-6 w-6" />
68+
</SheetPrimitive.Close>
69+
</SheetPrimitive.Content>
70+
</SheetPortal>
71+
));
72+
SheetContent.displayName = SheetPrimitive.Content.displayName;
73+
74+
const SheetHeader = ({
75+
className,
76+
...props
77+
}: React.HTMLAttributes<HTMLDivElement>) => (
78+
<div
79+
className={cn(
80+
'flex flex-col space-y-2 text-center sm:text-left',
81+
className
82+
)}
83+
{...props}
84+
/>
85+
);
86+
SheetHeader.displayName = 'SheetHeader';
87+
88+
const SheetFooter = ({
89+
className,
90+
...props
91+
}: React.HTMLAttributes<HTMLDivElement>) => (
92+
<div
93+
className={cn(
94+
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
95+
className
96+
)}
97+
{...props}
98+
/>
99+
);
100+
SheetFooter.displayName = 'SheetFooter';
101+
102+
const SheetTitle = React.forwardRef<
103+
React.ElementRef<typeof SheetPrimitive.Title>,
104+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
105+
>(({ className, ...props }, ref) => (
106+
<SheetPrimitive.Title
107+
ref={ref}
108+
className={cn('text-lg font-semibold text-foreground', className)}
109+
{...props}
110+
/>
111+
));
112+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
113+
114+
const SheetDescription = React.forwardRef<
115+
React.ElementRef<typeof SheetPrimitive.Description>,
116+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
117+
>(({ className, ...props }, ref) => (
118+
<SheetPrimitive.Description
119+
ref={ref}
120+
className={cn('text-sm text-muted-foreground', className)}
121+
{...props}
122+
/>
123+
));
124+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
125+
126+
export {
127+
Sheet,
128+
SheetPortal,
129+
SheetOverlay,
130+
SheetTrigger,
131+
SheetClose,
132+
SheetContent,
133+
SheetHeader,
134+
SheetFooter,
135+
SheetTitle,
136+
SheetDescription,
137+
};

‎src/pages/Home/Home.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback, useContext, useMemo, useState } from 'react';
22
import { useSearchParams } from 'react-router-dom';
3-
import { RotateCw, LogOutIcon, PlusIcon } from 'lucide-react';
3+
import { RotateCw, LogOutIcon } from 'lucide-react';
44
import qs from 'qs';
55

66
import { Footer, Header } from '@/components';
@@ -10,6 +10,7 @@ import { SessionContext } from '@/contexts';
1010
import { Filter } from './components/Filter';
1111
import { ShelterListView } from './components/ShelterListView';
1212
import { IFilterFormProps } from './components/Filter/types';
13+
import { BurgerMenu } from '@/components/BurgerMenu';
1314

1415
const initialFilterData: IFilterFormProps = {
1516
search: '',
@@ -106,24 +107,14 @@ const Home = () => {
106107
)}
107108
<Header
108109
title="SOS Rio Grande do Sul"
110+
startAdornment={<BurgerMenu session={session} />}
109111
endAdornment={
110112
<div className="flex gap-2 items-center">
111113
{session && (
112114
<h3 className="text-white font-thin">
113115
Bem vindo, {session.name}
114116
</h3>
115117
)}
116-
<Button
117-
variant="ghost"
118-
size="sm"
119-
className="text-white gap-1 flex flex-gap items-center [&_svg]:hover:stroke-black"
120-
onClick={() =>
121-
window.open('https://forms.gle/2S7L2gR529Dc8P3T9', '_blank')
122-
}
123-
>
124-
<PlusIcon className="h-5 w-5 stroke-white" />
125-
Cadastrar abrigo
126-
</Button>
127118
<Button
128119
loading={loading}
129120
variant="ghost"

0 commit comments

Comments
 (0)