diff --git a/frontend/src/assets/icons/Menu/Accounttree.svg b/frontend/src/assets/icons/Menu/Accounttree.svg new file mode 100644 index 0000000..32f1a7b --- /dev/null +++ b/frontend/src/assets/icons/Menu/Accounttree.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Configuration.svg b/frontend/src/assets/icons/Menu/Configuration.svg new file mode 100644 index 0000000..5dbf62c --- /dev/null +++ b/frontend/src/assets/icons/Menu/Configuration.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/icons/Menu/Contact.svg b/frontend/src/assets/icons/Menu/Contact.svg new file mode 100644 index 0000000..7f6bd8c --- /dev/null +++ b/frontend/src/assets/icons/Menu/Contact.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Dashboard.svg b/frontend/src/assets/icons/Menu/Dashboard.svg new file mode 100644 index 0000000..8549803 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Graph.svg b/frontend/src/assets/icons/Menu/Graph.svg new file mode 100644 index 0000000..6a962fd --- /dev/null +++ b/frontend/src/assets/icons/Menu/Graph.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Mensage.svg b/frontend/src/assets/icons/Menu/Mensage.svg new file mode 100644 index 0000000..ca4ece1 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Mensage.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Notifications.svg b/frontend/src/assets/icons/Menu/Notifications.svg new file mode 100644 index 0000000..7153440 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Notifications.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Peoplealt.svg b/frontend/src/assets/icons/Menu/Peoplealt.svg new file mode 100644 index 0000000..f9c8ff4 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Peoplealt.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/assets/icons/Menu/Send.svg b/frontend/src/assets/icons/Menu/Send.svg new file mode 100644 index 0000000..e3826db --- /dev/null +++ b/frontend/src/assets/icons/Menu/Send.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/icons/Menu/Signoff.svg b/frontend/src/assets/icons/Menu/Signoff.svg new file mode 100644 index 0000000..86dbd1a --- /dev/null +++ b/frontend/src/assets/icons/Menu/Signoff.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/icons/Menu/Super.svg b/frontend/src/assets/icons/Menu/Super.svg new file mode 100644 index 0000000..9944ddd --- /dev/null +++ b/frontend/src/assets/icons/Menu/Super.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Swap.svg b/frontend/src/assets/icons/Menu/Swap.svg new file mode 100644 index 0000000..b42c392 --- /dev/null +++ b/frontend/src/assets/icons/Menu/Swap.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/Menu/Warning.svg b/frontend/src/assets/icons/Menu/Warning.svg new file mode 100644 index 0000000..e1e22ff --- /dev/null +++ b/frontend/src/assets/icons/Menu/Warning.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/icons/Menu/Whatsapp.svg b/frontend/src/assets/icons/Menu/Whatsapp.svg new file mode 100644 index 0000000..7006dba --- /dev/null +++ b/frontend/src/assets/icons/Menu/Whatsapp.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/src/components/IconsComponents/Icons.jsx b/frontend/src/components/IconsComponents/Icons.jsx new file mode 100644 index 0000000..f9e00be --- /dev/null +++ b/frontend/src/components/IconsComponents/Icons.jsx @@ -0,0 +1,11 @@ +//Choice Icon by name in list +import React from "react"; + + +const Icons = ({ icon }) => { + console.log(icon); + return null; +}; + +export default Icons; + diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx index 1b9128b..27b243b 100644 --- a/frontend/src/components/Menu/MenuComponent.jsx +++ b/frontend/src/components/Menu/MenuComponent.jsx @@ -1,16 +1,38 @@ import React from "react"; -import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style"; - -import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"; -import { AuthContext } from "../../context/Auth/AuthContext"; import VideoComponent from "../VideoTag/VideoComponent"; +import { ReactComponent as Tickets } from "../../assets/icons/Menu/Whatsapp.svg"; +import { ReactComponent as Contact } from "../../assets/icons/Menu/Contact.svg"; +import { ReactComponent as Reminder } from "../../assets/icons/Menu/Send.svg"; +import { ReactComponent as FastAanswer } from "../../assets/icons/Menu/Mensage.svg"; + +import { ReactComponent as Users } from "../../assets/icons/Menu/Peoplealt.svg"; +import { ReactComponent as Rows } from "../../assets/icons/Menu/Accounttree.svg"; +import { ReactComponent as Conetions } from "../../assets/icons/Menu/Swap.svg"; +import { ReactComponent as Dashboard } from "../../assets/icons/Menu/Dashboard.svg"; +import { ReactComponent as FastResumes } from "../../assets/icons/Menu/Graph.svg"; +import { ReactComponent as Super } from "../../assets/icons/Menu/Super.svg"; + +import { ReactComponent as Configuration } from "../../assets/icons/Menu/Configuration.svg"; + +import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style"; +import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext"; +import { AuthContext } from "../../context/Auth/AuthContext"; + +import img from "../../assets/images/Logo.png"; +import MenuItem from "./MenuItem"; + const MenuComponent = () => { + const [hover, setHover] = React.useState(false); const { whatsApps } = React.useContext(WhatsAppsContext); const { user } = React.useContext(AuthContext); const [connectionWarning, setConnectionWarning] = React.useState(false); + const HoverMenu = () => { + setHover(!hover); + }; + React.useEffect(() => { const delayDebounceFn = setTimeout(() => { if (whatsApps.length > 0) { @@ -34,13 +56,32 @@ const MenuComponent = () => { }, [whatsApps]); return ( - + + + {/*Menu Top Header*/} +
+
+ +
+
+ {/*Menu Top Header*/} + - link - link - link - link + {/* } to="/tickets" text="Tickets" hover={hover} /> */} + } text="Tickets" to="" hover={hover} /> + } text="Contatos" to="" hover={hover} /> + } text="Lembretes" to="" hover={hover} /> + } text="Respostas" to="" hover={hover} /> +
+ } text="Usuários" to="" hover={hover} /> + } text="Filas" to="" hover={hover} /> + } text="Conexões" to="" hover={hover} /> + } text="Dashboard" to="" hover={hover} /> + } text="Relatórios" to="" hover={hover} /> + } text="Supervisão" to="" hover={hover} /> +
+ } text="Configurações" to="" hover={hover} /> ); diff --git a/frontend/src/components/Menu/MenuComponent.style.jsx b/frontend/src/components/Menu/MenuComponent.style.jsx index bd8b430..bc4833f 100644 --- a/frontend/src/components/Menu/MenuComponent.style.jsx +++ b/frontend/src/components/Menu/MenuComponent.style.jsx @@ -8,9 +8,28 @@ const MenuStyled = styled.nav` height: 100vh; background: ${color.pricinpal.grisOscuro}; //Same background login z-index: 10; + animation: ${(props) => (props.hover ? "hover" : "hoveroff")} 0.5s forwards; + @keyframes hover { + from { + width: 76px; + } + to { + width: 218px; + } + } + @keyframes hoveroff { + from { + width: 218px; + } + to { + width: 76px; + } + } `; + //UL const MenuListStyled = styled.ul` + margin-top: 16px; position: relative; display: flex; flex-direction: column; @@ -20,15 +39,43 @@ const MenuListStyled = styled.ul` //LI const MenuListItemStyled = styled.li` + cursor: pointer; display: flex; flex-direction: row; - justify-content: center; + margin: 12px 28px; gap: 6px; color: ${color.pricinpal.blanco}; transition: all 0.2s linear; &:hover { color: ${color.pricinpal.naranja}; - transition: all 0.2s linear; + } + & a { + display: flex; + align-items: center; + color: ${color.pricinpal.blanco}; + gap: 12px; + text-decoration: none; + & :hover { + color: ${color.pricinpal.naranja}; + transition: all 0.2s linear; + } + p { + text-transform: capitalize; + font-family: "HelveticaRoman"; + font-size: 14px; + opacity: ${(props) => (props.hover ? "1" : "0")}; + display: ${(props) => (props.hover ? "block" : "none")}; + } + svg { + width: 18px; + height: 18px; + fill: ${color.pricinpal.blanco}; + transition: all 0.2s linear; + & :hover { + fill: ${color.pricinpal.naranja}; + transition: all 0.2s linear; + } + } } `; diff --git a/frontend/src/components/Menu/MenuItem.jsx b/frontend/src/components/Menu/MenuItem.jsx new file mode 100644 index 0000000..27cb391 --- /dev/null +++ b/frontend/src/components/Menu/MenuItem.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Link as RouterLink } from "react-router-dom"; + +import { MenuListItemStyled } from "./MenuComponent.style"; + +const MenuItem = ({ icon, text, to, hover }) => { + const RenderLink = React.useMemo( + () => React.forwardRef((itemProps, ref) => ), + [to] + ); + return ( + + + {icon ? icon : ""} +

{text ? text : ""}

+ + + ); +}; + +export default MenuItem; + diff --git a/frontend/src/index.js b/frontend/src/index.js index 4db0055..44b085f 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom"; -import CssBaseline from "@material-ui/core/CssBaseline"; import GlobalStyled from "./style/GlobalStyle"; import App from "./App"; diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index 179996a..c53b3a7 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -22,7 +22,7 @@ const LoggedInLayout = ({ children }) => { <> -
+
{children ? children : null}
diff --git a/frontend/src/routes/Route.js b/frontend/src/routes/Route.js index fab61b3..c929f4e 100644 --- a/frontend/src/routes/Route.js +++ b/frontend/src/routes/Route.js @@ -3,6 +3,7 @@ import { Route as RouterRoute, Redirect } from "react-router-dom"; import { AuthContext } from "../context/Auth/AuthContext"; import BackdropLoading from "../components/BackdropLoading"; +import Loading from "../components/LoadingScreen/Loading" const Route = ({ component: Component, isPrivate = false, ...rest }) => { const { isAuth, loading } = useContext(AuthContext); @@ -10,7 +11,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (!isAuth && isPrivate) { return ( <> - {loading && } + {loading && } ); @@ -19,7 +20,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { if (isAuth && !isPrivate) { return ( <> - {loading && } + {loading && } ; ); @@ -27,7 +28,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => { return ( <> - {loading && } + {loading && } ); diff --git a/frontend/src/style/GlobalStyle.jsx b/frontend/src/style/GlobalStyle.jsx index 305a4dd..8e26379 100644 --- a/frontend/src/style/GlobalStyle.jsx +++ b/frontend/src/style/GlobalStyle.jsx @@ -88,6 +88,9 @@ table { } //Patterns +html{ + overflow: hidden; +} h1{ ${texts.h1} color: ${color.pricinpal.blanco}