bars guud
This commit is contained in:
Michael Freno
@@ -42,66 +42,61 @@ export function RightBarContent() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="text-text flex h-full flex-col justify-between py-6">
|
||||
<Typewriter keepAlive={false} class="z-50 px-4 pt-4">
|
||||
<div class="flex flex-col gap-6">
|
||||
<h3 class="text-subtext0 rule-around text-lg font-semibold">
|
||||
Connect
|
||||
</h3>
|
||||
<ul class="flex flex-col 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="/contact">Contact Me</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/MikeFreno/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<GitHub height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/michael-freno-176001256/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<LinkedIn height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
<span>LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/resume"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={24}
|
||||
width={24}
|
||||
viewBox="0 0 384 512"
|
||||
class="fill-text"
|
||||
>
|
||||
<path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Resume</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-text flex h-full flex-col justify-between">
|
||||
<Typewriter keepAlive={false} class="z-50 px-4">
|
||||
<ul class="flex flex-col 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="/contact">Contact Me</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/MikeFreno/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<GitHub height={24} width={24} fill={`var(--color-text)`} />
|
||||
</span>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/michael-freno-176001256/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<LinkedIn height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
<span>LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/resume"
|
||||
class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
|
||||
>
|
||||
<span class="shaker rounded-full p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={24}
|
||||
width={24}
|
||||
viewBox="0 0 384 512"
|
||||
class="fill-text"
|
||||
>
|
||||
<path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Resume</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Typewriter>
|
||||
{/* Dark Mode Toggle */}
|
||||
<div class="border-overlay0 border-t px-4 pt-6">
|
||||
<div class="border-overlay0 border-t p-4">
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105"
|
||||
@@ -128,7 +123,8 @@ export function RightBarContent() {
|
||||
}
|
||||
|
||||
export function LeftBar() {
|
||||
const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
|
||||
const { setLeftBarSize, leftBarSize, leftBarVisible, setLeftBarVisible } =
|
||||
useBars();
|
||||
let ref: HTMLDivElement | undefined;
|
||||
let actualWidth = 0;
|
||||
let touchStartX = 0;
|
||||
@@ -268,7 +264,8 @@ export function LeftBar() {
|
||||
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
|
||||
: "cubic-bezier(0.4, 0, 0.2, 1)", // Smooth when hiding
|
||||
"min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined
|
||||
}}
|
||||
>
|
||||
{/* Hamburger menu button - positioned at right edge of navbar */}
|
||||
@@ -346,19 +343,17 @@ export function LeftBar() {
|
||||
{/* Navigation Links */}
|
||||
<div class="mt-auto">
|
||||
<Typewriter keepAlive={false}>
|
||||
<div class="flex flex-col gap-4 py-6">
|
||||
<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="/login">Login</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="flex flex-row gap-4 py-6 md:flex-col">
|
||||
<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="/login">Login</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Typewriter>
|
||||
|
||||
{/* RightBar content on mobile */}
|
||||
@@ -373,7 +368,7 @@ export function LeftBar() {
|
||||
}
|
||||
|
||||
export function RightBar() {
|
||||
const { setRightBarSize, rightBarVisible } = useBars();
|
||||
const { setRightBarSize, rightBarSize, rightBarVisible } = useBars();
|
||||
let ref: HTMLDivElement | undefined;
|
||||
let actualWidth = 0;
|
||||
|
||||
@@ -415,7 +410,8 @@ export function RightBar() {
|
||||
style={{
|
||||
"transition-timing-function": rightBarVisible()
|
||||
? "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
||||
: "cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
: "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
"min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined
|
||||
}}
|
||||
>
|
||||
<RightBarContent />
|
||||
|
||||
@@ -118,7 +118,7 @@ export default function PostBodyClient(props: PostBodyClientProps) {
|
||||
<div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
|
||||
<div
|
||||
ref={contentRef}
|
||||
class="prose dark:prose-invert max-w-none"
|
||||
class="text-text prose dark:prose-invert max-w-none"
|
||||
innerHTML={props.body}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -36,37 +36,28 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
|
||||
if (initialHasLiked) {
|
||||
const result = await api.database.removePostLike.mutate({
|
||||
user_id: props.currentUserID,
|
||||
post_id: props.projectID.toString(),
|
||||
post_id: props.projectID.toString()
|
||||
});
|
||||
setLikes(result.newLikes as PostLike[]);
|
||||
} else {
|
||||
const result = await api.database.addPostLike.mutate({
|
||||
user_id: props.currentUserID,
|
||||
post_id: props.projectID.toString(),
|
||||
post_id: props.projectID.toString()
|
||||
});
|
||||
setLikes(result.newLikes as PostLike[]);
|
||||
}
|
||||
setInstantOffset(0);
|
||||
} catch (error) {
|
||||
console.error("There has been a problem with your like operation:", error);
|
||||
console.error(
|
||||
"There has been a problem with your like operation:",
|
||||
error
|
||||
);
|
||||
setHasLiked(initialHasLiked);
|
||||
setInstantOffset(0);
|
||||
}
|
||||
};
|
||||
|
||||
const likeCount = () => likes().length + instantOffset();
|
||||
|
||||
const getLikeIconColor = () => {
|
||||
if (hasLiked()) {
|
||||
return "fill-orange-400";
|
||||
}
|
||||
|
||||
if (hovering()) {
|
||||
return "fill-orange-400 dark:fill-orange-500";
|
||||
}
|
||||
|
||||
return "fill-black dark:fill-white";
|
||||
};
|
||||
|
||||
return (
|
||||
<Show
|
||||
@@ -76,12 +67,12 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
|
||||
<div class="mx-auto">
|
||||
<LikeIcon
|
||||
strokeWidth={1}
|
||||
color="fill-black dark:fill-white"
|
||||
color="fill-text"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</div>
|
||||
<div class="my-auto pl-2 pt-0.5 text-sm text-black dark:text-white">
|
||||
<div class="my-auto pt-0.5 pl-2 text-sm text-black dark:text-white">
|
||||
{likes().length} {likes().length === 1 ? "Like" : "Likes"}
|
||||
</div>
|
||||
<div class="tooltip-text -ml-12 w-12">Must be logged in</div>
|
||||
@@ -93,18 +84,18 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
|
||||
onMouseOver={() => setHovering(true)}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
>
|
||||
<div class="hover:text-orange-400 tooltip flex flex-col text-black dark:text-white">
|
||||
<div class="mx-auto">
|
||||
<div class="tooltip text-text flex flex-col hover:brightness-125">
|
||||
<div class="mx-auto hover:brightness-125">
|
||||
<LikeIcon
|
||||
strokeWidth={1}
|
||||
color={getLikeIconColor()}
|
||||
color={`fill-blue`}
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class={`${
|
||||
hasLiked() ? "text-orange-400" : ""
|
||||
hasLiked() ? "text-blue" : ""
|
||||
} mx-auto flex pl-2 transition-colors duration-200 ease-in`}
|
||||
>
|
||||
{likeCount()} {likeCount() === 1 ? "Like" : "Likes"}
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function CommentIcon(props: {
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={props.strokeWidth}
|
||||
class="fill-black dark:fill-white"
|
||||
class="hover:fill-blue fill-text"
|
||||
height={props.height}
|
||||
width={props.width}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user