Skip to content

Fix blog page animations and scrollbar shimmer #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jakebodea merged 2 commits into from
Feb 10, 2026
Merged

Fix blog page animations and scrollbar shimmer #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4764b13
Fix blog page animations to slide in from right, back to left (#15)
jakebodea Feb 10, 2026
ee1e49d
Fix scrollbar shimmer when navigating between blogs
jakebodea Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,8 @@
@apply border-border;
}
html {
scroll-behavior: smooth; /* Added smooth scrolling */
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
body {
@apply bg-background text-foreground;
Expand Down
20 changes: 18 additions & 2 deletions components/providers/navigation-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ function getNavIndex(pathname: string): number {
return navOrder.indexOf(baseRoute)
}

function getPathDepth(pathname: string): number {
return pathname.split("/").filter(Boolean).length
}

export function NavigationProvider({ children }: { children: ReactNode }) {
const pathname = usePathname()
const prevPathRef = useRef(pathname)
Expand All @@ -39,8 +43,20 @@ export function NavigationProvider({ children }: { children: ReactNode }) {
const prevIndex = getNavIndex(prevPathRef.current)
const currentIndex = getNavIndex(pathname)

if (prevIndex !== -1 && currentIndex !== -1 && prevIndex !== currentIndex) {
directionRef.current = currentIndex > prevIndex ? "right" : "left"
if (prevIndex !== -1 && currentIndex !== -1) {
if (prevIndex !== currentIndex) {
// Different main sections
directionRef.current = currentIndex > prevIndex ? "right" : "left"
} else if (prevIndex === currentIndex) {
// Same main section - check path depth for sub-routes
const prevDepth = getPathDepth(prevPathRef.current)
const currentDepth = getPathDepth(pathname)
if (currentDepth > prevDepth) {
directionRef.current = "right"
} else if (currentDepth < prevDepth) {
directionRef.current = "left"
}
}
}
prevPathRef.current = pathname
}
Expand Down