Skip to content

Commit

Permalink
padding, device-awareness
Browse files Browse the repository at this point in the history
  • Loading branch information
Roman Koshkin authored and Roman Koshkin committed Apr 17, 2024
1 parent a6c8cc6 commit 58d200b
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 38 deletions.
1 change: 0 additions & 1 deletion data/publications.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Publications & Patents
---

---

## Pre-prints

Expand Down
94 changes: 57 additions & 37 deletions src/components/Container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import React, { useState, useEffect } from 'react';

import clsx from 'clsx'
import { Link } from 'components/Link'
import { NowPlaying } from 'components/NowPlaying'
Expand All @@ -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 (
<>
<div
className={clsx(
'h-full w-full m-auto p-6 flex-grow flex flex-col max-w-3xl lg:max-w-4xl',
isHome && 'max-h-[44rem]'
isHome && '' // on Home, 'max-h-[44rem]' class was added. I got rid of that.
)}
>
<header>
<header className={clsx('navbar', { 'transparent': isScrolled })}>
<div className="container">
<div className="align-left">
<a href="#skip" className="sr-only focus:not-sr-only">
Skip to content
</a>
<nav className="text-sm sm:text-base">
<ul className="flex w-full space-x-4">
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/blog">Blog</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/research">Research</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/projects">Projects</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/publications">Publications & Patents</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/about">About</ActiveLink>
</li>
{!isHome && (
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/">Home</ActiveLink>
</li>
)}
</ul>
</nav>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}
className="light:bg-white text-dark dark:text-white"
onClick={() => changeTheme(theme)}>
{theme === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
<a href="#skip" className="sr-only focus:not-sr-only">
Skip to content
</a>
<div className="nav-container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div className="nav-links" style={{ overflowX: 'auto', flex: 1 }}>
<nav className="text-sm sm:text-base">
<ul className="flex w-full space-x-4">
{/* blog exists, but is hidden from the navbar */}
{/* <li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/blog">Blog</ActiveLink>
</li> */}
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/research">Research</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/projects">Projects</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/publications">Publications</ActiveLink>
</li>
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/about">About</ActiveLink>
</li>
{!isHome && (
<li className="nav-link transition-opacity opacity-80 hover:opacity-100">
<ActiveLink href="/">Home</ActiveLink>
</li>
)}
</ul>
</nav>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 0 0 10px'}}
className="light:bg-white text-dark dark:text-white"
onClick={() => changeTheme(theme)}>
{theme === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
</div>
</div>
</div>
</div>

</div>
</header>
<main id="skip" className="flex flex-col flex-grow py-12">
<main id="skip" className="flex flex-col flex-grow py-12" style={{ marginTop: '70px' }}>
{children}
</main>
<footer className="flex mb-4 text-sm sm:text-base flex-col justify-between sm:flex-row sm:items-end">
Expand Down
50 changes: 50 additions & 0 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,3 +228,53 @@ h6 {
.project:hover .line-clamp-3 {
max-height: 1000px; /* Set to a value high enough to contain all your content */
}


/* this is for the blurred navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
padding: 50px 10px 10px 24px; /* Top, Right, Bottom, and Left (left padding is 24 on narrow screens)*/
background-color: rgba(255, 255, 255, 0.8); /* Light theme */
backdrop-filter: blur(5px);
box-shadow: 0 2px 4px rgba(0,0,0,0.0); /* Optional: adds depth */
}

/* if the screen is 768px an more, apply wider left padding to the navbar */
@media (min-width: 768px) {
.navbar {
padding: 50px 10px 10px 100px; /* Adjusted padding for desktop */
}
}

.nav-links {
flex: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* improves scrolling on iOS */
}


.navbar.transparent {
background-color: rgba(255, 255, 255, 0); /* Fully transparent */
transition: background-color 0.3s ease-in-out;
}

.dark .navbar {
background-color: rgba(0, 0, 0, 0); /* Dark theme background */
}

.dark .navbar.transparent {
background-color: rgba(0, 0, 0, 0); /* Dark theme transparent */
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%; /* Ensures the container spans the full width */
}

0 comments on commit 58d200b

Please sign in to comment.