Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

oooeee

Browse Source
This commit is contained in:
Michael Freno
2025-12-18 00:55:21 -05:00
parent 14da7f9912
commit 1142d6f126
4 changed files with 231 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/Bars.tsx
View File

@@ -1,30 +1,52 @@
import { Typewriter } from "./Typewriter";
import { useBars } from "~/context/bars";
import { createEffect, onMount } from "solid-js";
import { onMount, createEffect } from "solid-js";
export function LeftBar() {
const { setLeftBarSize } = useBars();
const { setLeftBarSize, leftBarVisible } = useBars();
let ref: HTMLDivElement | undefined;
let actualWidth = 0;
onMount(() => {
if (ref) {
const updateSize = () => {
setLeftBarSize(ref?.offsetWidth || 0);
actualWidth = ref?.offsetWidth || 0;
setLeftBarSize(leftBarVisible() ? actualWidth : 0);
};
updateSize();
const resizeObserver = new ResizeObserver(updateSize);
const resizeObserver = new ResizeObserver((entries) => {
// Use requestAnimationFrame to avoid ResizeObserver loop error
requestAnimationFrame(() => {
actualWidth = ref?.offsetWidth || 0;
setLeftBarSize(leftBarVisible() ? actualWidth : 0);
});
});
resizeObserver.observe(ref);
return () => resizeObserver.disconnect();
}
});
// Update size when visibility changes
createEffect(() => {
setLeftBarSize(leftBarVisible() ? actualWidth : 0);
});
return (
<nav
ref={ref}
class="border-r-overlay2 fixed h-full min-h-screen w-fit max-w-[25%] border-r-2"
class="border-r-overlay2 fixed h-full min-h-screen w-fit max-w-[25%] border-r-2 transition-transform duration-500 ease-out z-50"
classList={{
"-translate-x-full": !leftBarVisible(),
"translate-x-0": leftBarVisible()
}}
style={{
"transition-timing-function": leftBarVisible()
? "cubic-bezier(0.34, 1.56, 0.64, 1)" // Bounce out when revealing
: "cubic-bezier(0.4, 0, 0.2, 1)" // Smooth when hiding
}}
>
<Typewriter speed={10} keepAlive={10000} class="z-50 pr-8 pl-4">
<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">
@@ -37,17 +59,31 @@ export function LeftBar() {
{/*TODO:Grab and render 5 most recent blog posts here */}
<li></li>
</ul>
<ul class="gap-4">
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="/">Home</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="/blog">Blog</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="#services">Services</a>
</li>
</ul>
<div class="flex flex-col gap-4">
<ul class="gap-4">
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="/">Home</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="/blog">Blog</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="#services">Services</a>
</li>
</ul>
{/* Right bar navigation merged for mobile */}
<ul class="gap-4 md:hidden border-t border-overlay0 pt-4">
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="#home">Home</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="#about">About</a>
</li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
<a href="#services">Services</a>
</li>
</ul>
</div>
</div>
</Typewriter>
</nav>
@@ -55,28 +91,51 @@ export function LeftBar() {
}
export function RightBar() {
const { setRightBarSize } = useBars();
const { setRightBarSize, rightBarVisible } = useBars();
let ref: HTMLDivElement | undefined;
let actualWidth = 0;
onMount(() => {
if (ref) {
const updateSize = () => {
setRightBarSize(ref?.offsetWidth || 0);
actualWidth = ref?.offsetWidth || 0;
setRightBarSize(rightBarVisible() ? actualWidth : 0);
};
updateSize();
const resizeObserver = new ResizeObserver(updateSize);
const resizeObserver = new ResizeObserver((entries) => {
// Use requestAnimationFrame to avoid ResizeObserver loop error
requestAnimationFrame(() => {
actualWidth = ref?.offsetWidth || 0;
setRightBarSize(rightBarVisible() ? actualWidth : 0);
});
});
resizeObserver.observe(ref);
return () => resizeObserver.disconnect();
}
});
// Update size when visibility changes
createEffect(() => {
setRightBarSize(rightBarVisible() ? actualWidth : 0);
});
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 transition-transform duration-500 ease-out md:block hidden z-50"
classList={{
"translate-x-full": !rightBarVisible(),
"translate-x-0": rightBarVisible()
}}
style={{
"transition-timing-function": rightBarVisible()
? "cubic-bezier(0.34, 1.56, 0.64, 1)" // Bounce out when revealing
: "cubic-bezier(0.4, 0, 0.2, 1)" // Smooth when hiding
}}
>
<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