rikhall1515 · rikhall1515 · Apr 19, 2024 · Apr 19, 2024 · Apr 19, 2024 · Apr 19, 2024
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
 import "./globals.css";
+import Providers from "@/context";
 import { env } from "@/env/client";
 import { VERCEL_ENV } from "@/next.constants.mjs";
 const inter = Inter({ subsets: ["latin"] });
@@ -33,9 +34,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        {children}
+        <Providers>{children}</Providers>
         {VERCEL_ENV && (
           <>
             <Analytics />

@@ -0,0 +1,66 @@
+"use client";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState, createContext, useContext } from "react";
+import { getCookieConsentValue } from "react-cookie-consent";
+// export type CookieStore = {
+//   preferences: boolean;
+//   analytics: boolean;
+//   advertising: boolean;
+//   consent: boolean;
+//   isChangeConsentMenuOpen: boolean;
+//   isManageConsentMenuOpen: boolean;
+//   toggleChangeConsentMenu: () => void;
+//   toggleManageConsentMenu: () => void;
+//   toggleSelectCookies: (
+//     preferences: boolean,
+//     analytics: boolean,
+//     advertising: boolean,
+//     consent: boolean
+//   ) => void;
+// };
+
+// export const CookieContext = createContext<CookieStore | undefined>(undefined);
+
+type ConsentValue = {
+  hasConsentValue: boolean;
+  setHasConsentValue: Dispatch<SetStateAction<boolean>>;
+};
+
+export const CookieContext = createContext<ConsentValue | undefined>(undefined);
+export function useCookieContext() {
+  const cookieStore = useContext(CookieContext);
+
+  if (cookieStore === undefined) {
+    throw new Error(
+      "useCookieContext must be used with a CookieContext provider"
+    );
+  }
+
+  return cookieStore;
+}
+
+export default function CookieContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [hasConsentValue, setHasConsentValue] = useState(false);
+
+  useEffect(() => {
+    setHasConsentValue(!!getCookieConsentValue());
+  }, []);
+  return (
+    <>
+      <CookieContext.Provider value={{ hasConsentValue, setHasConsentValue }}>
+        {children}
+      </CookieContext.Provider>
+    </>
+  );
+}
+/**
+ *   const [hasConsentValue, setHasConsentValue] = useState(false);
+
+  useEffect(() => {
+    setHasConsentValue(!!getCookieConsentValue());
+  }, []);
+ */
@@ -0,0 +1,15 @@
+import CookieContextProvider from "./cookie";
+import SidebarContextProvider from "./sidebar";
+import ThemeContextProvider from "./theme";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <ThemeContextProvider>
+        <SidebarContextProvider>
+          <CookieContextProvider>{children}</CookieContextProvider>
+        </SidebarContextProvider>
+      </ThemeContextProvider>
+    </>
+  );
+}
@@ -0,0 +1,77 @@
+"use client";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  createContext,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+
+type SidebarStore = {
+  isExpanded: boolean;
+  setIsExpanded: Dispatch<SetStateAction<boolean>>;
+  isAtTop: boolean;
+  setIsAtTop: Dispatch<SetStateAction<boolean>>;
+  toggle: () => void;
+  mainMenuBtnRef: RefObject<HTMLButtonElement>;
+  btnInSidebarRef: RefObject<HTMLButtonElement>;
+  sidebarRef: RefObject<HTMLElement>;
+};
+
+export const SidebarContext = createContext<SidebarStore | undefined>(
+  undefined
+);
+export function useSidebarContext() {
+  const sidebarStore = useContext(SidebarContext);
+
+  if (sidebarStore === undefined) {
+    throw new Error(
+      "useSidebarContext must be used with a SidebarContext provider"
+    );
+  }
+
+  return sidebarStore;
+}
+
+export default function SidebarContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isAtTop, setIsAtTop] = useState(true);
+  const mainMenuBtnRef = useRef<HTMLButtonElement>(null);
+  const btnInSidebarRef = useRef<HTMLButtonElement>(null);
+  const sidebarRef = useRef<HTMLElement>(null);
+  const toggle = () => {
+    setIsExpanded(!isExpanded);
+    if (sidebarRef.current) {
+      if (!isExpanded) {
+        disableBodyScroll(sidebarRef.current);
+        return;
+      }
+      enableBodyScroll(sidebarRef.current);
+    }
+  };
+  return (
+    <>
+      <SidebarContext.Provider
+        value={{
+          isExpanded,
+          setIsExpanded,
+          isAtTop,
+          setIsAtTop,
+          toggle,
+          mainMenuBtnRef,
+          btnInSidebarRef,
+          sidebarRef,
+        }}
+      >
+        {children}
+      </SidebarContext.Provider>
+    </>
+  );
+}
@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+export default function ThemeContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        {children}
+      </ThemeProvider>
+    </>
+  );
+}