From bfcff0cbd5b8d3d15bde94923938bab9fb85e7c9 Mon Sep 17 00:00:00 2001
From: Victor Lucas
Date: Mon, 5 Sep 2022 19:17:33 -0300
Subject: [PATCH] feat: WIP sidebar
---
components/LateralMenu/index.tsx | 147 ++++++++++++++++++
components/index.ts | 1 +
configs/theme.tsx | 11 +-
.../container/FormLogin/index.tsx | 2 +-
modules/Bill/container/ListBills/index.tsx | 10 +-
modules/Menu/container/BaseMenu/index.tsx | 16 ++
package.json | 1 +
pages/index.tsx | 23 +--
pages/styles.css | 9 +-
yarn.lock | 5 +
10 files changed, 195 insertions(+), 30 deletions(-)
create mode 100644 components/LateralMenu/index.tsx
create mode 100644 modules/Menu/container/BaseMenu/index.tsx
diff --git a/components/LateralMenu/index.tsx b/components/LateralMenu/index.tsx
new file mode 100644
index 0000000..a7f73c8
--- /dev/null
+++ b/components/LateralMenu/index.tsx
@@ -0,0 +1,147 @@
+import React, { ReactNode, ReactText } from 'react';
+import {
+ IconButton,
+ Box,
+ CloseButton,
+ Flex,
+ Icon,
+ useColorModeValue,
+ Link,
+ Drawer,
+ DrawerContent,
+ Text,
+ useDisclosure,
+ BoxProps,
+ FlexProps,
+} from '@chakra-ui/react';
+import { FiHome, FiPower, FiTrendingDown, FiTrendingUp, FiMenu } from 'react-icons/fi';
+import { IconType } from 'react-icons';
+
+interface LinkItemProps {
+ name: string;
+ icon: IconType;
+}
+const LinkItems: Array = [
+ { name: 'Home', icon: FiHome },
+ { name: 'Create income', icon: FiTrendingUp },
+ { name: 'Create expense', icon: FiTrendingDown },
+ { name: 'Logout', icon: FiPower },
+];
+
+export const LateralMenu = ({ children }: { children: ReactNode }) => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ return (
+
+ onClose} display={{ base: 'none', md: 'block' }} />
+
+
+
+
+
+ {/* mobilenav */}
+
+
+ {children}
+
+
+ );
+};
+
+interface SidebarProps extends BoxProps {
+ onClose: () => void;
+}
+
+const SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
+ return (
+
+
+
+ MyBills
+
+
+
+ {LinkItems.map(link => (
+
+ {link.name}
+
+ ))}
+
+ );
+};
+
+interface NavItemProps extends FlexProps {
+ icon: IconType;
+ children: ReactText;
+}
+const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
+ return (
+
+
+ {icon && (
+
+ )}
+ {children}
+
+
+ );
+};
+
+interface MobileProps extends FlexProps {
+ onOpen: () => void;
+}
+const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
+ return (
+
+ } />
+
+
+ Logo
+
+
+ );
+};
diff --git a/components/index.ts b/components/index.ts
index 9a1f7f4..988d6ce 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -3,3 +3,4 @@ export * from './Input';
export * from './Select';
export * from './DatePicker';
export * from './Modal';
+export * from './LateralMenu';
diff --git a/configs/theme.tsx b/configs/theme.tsx
index 1b98928..43ce687 100644
--- a/configs/theme.tsx
+++ b/configs/theme.tsx
@@ -1,20 +1,13 @@
import { extendTheme, ThemeConfig } from '@chakra-ui/react';
const config: ThemeConfig = {
- initialColorMode: 'dark',
+ initialColorMode: 'light',
useSystemColorMode: false,
};
const theme = extendTheme({
config,
- colors: { red: { 500: '#FF1033', 700: '#93002A' }, gray: { 100: '#f8f9fa' } },
- styles: {
- global: {
- 'html, body': {
- background: 'gray.100',
- },
- },
- },
+ styles: {},
});
export default theme;
diff --git a/modules/Authentication/container/FormLogin/index.tsx b/modules/Authentication/container/FormLogin/index.tsx
index 1dc80ee..3c110d3 100644
--- a/modules/Authentication/container/FormLogin/index.tsx
+++ b/modules/Authentication/container/FormLogin/index.tsx
@@ -63,7 +63,7 @@ const FormLogin = () => {
marginBottom="10px"
/>
-
+
diff --git a/modules/Bill/container/ListBills/index.tsx b/modules/Bill/container/ListBills/index.tsx
index 5ccce41..06bff35 100644
--- a/modules/Bill/container/ListBills/index.tsx
+++ b/modules/Bill/container/ListBills/index.tsx
@@ -20,13 +20,9 @@ const ListBills = () => {
const loadBills = useCallback(() => {
if (!userId) return;
- billsCollection
- .where('userId', '==', userId)
- .where('year', '==', filters?.year)
- .where('month', '==', filters?.month)
- .onSnapshot(({ docs }) => {
- setBills(docs.map(bill => ({ id: bill.id, ...bill.data() } as Bill)));
- });
+ billsCollection.where('userId', '==', userId).onSnapshot(({ docs }) => {
+ setBills(docs.map(bill => ({ id: bill.id, ...bill.data() } as Bill)));
+ });
}, [filters]);
useEffect(() => {
diff --git a/modules/Menu/container/BaseMenu/index.tsx b/modules/Menu/container/BaseMenu/index.tsx
new file mode 100644
index 0000000..db0bcbc
--- /dev/null
+++ b/modules/Menu/container/BaseMenu/index.tsx
@@ -0,0 +1,16 @@
+import React, { useCallback, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button } from '@chakra-ui/button';
+import { Flex } from '@chakra-ui/react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
+
+import BaseField from '@Modules/BaseModule/interfaces/BaseField';
+import renderFields from '@Modules/BaseModule/shared/renderFields';
+
+const BaseMenu = () => {
+ return aqui haverá um menu
;
+};
+
+export { BaseMenu };
+export default BaseMenu;
diff --git a/package.json b/package.json
index 2769521..13610a7 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"react-datepicker": "^4.2.1",
"react-dom": "17.0.2",
"react-hook-form": "^7.12.2",
+ "react-icons": "^4.3.1",
"yup": "^0.32.10"
},
"devDependencies": {
diff --git a/pages/index.tsx b/pages/index.tsx
index b8f9a6c..e9fbffa 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,6 +4,7 @@ import { Box } from '@chakra-ui/react';
import withAuth from '@/hoc/withAuth';
import { auth } from '@Configs/Firebase';
+import { LateralMenu } from '@Components';
import ListBills from '../modules/Bill/container/ListBills';
@@ -11,16 +12,20 @@ const Dashboard = () => {
const router = useRouter();
return (
-
-
+ <>
+
+
+
-
-
-
+
+
+
+
+
);
};
diff --git a/pages/styles.css b/pages/styles.css
index 38c8365..de292b6 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -1,4 +1,4 @@
-.light-theme{
+/* .light-theme{
--light-gray: var(--chakra-colors-gray-200);
--gray: var(--chakra-colors-gray-300);
--blue700:var(--chakra-colors-blue-600);
@@ -12,6 +12,7 @@
--text:var(--chakra-colors-black);
--negative-text:var(--chakra-colors-white);
}
+
.dark-theme{
--light-gray: var(--chakra-colors-gray-600);
--gray: var(--chakra-colors-gray-500);
@@ -25,10 +26,10 @@
--monthBackground: var(--chakra-colors-gray-700);
--text:var(--chakra-colors-gray-200);
--negative-text:var(--chakra-colors-black);
-}
+} */
/* if you dont want to use chakra's theme use this class in the wrapping div. These are the exact original values */
-.light-theme-original{
+/* .light-theme-original{
--light-gray: #cccccc;
--gray: #b3b3b3;
--blue700:#2a69ac;
@@ -38,7 +39,7 @@
--blue300: #e2e8f0;
--blue200: #edf2f7;
--blue100: #f7fafc;
-}
+} */
.react-datepicker {
font-family: unset;
font-size: 0.9rem;
diff --git a/yarn.lock b/yarn.lock
index c271d22..e647df4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4172,6 +4172,11 @@ react-hook-form@^7.12.2:
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.12.2.tgz#2660afbf03c4ef360a9314ebf46ce3d972296c77"
integrity sha512-cpxocjrgpMAJCMJQR51BQhMoEx80/EQqePNihMTgoTYTqCRbd2GExi+N4GJIr+cFqrmbwNj9wxk5oLWYQsUefg==
+react-icons@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+ integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
react-is@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"