feat: Componente do menu funcionando

ramon541 · Apr 14, 2024 · 060a09e · 060a09e
1 parent 975dcd1
commit 060a09e
Show file tree

Hide file tree

Showing 15 changed files with 195 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "fastDeploy": "del build && del dist && yarn build && ren dist build && yarn deploy"
   },
   "dependencies": {
     "chart.js": "^4.4.2",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,15 @@
 import { RouterProvider } from "react-router-dom";
 import routes from "./routes";
+import { useSharedWindowHeight } from "./hooks";
 
 export default function App() {
+  //=======================================================
+  // Estado para observar o tamanho da janela
+  const { setWindowHeight } = useSharedWindowHeight();
+  window.addEventListener("resize", function () {
+    setWindowHeight(this.window.innerHeight);
+  });
+
+  //=======================================================
   return <RouterProvider router={routes} />;
 }
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -40,7 +40,7 @@ export default function Footer() {
     );
   }
 
-  //========================Return=========================
+  //=========================Return=========================
   return (
     <div className={styles.wrapper}>
       {renderFooter()}

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -6,7 +6,7 @@ import Colors from "../../styles/Colors";
 
 import { useSharedMenu } from "../../hooks";
 
-export default function Header({ page }) {
+export default function Header({ page, innerRef }) {
   const { menu, openMenu, closeMenu } = useSharedMenu();
 
   function renderTopElements() {
@@ -38,7 +38,7 @@ export default function Header({ page }) {
   }
   //========================Return=========================
   return (
-    <header className={styles.headerWrapper}>
+    <header ref={innerRef} className={styles.headerWrapper}>
       {renderTopElements()}
       {renderBottomElements()}
     </header>

diff --git a/src/components/Header/index.module.css b/src/components/Header/index.module.css
@@ -6,8 +6,10 @@
   justify-content: center;
   gap: 1rem;
   padding: var(--header-padding) 0;
-  position: relative;
+  position: fixed;
   padding: 2rem;
+  width: 100%;
+  z-index: 2;
 }
 
 .topHeaderWrapper {

diff --git a/src/components/Menu/index.jsx b/src/components/Menu/index.jsx
@@ -1,18 +1,56 @@
 import React from "react";
+import Colors from "../../styles/Colors";
 
 export default function Menu() {
   return (
     <div
       style={{
         display: "flex",
         flexDirection: "column",
-        // position: "relative",
-        overflowX: "auto",
+        background: Colors.white,
       }}
     >
       <h1>Menu</h1>
       <h1>Menu</h1>
       <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
+      <h1>Menu</h1>
     </div>
   );
 }
diff --git a/src/components/ObservatorioIFTMLogo/index.jsx b/src/components/ObservatorioIFTMLogo/index.jsx
@@ -24,7 +24,7 @@ export default memo(function ObservatorioIFTMLogo({ black }) {
   };
 
   return (
-    <Link to="/observatorioiftm">
+    <Link to="/observatorioiftm/">
       <div className={styles.logo1}>
         <Chart
           style={{ marginTop: "-16px" }}

diff --git a/src/components/ObservatorioIFTMLogo/index.module.css b/src/components/ObservatorioIFTMLogo/index.module.css
@@ -1,6 +1,7 @@
 .logo1 {
   text-align: center;
   display: flex;
+  z-index: 0;
 }
 
 .logo1 > .p-chart {

diff --git a/src/hooks/index.jsx b/src/hooks/index.jsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { useBetween } from "use-between";
 
+//=======================================================
 const useMenu = () => {
   const [menu, setMenu] = useState(false);
   const openMenu = useCallback(() => setMenu(true), []);
@@ -11,5 +12,14 @@ const useMenu = () => {
     closeMenu,
   };
 };
-
 export const useSharedMenu = () => useBetween(useMenu);
+
+//=======================================================
+const useWindowHeight = () => {
+  const [windowHeight, setWindowHeight] = useState(0);
+  return {
+    windowHeight,
+    setWindowHeight,
+  };
+};
+export const useSharedWindowHeight = () => useBetween(useWindowHeight);
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -6,6 +6,54 @@ export default memo(function Home() {
 
   return (
     <Container>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
+      <h1>Vite + React</h1>
       <h1>Vite + React</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>

diff --git a/src/pages/RootLayout/index.jsx b/src/pages/RootLayout/index.jsx
@@ -2,19 +2,64 @@ import { Outlet, useLocation } from "react-router-dom";
 import Header from "../../components/Header";
 import Footer from "../../components/Footer";
 import Menu from "../../components/Menu";
+import Colors from "../../styles/Colors";
 
+//==========================Hooks==========================
 import { useSharedMenu } from "../../hooks";
+import { useSharedLogicState, useOnInit } from "./logic";
 
 export default function RootLayout() {
-  const { menu } = useSharedMenu();
+  const { height, ref } = useSharedLogicState();
   const location = useLocation();
+  const { menu, closeMenu } = useSharedMenu();
+  useOnInit();
+
+  //=======================================================
+  function renderMenu() {
+    return (
+      menu && (
+        <div
+          style={{
+            display: "flex",
+            position: "fixed",
+            width: "100%",
+            zIndex: 1,
+          }}
+        >
+          <div
+            style={{
+              marginTop: `${height}vh`,
+              height: `${100 - height}vh`,
+              width: "20%",
+              overflowY: "auto",
+              zIndex: 1,
+            }}
+          >
+            <Menu />
+          </div>
+          <div
+            style={{
+              background: Colors.fadeBackground,
+              width: "80%",
+            }}
+            onClick={closeMenu}
+          />
+        </div>
+      )
+    );
+  }
+
+  //=========================Return=========================
   return (
     <>
       <Header
-        page={location.pathname === "/observatorioiftm" ? "Home" : "Outra rota"}
+        innerRef={ref}
+        page={
+          location.pathname === "/observatorioiftm/" ? "Home" : "Outra rota"
+        }
       />
-      <div style={{ display: "flex", width: "100%" }}>
-        {menu && <Menu />}
+      {renderMenu()}
+      <div style={{ marginTop: `${height}vh` }}>
         <Outlet />
       </div>
       <Footer />

diff --git a/src/pages/RootLayout/logic/index.jsx b/src/pages/RootLayout/logic/index.jsx
@@ -0,0 +1,25 @@
+import { useRef, useState, useEffect } from "react";
+import { useBetween } from "use-between";
+import { useSharedWindowHeight } from "../../../hooks";
+
+const useLogicState = () => {
+  const ref = useRef();
+  const [height, setHeight] = useState(0);
+
+  return {
+    ref,
+    height,
+    setHeight,
+  };
+};
+export const useSharedLogicState = () => useBetween(useLogicState);
+
+export function useOnInit() {
+  const { setHeight, ref } = useSharedLogicState();
+  const { windowHeight } = useSharedWindowHeight();
+
+  useEffect(() => {
+    const currentHeight = ref.current ? ref.current.offsetHeight : 0;
+    setHeight((100 * currentHeight) / window.innerHeight);
+  }, [ref.offsetHeight, windowHeight]);
+}
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
@@ -7,7 +7,7 @@ import Home from "../pages/Home";
 
 const routes = createBrowserRouter([
   {
-    path: "/observatorioiftm",
+    path: "/observatorioiftm/",
     element: <RootLayout />,
     children: [
       {

diff --git a/src/styles/Colors/index.jsx b/src/styles/Colors/index.jsx
@@ -14,6 +14,7 @@ const Colors = {
   backgroundDarkBlue: "#04132A",
   backgroundBlue: "#071D41",
   transparent: "#0000000",
+  fadeBackground: "#00000075",
 
   //= ------------- Text colors -------------
   textBlack: "#333333",

diff --git a/vite.config.js b/vite.config.js
@@ -4,5 +4,5 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/observatorioiftm",
+  base: "/observatorioiftm/",
 });