Skip to content

Commit 63d39fe

Browse files
sombraSoftmarcodmc
sombraSoft
authored and
marcodmc
committed
Added burger menu to home page (SOS-RS#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 8e12c90 commit 63d39fe

File tree

6 files changed

+256
-14
lines changed

6 files changed

+256
-14
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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
1616
<header
1717
ref={ref}
1818
className={cn(
19+
<<<<<<< HEAD
1920
'bg-red-600 fixed transition-all w-full flex items-center justify-between p-2 h-auto max-[300px]:flex-col max-[300px]:gap-2',
21+
=======
22+
'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
23+
>>>>>>> dfc7f9c (Added burger menu to home page (#149))
2024
className
2125
)}
2226
{...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 & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
2-
import { RotateCw, LogOutIcon, PlusIcon } from 'lucide-react';
2+
import { useSearchParams } from 'react-router-dom';
3+
import { RotateCw, LogOutIcon } from 'lucide-react';
34
import qs from 'qs';
4-
55
import { Footer, Header } from '@/components';
66
import { useShelters, useThrottle } from '@/hooks';
77
import { Button } from '@/components/ui/button';
88
import { SessionContext } from '@/contexts';
99
import { Filter } from './components/Filter';
1010
import { ShelterListView } from './components/ShelterListView';
1111
import { IFilterFormProps } from './components/Filter/types';
12-
import { useSearchParams } from 'react-router-dom';
12+
import { BurgerMenu } from '@/components/BurgerMenu';
1313

1414
const initialFilterData: IFilterFormProps = {
1515
search: '',
@@ -135,17 +135,6 @@ const Home = () => {
135135
</h3>
136136
)}
137137

138-
<Button
139-
variant="ghost"
140-
size="sm"
141-
className="text-white gap-1 flex flex-gap items-center [&_svg]:hover:stroke-black"
142-
onClick={() =>
143-
window.open('https://forms.gle/2S7L2gR529Dc8P3T9', '_blank')
144-
}
145-
>
146-
<PlusIcon className="h-5 w-5 stroke-white" />
147-
Cadastrar abrigo
148-
</Button>
149138
<Button
150139
loading={loading}
151140
variant="ghost"

0 commit comments

Comments
 (0)