jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-14 06:30:50 -05:00
Code Issues Activity

responsive style adjustments

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-31 12:46:39 -05:00
parent 1bbee816c2
commit d0e00b197c
13 changed files with 73 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/page-header/Menu.module.scss
View File

@@ -12,10 +12,30 @@
align-items: center;
line-height: 1;
svg {
.link {
display: inline-flex;
align-items: center;
color: var(--medium-dark);
background: none;
padding-bottom: 0;
&:hover {
color: var(--link);
}
}
.icon {
width: 1.6em;
height: 1.6em;
}
.text {
font-size: 0.95em;
font-weight: 500;
margin-top: 0.125em;
margin-left: 0.75em;
line-height: 1;
}
}
.theme_toggle {
@@ -24,15 +44,20 @@
@media screen and (max-width: 800px) {
.item {
margin-left: 2em;
margin-left: 1.75em;
svg {
.icon {
width: 1.75em;
height: 1.75em;
}
// hide text next to emojis on mobile
.text {
display: none;
}
}
.theme_toggle {
margin-left: 1.6em;
margin-left: 1.4em;
}
}

18
components/page-header/Menu.tsx
View File

@@ -1,27 +1,27 @@
import dynamic from "next/dynamic";
import MenuItem from "./MenuItem";
import Link from "next/link";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.scss";
const menuItems = [
{
icon: <HomeIcon />,
icon: <HomeIcon className={`icon ${styles.icon}`} />,
text: "Home",
href: "/",
},
{
icon: <NotesIcon />,
icon: <NotesIcon className={`icon ${styles.icon}`} />,
text: "Notes",
href: "/notes/",
},
{
icon: <ProjectsIcon />,
icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
text: "Projects",
href: "/projects/",
},
{
icon: <ContactIcon />,
icon: <ContactIcon className={`icon ${styles.icon}`} />,
text: "Contact",
href: "/contact/",
},
@@ -35,11 +35,15 @@ export default function Menu() {
<ul className={styles.menu}>
{menuItems.map((item, index) => (
<li key={index} className={styles.item}>
<MenuItem {...item} />
<Link href={item.href} prefetch={false}>
<a className={styles.link}>
{item.icon} <span className={styles.text}>{item.text}</span>
</a>
</Link>
</li>
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle />
<ThemeToggle className={styles.icon} />
</li>
</ul>
);

30
components/page-header/MenuItem.module.scss
View File

@@ -1,30 +0,0 @@
.item_link {
display: inline-flex;
align-items: center;
color: var(--medium-dark);
background: none;
padding-bottom: 0;
&:hover {
color: var(--link);
}
}
.item_icon {
user-select: none;
}
.item_text {
font-size: 0.95em;
font-weight: 500;
margin-top: 0.05em;
margin-left: 0.75em;
line-height: 1;
}
@media screen and (max-width: 800px) {
// hide text next to emojis on mobile
.item_text {
display: none;
}
}

20
components/page-header/MenuItem.tsx
View File

@@ -1,20 +0,0 @@
import Link from "next/link";
import styles from "./MenuItem.module.scss";
type Props = {
href: URL | string;
icon: any;
text: string;
};
export default function MenuItem({ href, icon, text }: Props) {
return (
<Link href={href} prefetch={false}>
<a className={styles.item_link}>
<span className={styles.item_icon}>{icon}</span>
<span className={styles.item_text}>{text}</span>
</a>
</Link>
);
}

15
components/page-header/ThemeToggle.tsx
View File

@@ -8,19 +8,20 @@ const storageKey = "dark_mode";
export const getDarkPref = () => localStorage.getItem(storageKey);
export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
// use the `<html class="...">` as a hint to what the theme was set to outside of the button component
// there's probably (definitely) a cleaner way to do this..?
// use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">` CSS property
// sets appropriate `<html data-theme="...">` and color-scheme CSS properties
export const updateDOM = (dark: boolean) => {
const root = document.documentElement;
const theme = dark ? "dark" : "light";
// set `<html data-theme="...">`
root.setAttribute("data-theme", dark ? "dark" : "light");
root.setAttribute("data-theme", theme);
root.style.colorScheme = theme;
};
export default function ThemeToggle() {
export default function ThemeToggle({ className = "" }) {
// sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
@@ -61,7 +62,7 @@ export default function ThemeToggle() {
title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
>
{dark ? <BulbOffIcon /> : <BulbOnIcon />}
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
</button>
);
}