c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Even better nav

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-18 17:09:03 +02:00
parent 0554ecaeae
commit 9dade22b3f
3 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/Blog/Navigation.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import type { NextPage } from "next"; import type { NextPage } from "next";
import Link from "next/link"; import Link from "next/link";
import { TerminalWindow } from "phosphor-react"; import { TerminalWindow, House, User } from "phosphor-react";
import ThemeSwitch from "./ThemeSwitch"; import ThemeSwitch from "./ThemeSwitch";
import styles from "../../styles/Blog/Navigation.module.scss"; import styles from "../../styles/Blog/Navigation.module.scss";
@ -16,10 +16,20 @@ const Navigation: NextPage<{}> = () => {
</picture> </picture>
</a> </a>
</Link> </Link>
<div className={styles.navLink}><Link href={"/"}><a className="nostyle">Projects</a></Link></div> <div className={styles.navLink}>
<div className={styles.navLink}><Link href={"/me"}><a className="nostyle">About me</a></Link></div> <Link href={"/"}><a className="nostyle">
<span className={styles.linkText}>Projects</span>
<span className={styles.linkIcon}><House size={"2em"} /></span>
</a></Link>
</div>
<div className={styles.navLink}>
<Link href={"/me"}><a className="nostyle">
<span className={styles.linkText}>About me</span>
<span className={styles.linkIcon}><User size={"2em"} /></span>
</a></Link>
</div>
<div className={styles.spacer}></div> <div className={styles.spacer}></div>
<div className={styles.navIcon}><Link href={"/terminal"}><a className="nostyle"><TerminalWindow size={"2em"} href={"/terminal"} /></a></Link></div> <div className={styles.navIcon}><Link href={"/terminal"}><a className="nostyle"><TerminalWindow size={"2em"} /></a></Link></div>
<ThemeSwitch /> <ThemeSwitch />
</nav>; </nav>;
}; };

2
styles/Blog/Blog.module.scss
View File

@ -3,6 +3,7 @@
color: var(--blog_color); color: var(--blog_color);
padding-bottom: 20px; padding-bottom: 20px;
min-height: 100vh; min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
header { header {
position: sticky; position: sticky;
@ -15,7 +16,6 @@
border: 1px solid var(--blog_content-border); border: 1px solid var(--blog_content-border);
background: var(--blog_content-background); background: var(--blog_content-background);
backdrop-filter: blur(var(--blog_content-blur)); backdrop-filter: blur(var(--blog_content-blur));
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
main { main {

35
styles/Blog/Navigation.module.scss
View File

@ -34,7 +34,7 @@
.navLink { .navLink {
transition: text-decoration 0.3s ease-in-out; transition: text-decoration 0.3s ease-in-out;
display: block; display: block;
margin: auto 5px; margin-right: 10px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -44,12 +44,27 @@
.navIcon { .navIcon {
margin-right: 15px; margin-right: 15px;
cursor: pointer; height: 1.8em;
display: block; display: block;
height: 2em;
} }
@media screen and (min-width: 300px) { .navLink .linkIcon {
cursor: pointer;
height: 1.8em;
display: block;
}
.navLink {
.linkText {
display: none;
}
.linkIcon {
display: block;
}
}
@media screen and (min-width: 450px) {
.imgContainer { .imgContainer {
display: block; display: block;
} }
@ -58,6 +73,18 @@
} }
} }
@media screen and (min-width: 350px) {
.navLink {
.linkText {
display: inline;
}
.linkIcon {
display: none;
}
}
}
.spacer { .spacer {
flex-grow: 2; flex-grow: 2;
} }