From 58d200b0ed36fee687e5f62f3f10f7e7db122aab Mon Sep 17 00:00:00 2001 From: Roman Koshkin Date: Wed, 17 Apr 2024 11:35:15 +0900 Subject: [PATCH] padding, device-awareness --- data/publications.mdx | 1 - src/components/Container.tsx | 94 ++++++++++++++++++++++-------------- src/styles.css | 50 +++++++++++++++++++ 3 files changed, 107 insertions(+), 38 deletions(-) diff --git a/data/publications.mdx b/data/publications.mdx index ccc73bf..5f1d4bd 100644 --- a/data/publications.mdx +++ b/data/publications.mdx @@ -2,7 +2,6 @@ title: Publications & Patents --- ---- ## Pre-prints diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 7f906c1..4474693 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,3 +1,5 @@ +import React, { useState, useEffect } from 'react'; + import clsx from 'clsx' import { Link } from 'components/Link' import { NowPlaying } from 'components/NowPlaying' @@ -13,60 +15,78 @@ type Props = React.PropsWithChildren<{ export function Container({ children, isHome }: Props) { const {theme, setTheme} = useTheme() + const [isScrolled, setIsScrolled] = useState(false); // this is called by onClick function changeTheme(theme: any) { setTheme(theme === 'light' ? 'dark': 'light') } + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 0); + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + return ( <>
-
+
- - Skip to content - - -
-
changeTheme(theme)}> - {theme === 'dark' ? : } + + Skip to content + +
+
+ +
+
changeTheme(theme)}> + {theme === 'dark' ? : } +
+
+
- -
-
+
{children}