Skip to content

Commit 1185b6a

Browse files
ganobregaganobrega
committedOct 4, 2023
feat: custom menu desktop with css tricks optimization + splitting drawers + navbar mobile
1 parent 5645950 commit 1185b6a

File tree

10 files changed

+8046
-202
lines changed

10 files changed

+8046
-202
lines changed
 

‎components/header/Buttons/Cart/common.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function CartButton({ loading, currency, total, items }: Props) {
4040
loading={loading}
4141
onClick={onClick}
4242
>
43-
<Icon id="ShoppingCart" size={24} strokeWidth={2} />
43+
<Icon id="ShoppingCart" size={18} strokeWidth={2} />
4444
</Button>
4545
</div>
4646
);

‎components/header/Drawers.tsx

+106-39
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,22 @@ export interface Props {
2222
platform: ReturnType<typeof usePlatform>;
2323
}
2424

25+
interface AsideProps {
26+
title: string | undefined;
27+
onClose?: () => void;
28+
children: ComponentChildren;
29+
}
30+
2531
const Aside = (
26-
{ title, onClose, children }: {
27-
title: string;
28-
onClose?: () => void;
29-
children: ComponentChildren;
30-
},
32+
{ title, onClose, children }: AsideProps,
3133
) => (
3234
<div class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y max-w-[100vw]">
3335
<div class="flex justify-between items-center">
34-
<h1 class="px-4 py-3">
35-
<span class="font-medium text-2xl">{title}</span>
36-
</h1>
36+
{title && (
37+
<h1 class="px-4 py-3 font-medium text-2xl">
38+
{title}
39+
</h1>
40+
)}
3741
{onClose && (
3842
<Button class="btn btn-ghost" onClick={onClose}>
3943
<Icon id="XMark" size={24} strokeWidth={2} />
@@ -55,46 +59,109 @@ const Aside = (
5559
function Drawers({ menu, searchbar, children, platform }: Props) {
5660
const { displayCart, displayMenu, displaySearchDrawer } = useUI();
5761

62+
const onClose = () => {
63+
displaySearchDrawer.value = false;
64+
displayMenu.value = false;
65+
displayCart.value = false;
66+
};
67+
5868
return (
59-
<Drawer // left drawer
60-
open={displayMenu.value || displaySearchDrawer.value}
61-
onClose={() => {
62-
displayMenu.value = false;
63-
displaySearchDrawer.value = false;
64-
}}
65-
aside={
66-
<Aside
67-
onClose={() => {
68-
displayMenu.value = false;
69-
displaySearchDrawer.value = false;
70-
}}
71-
title={displayMenu.value ? "Menu" : "Buscar"}
72-
>
73-
{displayMenu.value && <Menu {...menu} />}
74-
{searchbar && displaySearchDrawer.value && (
75-
<div class="w-screen">
76-
<Searchbar {...searchbar} />
69+
<>
70+
<Drawer // Search from Left
71+
open={displaySearchDrawer.value}
72+
onClose={onClose}
73+
aside={
74+
<div class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y max-w-[100vw]">
75+
<div class="flex justify-between items-center">
76+
<h1 class="px-4 py-3 font-medium text-2xl">
77+
Buscar
78+
</h1>
79+
{onClose && (
80+
<Button class="btn btn-ghost" onClick={onClose}>
81+
<Icon id="XMark" size={24} strokeWidth={2} />
82+
</Button>
83+
)}
7784
</div>
78-
)}
79-
</Aside>
80-
}
81-
>
82-
<Drawer // right drawer
85+
<Suspense
86+
fallback={
87+
<div class="w-screen flex items-center justify-center">
88+
<span class="loading loading-ring" />
89+
</div>
90+
}
91+
>
92+
{searchbar && displaySearchDrawer.value && (
93+
<div class="w-screen">
94+
<Searchbar {...searchbar} />
95+
</div>
96+
)}
97+
</Suspense>
98+
</div>
99+
}
100+
>
101+
{children}
102+
</Drawer>
103+
104+
<Drawer // Menu from Left
105+
open={displayMenu.value}
106+
onClose={onClose}
107+
aside={
108+
<div class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y max-w-[100vw]">
109+
<div class="flex justify-between items-center">
110+
<h1 class="px-4 py-3 font-medium text-2xl">
111+
Menu
112+
</h1>
113+
{onClose && (
114+
<Button class="btn btn-ghost" onClick={onClose}>
115+
<Icon id="XMark" size={24} strokeWidth={2} />
116+
</Button>
117+
)}
118+
</div>
119+
<Suspense
120+
fallback={
121+
<div class="w-screen flex items-center justify-center">
122+
<span class="loading loading-ring" />
123+
</div>
124+
}
125+
>
126+
{displayMenu.value && <Menu {...menu} />}
127+
</Suspense>
128+
</div>
129+
}
130+
>
131+
{children}
132+
</Drawer>
133+
134+
<Drawer // Cart from Right
83135
class="drawer-end"
84136
open={displayCart.value !== false}
85-
onClose={() => displayCart.value = false}
137+
onClose={onClose}
86138
aside={
87-
<Aside
88-
title="Minha sacola"
89-
onClose={() => displayCart.value = false}
90-
>
91-
<Cart platform={platform} />
92-
</Aside>
139+
<div class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y max-w-[100vw]">
140+
<div class="flex justify-between items-center">
141+
<h1 class="px-4 py-3 font-medium text-2xl">
142+
Carrinho
143+
</h1>
144+
{onClose && (
145+
<Button class="btn btn-ghost" onClick={onClose}>
146+
<Icon id="XMark" size={24} strokeWidth={2} />
147+
</Button>
148+
)}
149+
</div>
150+
<Suspense
151+
fallback={
152+
<div class="w-screen flex items-center justify-center">
153+
<span class="loading loading-ring" />
154+
</div>
155+
}
156+
>
157+
<Cart platform={platform} />
158+
</Suspense>
159+
</div>
93160
}
94161
>
95162
{children}
96163
</Drawer>
97-
</Drawer>
164+
</>
98165
);
99166
}
100167

‎components/header/Header.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,15 @@ function Header({
4646

4747
return (
4848
<>
49-
<header>
50-
<Drawers
51-
menu={{ items: navItems }}
52-
searchbar={searchbar}
53-
platform={platform}
54-
>
55-
<div class="bg-base-100 fixed w-full z-50">
56-
<Navbar items={navItems} searchbar={searchbar} logo={logo} />
57-
</div>
58-
</Drawers>
49+
<header class="">
50+
<Navbar items={navItems} searchbar={searchbar} logo={logo} />
5951
</header>
52+
53+
<Drawers
54+
menu={{ items: navItems }}
55+
searchbar={searchbar}
56+
platform={platform}
57+
/>
6058
</>
6159
);
6260
}

‎components/header/Menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Icon from "$store/components/ui/Icon.tsx";
2-
import type { INavItem } from "./NavItem.tsx";
2+
import type { INavItem } from "./Navbar.tsx";
33

44
export interface Props {
55
items: INavItem[];

‎components/header/NavItem.tsx

-63
This file was deleted.

‎components/header/Navbar.tsx

+313-62
Large diffs are not rendered by default.

‎components/header/constants.ts

+7,610
Large diffs are not rendered by default.

‎import_map.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@preact/signals-core": "https://esm.sh/@preact/signals-core@1.3.0",
1313
"std/": "https://deno.land/std@0.190.0/",
1414
"partytown/": "https://denopkg.com/deco-cx/partytown@0.4.3/",
15-
"deco/": "https://denopkg.com/deco-cx/deco@1.37.4/"
15+
"deco/": "https://denopkg.com/deco-cx/deco@1.37.4/",
16+
"react-icons/fa": "https://deno.land/x/react_icons_fa@1.0.9/mod.ts"
1617
}
1718
}

‎static/tailwind.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tailwind.config.ts

+4-24
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,27 @@
11
import daisyui from "npm:daisyui@3.7.7";
2-
import tailwindcssTypography from 'npm:@tailwindcss/typography'
3-
import tailwindcssForms from 'npm:@tailwindcss/forms'
4-
import tailwindScrollbar from 'npm:tailwind-scrollbar'
5-
import tailwindContainerQueries from 'npm:@tailwindcss/container-queries'
2+
import typography from "npm:@tailwindcss/typography";
63

74
export default {
5+
content: ["./**/*.tsx"],
6+
daisyui: { themes: [], logs: false },
87
plugins: [
9-
tailwindcssTypography,
10-
tailwindScrollbar,
11-
tailwindContainerQueries,
12-
tailwindcssForms({
13-
strategy: 'class',
14-
}),
8+
typography,
159
daisyui,
1610
],
17-
daisyui: { themes: [], logs: false },
18-
content: ["./**/*.tsx"],
1911
theme: {
2012
container: {
2113
center: true,
2214
padding: "10px",
23-
// screens: {
24-
// "2xs": false,
25-
// lg: false,
26-
// md: false,
27-
// sm: false,
28-
// xl: false,
29-
// xs: false,
30-
// },
3115
},
3216
fontFamily: {
3317
sans: `"Open Sans"`,
3418
},
3519
screens: {
36-
// "2xs": "320px",
37-
// "3xs": "281px",
3820
xs: "425px",
3921
sm: "640px",
4022
md: "768px",
4123
lg: "1024px",
4224
xl: "1280px",
43-
// "2xl": "1440px",
44-
// "3xl": "1536px",
4525
},
4626
},
4727
};

0 commit comments

Comments
 (0)
Please sign in to comment.