better handling of nav bar sizing

src/components/Bars.tsx

@@ -1,7 +1,26 @@
 import { Typewriter } from "./Typewriter";
+import { useBars } from "~/context/bars";
+import { createEffect, onMount } from "solid-js";
+
+export function LeftBar() {
+  const { setLeftBarSize } = useBars();
+  let ref: HTMLDivElement | undefined;
+
+  onMount(() => {
+    if (ref) {
+      const updateSize = () => {
+        setLeftBarSize(ref?.offsetWidth || 0);
+      };
+      
+      updateSize();
+      
+      const resizeObserver = new ResizeObserver(updateSize);
+      resizeObserver.observe(ref);
+      
+      return () => resizeObserver.disconnect();
+    }
+  });
 
-export function LeftBar(props: { ref: HTMLDivElement | undefined }) {
-  let ref = props.ref;
   return (
     <nav
       ref={ref}
@@ -35,13 +54,29 @@ export function LeftBar(props: { ref: HTMLDivElement | undefined }) {
   );
 }
 
-export function RightBar(props: { ref: HTMLDivElement | undefined }) {
-  let ref = props.ref;
+export function RightBar() {
+  const { setRightBarSize } = useBars();
+  let ref: HTMLDivElement | undefined;
+
+  onMount(() => {
+    if (ref) {
+      const updateSize = () => {
+        setRightBarSize(ref?.offsetWidth || 0);
+      };
+      
+      updateSize();
+      
+      const resizeObserver = new ResizeObserver(updateSize);
+      resizeObserver.observe(ref);
+      
+      return () => resizeObserver.disconnect();
+    }
+  });
+
   return (
     <nav
       ref={ref}
-      class="border-l-overlay2 fixed right-0 h-full min-h-screen w-fit max-w-[25%] border-l-2"
-    >
+      class="border-l-overlay2 fixed right-0 h-full min-h-screen w-fit max-w-[25%] border-l-2">
       <Typewriter keepAlive={false} class="z-50">
         <h3 class="hover:text-subtext0 w-fit text-center text-3xl underline transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105">
           Right Navigation

src/components/TerminalSplash.tsx

@@ -1,5 +1,5 @@
 import { Show, onMount, onCleanup, createSignal } from "solid-js";
-import { useSplash } from "../context/splash";
+import { useSplash } from "~/context/splash";
 
 const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
@@ -43,11 +43,11 @@ export function TerminalSplash() {
   return (
     <Show when={shouldRender()}>
       <div
-        class="fixed inset-0 z-50 w-screen h-screen bg-base flex overflow-hidden flex-col items-center justify-center mx-auto transition-opacity duration-500"
+        class="bg-base fixed inset-0 z-50 mx-auto flex h-screen w-screen flex-col items-center justify-center overflow-hidden transition-opacity duration-500"
         style={{ opacity: opacity() }}
       >
-        <div class="font-mono text-text text-4xl whitespace-pre-wrap p-8 max-w-3xl">
-          <div class="flex justify-center items-center">
+        <div class="text-text max-w-3xl p-8 font-mono text-4xl whitespace-pre-wrap">
+          <div class="flex items-center justify-center">
             {spinnerChars[showing()]}
           </div>
         </div>