jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 00:15:30 -04:00
Code Issues Activity

make sticky header optional via prop

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-16 10:30:18 -05:00
parent b6c018875f
commit 17104d765b
14 changed files with 116 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Header/Header.module.css
View File

@@ -1,18 +1,21 @@
.header {
position: sticky;
top: 0;
width: 100%;
height: 4.5em;
padding: 0.7em 1.5em;
border-bottom: 1px solid var(--kinda-light);
background-color: var(--background-header);
backdrop-filter: saturate(180%) blur(5px);
z-index: 1000;
/* light-dark theme switch fading */
transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
}
.sticky {
position: sticky;
top: 0;
backdrop-filter: saturate(180%) blur(5px);
z-index: 1000;
}
.nav {
display: flex;
align-items: center;

8
components/Header/Header.tsx
View File

@@ -5,10 +5,12 @@ import Menu from "../Menu/Menu";
import styles from "./Header.module.css";
type HeaderProps = JSX.IntrinsicElements["div"];
type HeaderProps = JSX.IntrinsicElements["header"] & {
sticky?: boolean;
};
const Header = ({ className }: HeaderProps) => (
<header className={classNames(styles.header, className)}>
const Header = ({ sticky, className, ...rest }: HeaderProps) => (
<header className={classNames(styles.header, sticky && styles.sticky, className)} {...rest}>
<nav className={styles.nav}>
<Selfie className={styles.selfie} />
<Menu className={styles.menu} />