diff --git a/components/Blog/Layout.tsx b/components/Blog/Layout.tsx index adbb954..4537008 100644 --- a/components/Blog/Layout.tsx +++ b/components/Blog/Layout.tsx @@ -1,4 +1,5 @@ import type { NextPage } from "next"; +import { useEffect } from "react"; import Head from "next/head"; import Navigation from "./Navigation"; @@ -9,6 +10,15 @@ interface ILayoutProps { } const Layout: NextPage = ({ title, children }) => { + + useEffect(() => { + if (typeof window !== "undefined") { + const theme = window.localStorage.getItem("theme"); + if(!theme || !document) return; + document.documentElement.setAttribute("data-theme", theme); + } + }, []); + return <> {title ?? "c0ntroller.de"} diff --git a/components/Blog/Navigation.tsx b/components/Blog/Navigation.tsx index 54f06d3..99e5737 100644 --- a/components/Blog/Navigation.tsx +++ b/components/Blog/Navigation.tsx @@ -1,20 +1,38 @@ /* eslint-disable @next/next/no-img-element */ import type { NextPage } from "next"; import Link from "next/link"; +import { Terminal, Sun, Moon } from "phosphor-react"; + import styles from "../../styles/Blog/Navigation.module.scss"; const Navigation: NextPage<{}> = () => { + const switchTheme = () => { + if (typeof document === "undefined") return; + + const current = document.documentElement.getAttribute("data-theme") || "dark"; + const setTo = current === "dark" ? "light" : "dark"; + document.documentElement.setAttribute("data-theme", setTo); + + if (typeof window !== "undefined") window.localStorage.setItem("theme", setTo); + }; + return ; }; diff --git a/pages/index.tsx b/pages/index.tsx index d65b0f5..b6d5414 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,10 @@ import type { NextPage } from "next"; +import Layout from "../components/Blog/Layout"; import type { ContentList } from "../lib/content/types"; import ProjectCard from "../components/Blog/Card"; import { getContentList } from "../lib/content/generateBackend"; import styles from "../styles/Blog/Front.module.scss"; -import Layout from "../components/Blog/Layout"; const Blog: NextPage<{ content: ContentList }> = ({content}) => { const generateCards = (type: string) => { diff --git a/styles/Blog/Navigation.module.scss b/styles/Blog/Navigation.module.scss index e338f32..2e69d70 100644 --- a/styles/Blog/Navigation.module.scss +++ b/styles/Blog/Navigation.module.scss @@ -1,7 +1,10 @@ .navigation { - display: block; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; max-width: 1000px; - min-width: 300px; + /*min-width: 300px;*/ position: relative; height: calc(1em + 40px); @@ -16,26 +19,48 @@ backdrop-filter: blur(var(--blog_content-blur)); box-shadow: 0px 2px 5px gray; - .logo { - display: inline-block; + .imgContainer { + align-self: flex-start; margin-top: -10px; - height: calc(1em + 40px - 20px); position: absolute; cursor: pointer; + display: none; + } + + .logo { + height: calc(1em + 40px - 20px); } .navLink { - display: inline-block; - transition: text-decoration 0.2s ease-in-out; + transition: text-decoration 0.3s ease-in-out; + display: block; margin: auto 5px; cursor: pointer; - &:nth-of-type(1) { - margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px); - } - &:hover { text-decoration: underline; } } + + @media screen and (min-width: 300px) { + .imgContainer { + display: block; + } + .navLink:nth-of-type(1) { + margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px); + } + } + + .spacer { + flex-grow: 2; + } + + .themeSwitch { + .lightTheme { + display: var(--blog_dark-el-display) + } + .darkTheme { + display: var(--blog_light-el-display) + } + } } \ No newline at end of file diff --git a/styles/globals.scss b/styles/globals.scss index cd5e9a6..190d677 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -22,6 +22,9 @@ --blog_content-blur: 10px; --blog_color: #ddd; + --blog_light-el-display: none; + --blog_dark-el-display: initial; + &[data-theme="light"]{ --blog_nav-background: rgba(192, 192, 192, 0.3); --blog_nav-border: #ccc; @@ -32,6 +35,8 @@ --blog_content-blur: 5px; --blog_color: #222; + --blog_light-el-display: initial; + --blog_dark-el-display: none; } }