fix: fix toglle theme

package.json

@@ -2,6 +2,9 @@
   "name": "portfolio-jose-allef",
   "version": "2.0.0",
   "main": "src/app/page.ts",
+  "engines": {
+    "node": "20.x"
+  },
   "scripts": {
     "dev": "next",
     "build": "next build",
@@ -69,4 +72,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/app/globals.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Estilos globais para personalizar a barra de rolagem */
+::-webkit-scrollbar {
+  width: 8px; /* Largura da barra de rolagem */
+  height: 8px; /* Altura da barra de rolagem horizontal */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #004eb4; /* Cor do "polegar" da barra de rolagem */
+  border-radius: 4px; /* Bordas arredondadas */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #4d98fa3f; /* Cor do "trilho" da barra de rolagem */
+  border-radius: 4px; /* Bordas arredondadas */
+}

src/components/commons/Box/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ThemeApp } from '@components/wrappers/context';
 import React, { ReactNode, useContext } from 'react';
 

src/components/commons/Header/index.tsx

@@ -1,13 +1,20 @@
-'use client'
+'use client';
 
 import { useContext } from 'react';
 import { ThemeApp } from '../../wrappers/context';
 import NavBar from '../NavBar';
 
 export default function Header() {
   const { toggleTheme, themeApp } = useContext(ThemeApp);
+  // const [isMounted, setIsMounted] = useState(false);
 
-  console.log("Theme", themeApp)
+  // useEffect(() => {
+  //   setIsMounted(true);
+  // }, []);
+
+  // if (!isMounted) {
+  //   return null; // Renderizar um fallback até o cliente estar montado
+  // }
 
   return (
     <header className="flex items-center justify-around flex-wrap w-full text-white font-bold text-lg p-4 pt-6">
@@ -26,32 +33,13 @@ export default function Header() {
       <div className="flex justify-end items-center order-2 md:order-none lg:flex-1 lg:order-none w-6/12 lg:w-1/4 xl:w-1/4">
         <div
           onClick={() => toggleTheme()}
-          className={`relative flex justify-around items-center w-[70px] h-[25px] rounded-full transition-all duration-300 ${themeApp === 'dark' ? "bg-[#4d98fa3f]" : "bg-[#2c4efa3f]"} md:w-[80px] md:h-[30px] cursor-pointer`}>
-          <div
-          // onClick={() => setTheme('dark')}
-          >
-            <img src="/image/moon.svg" alt="Ícone Noite" />
-          </div>
-
+          className={`relative flex justify-around items-center w-[70px] h-[25px] rounded-full transition-all duration-300 ${themeApp === 'dark' ? 'bg-[#4d98fa3f]' : 'bg-[#2c4efa3f]'} md:w-[80px] md:h-[30px] cursor-pointer`}
+        >
+          <img src="/image/moon.svg" alt="Ícone Noite" />
           <button
-            className={`absolute w-[25px] h-[25px] bg-slate-200 rounded-full transition-all duration-300 border-none ${themeApp === 'light' ? 'ml-[43px]' : 'left-0'} md:w-[30px] md:h-[30px]`}
-          >
-          </button>
-
-          {/* <div onClick={() => setTheme('sistema')}>
-            <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6">
-              <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z" strokeWidth="2" strokeLinejoin="round" className="stroke-amber-400 fill-sky-400/20">
-              </path>
-              <path d="M14 15c0 3 2 5 2 5H8s2-2 2-5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="stroke-amber-400">
-              </path>
-            </svg>
-          </div> */}
-
-          <div
-          // onClick={() => setTheme('light')}
-          >
-            <img src="/image/sun.svg" alt="Icone Sol" />
-          </div>
+            className={`absolute w-[25px] h-[25px] bg-slate-200 rounded-full transition-all duration-300 border-none ${themeApp === 'light' ? 'ml-[38px] md:ml-[44px]' : 'left-1'} md:w-[26px] md:h-[26px]`}
+          />
+          <img src="/image/sun.svg" alt="Ícone Sol" />
         </div>
       </div>
     </header>

src/components/wrappers/context/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { parseCookies, setCookie } from 'nookies';
 import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -13,36 +15,32 @@ export const ThemeApp = createContext<IContextType>({
 
 export function ThemeGlobalApp({ children }: { children: React.ReactNode }) {
   const cookies = parseCookies();
-  const initialTheme = cookies.theme || 'dark';
-  const [themeApp, setThemeApp] = useState<string>(initialTheme);
+  const [themeApp, setThemeApp] = useState<string>('dark');
+
+  const getThemeDevice = useCallback(() => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }, []);
 
   const toggleTheme = useCallback(() => {
-    const newTheme = themeApp === 'dark' ? 'light' : 'dark';
-    setThemeApp(newTheme);
-    setCookie(null, 'theme', newTheme, {
-      maxAge: 30 * 24 * 60 * 60,
-      path: '/',
+    setThemeApp(prevTheme => {
+      const newTheme = prevTheme === 'dark' ? 'light' : 'dark';
+      setCookie(null, 'theme', newTheme, {
+        maxAge: 30 * 24 * 60 * 60,
+        path: '/',
+      });
+      return newTheme;
     });
-  }, [themeApp]);
+  }, []);
 
   const providers = useMemo(() => ({
     themeApp,
     toggleTheme,
   }), [themeApp, toggleTheme]);
 
   useEffect(() => {
-    if (!cookies.theme) {
-      const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      setThemeApp(preferredTheme);
-      setCookie(null, 'theme', preferredTheme, {
-        maxAge: 30 * 24 * 60 * 60,
-        path: '/',
-      });
-    } else {
-      console.log("Theme", cookies.theme)
-      setThemeApp(cookies.theme);
-    }
-  }, []);
+    const theme = cookies.theme || getThemeDevice();
+    setThemeApp(theme);
+  }, [cookies.theme, getThemeDevice]);
 
   return (
     <ThemeApp.Provider value={providers}>