janis/explainegy-nextjs
0
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2026-07-31 07:39:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

df

Browse Source
This commit is contained in:
Janis
2022-12-23 00:16:56 +01:00
parent e44d6cc967
commit 1bb4cc82e2
12 changed files with 164 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/Nav.tsx
View File

@@ -1,19 +1,53 @@
"use client";
import React, { useRef } from "react";
import { time } from "console";
import styles from "../styles/Nav.module.scss";
import Image from "next/image";
import Link from "next/link";
import "../styles/test.css";
function switchTheme() {}
import { useEffect } from "react";
function switchTheme(theme) {
const bodyElement = document.getElementsByTagName("body")[0];
if (theme == "dark") {
bodyElement.classList.remove("theme-light");
} else {
bodyElement.classList.add("theme-light");
}
}
function toggleTheme() {
const svgElement = document.getElementById("themeSwitchSvg");
if (localStorage.getItem("theme") == "light") {
svgElement.style.animationDirection = "normal";
svgElement.style.animationName = styles.spinThemeSwitch;
} else {
svgElement.style.animationDirection = "reverse";
svgElement.style.animationName = styles.spinThemeSwitch;
}
setTimeout(() => {
if (localStorage.getItem("theme") == "light") {
localStorage.setItem("theme", "dark");
switchTheme("dark");
} else {
localStorage.setItem("theme", "light");
switchTheme("light");
}
svgElement.style.animationName = "";
}, 150);
}
export default function Nav() {
const switchThemeSvgRef = useRef();
useEffect(() => {
if (localStorage.getItem("theme") == "dark") {
switchTheme("dark");
} else {
switchTheme("light");
}
}, []);
return (
<nav className={styles.nav}>
<div className="dark">
<div className="test"></div>
</div>
<div className={styles.containerLeft}>
<Image
src={"/images/logo.svg"}
@@ -39,11 +73,11 @@ export default function Nav() {
<div
className={styles.themeSwitch}
onClick={() => {
switchTheme();
toggleTheme();
}}
>
<svg
ref={switchThemeSvgRef}
id="themeSwitchSvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>

4
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import "../styles/globals.scss";
import Nav from "./Nav";
import Footer from "./Footer";
import "../styles/variables.scss";
export default function RootLayout({
children,
@@ -10,7 +11,8 @@ export default function RootLayout({
return (
<html style={{ scrollBehavior: "smooth" }}>
<head></head>
<body className="theme-dark">
<body className="body">
<header>
<Nav />
</header>

6
app/tutorials/[tutorialId]/LoadMarkdown.tsx
View File

@@ -14,6 +14,12 @@ export default function LoadMarkdown() {
}
});
document.querySelectorAll("code").forEach((c) => {
if (c.classList.length < 1) {
c.classList.add("language-");
}
});
document.querySelectorAll("blockquote").forEach((bq) => {
bq.classList.add("blockquote");
});