animations and shadows

This commit is contained in:
Michael Freno
2025-12-20 12:45:07 -05:00
parent fd241d5846
commit 9cea36988c
5 changed files with 17 additions and 19 deletions

View File

@@ -350,7 +350,8 @@ export function LeftBar() {
"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
"min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined
"min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined,
"box-shadow": "inset -6px 0 16px -6px rgba(0, 0, 0, 0.1)"
}}
>
{/* Hamburger menu button - positioned at right edge of navbar */}
@@ -542,7 +543,8 @@ export function RightBar() {
"transition-timing-function": rightBarVisible()
? "cubic-bezier(0.34, 1.56, 0.64, 1)"
: "cubic-bezier(0.4, 0, 0.2, 1)",
"min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined
"min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined,
"box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)"
}}
>
<RightBarContent />

View File

@@ -46,8 +46,10 @@ export default function RevealDropDown(props: {
{/* Reveal Content */}
<div
class={`absolute right-0 left-0 z-10 overflow-hidden transition-all duration-300 ease-in-out ${
isRevealed() ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
class={`absolute right-0 left-0 z-10 overflow-scroll transition-all duration-300 ease-in-out ${
isRevealed()
? "mx-h-[75dvh] opacity-100 md:max-h-[60vh]"
: "max-h-0 opacity-0"
}`}
>
<div class="bg-mantle p-4 shadow-lg dark:bg-gray-900">