diff --git a/components/Blog/Navigation.tsx b/components/Blog/Navigation.tsx
index a12bd3d..b7e3bc1 100644
--- a/components/Blog/Navigation.tsx
+++ b/components/Blog/Navigation.tsx
@@ -1,7 +1,7 @@
/* 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 { TerminalWindow } from "phosphor-react";
import ThemeSwitch from "./ThemeSwitch";
import styles from "../../styles/Blog/Navigation.module.scss";
@@ -17,9 +17,9 @@ const Navigation: NextPage<{}> = () => {
-
+
-
+
;
};
diff --git a/components/Blog/ThemeSwitch.tsx b/components/Blog/ThemeSwitch.tsx
index c7e5c28..46c868b 100644
--- a/components/Blog/ThemeSwitch.tsx
+++ b/components/Blog/ThemeSwitch.tsx
@@ -20,9 +20,9 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
setMounted(true);
}, []);
- const switchTheme = (theme: string) => {
-
- if (theme === "dark") setFadeProps({
+ const switchTheme = (newTheme: string) => {
+ console.log(newTheme);
+ if (newTheme === "dark") setFadeProps({
sun: styles.fadeIn,
moon: styles.fadeOut
});
@@ -31,7 +31,7 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
moon: styles.fadeIn
});
- setTheme(theme);
+ setTheme(newTheme);
};
if (!mounted) {
diff --git a/styles/Blog/Navigation.module.scss b/styles/Blog/Navigation.module.scss
index 6bfc232..c18c578 100644
--- a/styles/Blog/Navigation.module.scss
+++ b/styles/Blog/Navigation.module.scss
@@ -42,6 +42,13 @@
}
}
+ .navIcon {
+ margin-right: 15px;
+ cursor: pointer;
+ display: block;
+ height: 2em;
+ }
+
@media screen and (min-width: 300px) {
.imgContainer {
display: block;
diff --git a/styles/Blog/ThemeSwitch.module.scss b/styles/Blog/ThemeSwitch.module.scss
index d322f80..9308c20 100644
--- a/styles/Blog/ThemeSwitch.module.scss
+++ b/styles/Blog/ThemeSwitch.module.scss
@@ -2,9 +2,17 @@
position: relative;
width: 1.5em;
height: 1.5em;
+ cursor: pointer;
& > * {
position: absolute;
+ opacity: 0;
+ transform: translate(0, 100%);
+ }
+
+ & > .selected {
+ opacity: 1;
+ transform: translate(0, 0);
}
.fadeOut {