going to go back to track after all these injuries so rip coding time

src/app/layout.tsx

@@ -42,7 +42,6 @@ export default function RootLayout({
                     <Header />
                     {children}
                     <Footer />
-                    <div id="portal" />
                 </ThemeProvider>
             </body>
         </html>

src/app/page.tsx

@@ -1,10 +1,19 @@
+"use client";
+
 import { Dropdown } from "@/components/dropdown";
+import { useRef } from "react";
 
 export default function HomePage() {
+    const referenceElement = useRef<HTMLDivElement>(null);
+
     return (
         <>
-            <div>hi</div>
-            <Dropdown />
+            <div className="bg-slate-600" ref={referenceElement}>
+                hi
+            </div>
+            <Dropdown referenceElement={referenceElement}>
+                <div className="bg-slate-600">wow</div>
+            </Dropdown>
         </>
     );
 }

src/app/test/1/page.tsx

@@ -3,7 +3,7 @@ import { Page1 } from "./page1";
 export default function HomePage() {
     return (
         <>
-            <div className="h-[200vh] text-neutral-700">
+            <div className="h-[50vh] text-neutral-700">
                 blancblancblancblancblancblancblancblancblancblancblanc
                 <span className="text-red-700">This</span> is a
                 <span className="text-sky-400">webapge</span>

src/app/test/1/page1.tsx

@@ -35,8 +35,10 @@ export function Page1() {
 function Test() {
     return (
         <>
-            <div>Server side rendering is disabled</div>
-            {localStorage.getItem("theme")}
+            <div className="text-neutral-700">
+                Server side rendering is disabled theme:{" "}
+                {localStorage.getItem("theme")}
+            </div>
         </>
     );
 }

src/components/dropdown/dropdown.tsx

@@ -1,6 +1,31 @@
 "use client";
 
-export function Dropdown() {
-    const theme = localStorage.getItem("theme");
-    return <div>{theme}</div>;
+import { RefObject } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function Dropdown({
+    children,
+    referenceElement,
+    className
+}: {
+    children: React.ReactNode;
+    referenceElement: RefObject<HTMLElement>;
+    className?: string;
+}) {
+    const { top, bottom, right, left } =
+        referenceElement.current?.getBoundingClientRect() || {
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0
+        };
+
+    return (
+        <div
+            className={twMerge(`fixed`, className)}
+            style={{ top, bottom, right, left }}
+        >
+            {children}
+        </div>
+    );
 }

src/components/dropdown/index.tsx

@@ -1,10 +1,15 @@
 import { Dropdown as DropdownElement } from "@/components/dropdown/dropdown";
 import { InPortal } from "@/util/helpers/inPortal";
+import { RefObject } from "react";
 
-export function Dropdown() {
+export function Dropdown(props: {
+    children: React.ReactNode;
+    referenceElement: RefObject<HTMLElement>;
+    className?: string;
+}) {
     return (
         <InPortal>
-            <DropdownElement />
+            <DropdownElement {...props} />
         </InPortal>
     );
 }

src/components/header/icons/githubIcon.tsx

@@ -9,7 +9,7 @@ export function GithubIcon() {
             <HeaderIcon className="w-8">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 98 96"
+                    viewBox="0 0 98 98"
                     className="h-5"
                 >
                     <path

src/components/header/icons/headerIcon.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useCallback, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 export function HeaderIcon({

src/util/contexts/theme/theme.context.tsx

@@ -30,7 +30,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     // Runs once on the client and uses reference to current theme to check if "system" and based of "prefers-color-scheme" add dark to body
     useEffect(() => {
-        function themeChange({ matches }: { matches: boolean }) {
+        function themeChange({ matches }: MediaQueryListEventInit) {
             if (matches && refTheme.current === "system") {
                 document.documentElement.classList.add("dark");
             } else {

src/util/helpers/inPortal/index.tsx

@@ -2,7 +2,6 @@ import { NoSSRWrapper } from "@/util/helpers/noSSRWrapper";
 import { InPortal as Portal } from "@/util/helpers/inPortal/inPortal";
 
 export function InPortal({ children }: { children: React.ReactNode }) {
-    console.log("InPortal SSR");
     return (
         <NoSSRWrapper>
             <Portal>{children}</Portal>

src/util/hooks/useLocalStorage.hook.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useOnlyOnChange } from "./useOnChange.hook";
 
 export function useLocalStorage<T>(
@@ -19,22 +19,28 @@ export function useLocalStorage<T>(
         }
     }, []);
 
+    // Goofy idea but is it really going to be faster to use a ref to keep track of the key and pass by reference instead of adding and removing listeners?
+    const keyTheme = useRef(key);
+    useEffect(() => {
+        keyTheme.current = key;
+    }, [key]);
 
     // When other tabs change localstorage update on this page
     useEffect(() => {
         function storageChange({
             key: keyChanged,
             newValue
         }: StorageEventInit) {
-            if (key === keyChanged) {
+            // reference should pick up current value of key
+            if (keyTheme.current === keyChanged) {
                 setValue(JSON.parse(newValue!) as T);
             }
         }
 
         window.addEventListener("storage", storageChange);
 
         return () => window.removeEventListener("storage", storageChange);
-    }, [key]);
+    }, []);
 
     // after value has been changed set the localstorage with a debounce.
     // don't need debounce dependancy since if it changed I don't want to waste time setting the localstorage when it is the same value
@@ -46,6 +52,6 @@ export function useLocalStorage<T>(
 
         return () => clearTimeout(delayDebounceFn);
     }, [key, value]);
-    
+
     return [value, setValue];
 }

src/util/hooks/useOnChange.hook.tsx

@@ -1,6 +1,16 @@
 "use client";
 
-import { useEffect, DependencyList, useState, EffectCallback } from "react";
+import { useEffect, useState, DependencyList, EffectCallback } from "react";
+
+function useHasMounted() {
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+
+    return hasMounted;
+}
 
 // This works when you are on client and inital data is inaccurate and you want to wait until the data is synced up
 // since this doesn't run on first render and only when dependancies change
@@ -10,22 +20,9 @@ export function useOnlyOnChange(
 ) {
     const hasMounted = useHasMounted();
 
-    useEffect(
-        () => {
-            if (hasMounted) {
-                return callback();
-            }
-        },
-        dependancies ? dependancies : []
-    );
-}
-
-function useHasMounted() {
-    const [hasMounted, setHasMounted] = useState(false);
-
     useEffect(() => {
-        setHasMounted(true);
-    }, []);
-
-    return hasMounted;
+        if (hasMounted) {
+            return callback();
+        }
+    }, dependancies);
 }