Separate logo from header

pages/_app.tsx

@@ -3,11 +3,13 @@ import '../styles/transitions.scss';
 import type { AppProps } from 'next/app';
 import Footer from './components/Footer';
 import Header from './components/Header';
+import { Logo } from './components/Logo';
 
 function Runosaari({ Component, pageProps }: AppProps) {
   return (
     <>
       <Header />
+      <Logo />
       <main>
         <Component {...pageProps} />
       </main>

pages/components/Header.tsx

@@ -1,14 +1,7 @@
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
 import styles from '../../styles/Header.module.scss';
 
 const Header = () => {
-  const [isDesktop, setIsDesktop] = useState(true);
-
-  useEffect(() => {
-    setIsDesktop(window.innerWidth > 768);
-  }, []);
-
   return (
     <>
       <header className={styles.header}>
@@ -33,26 +26,6 @@ const Header = () => {
           </Link>
         </nav>
       </header>
-      <section className={styles.logoContainer}>
-        <div className={styles.logo} id='logo-start'>
-          {isDesktop ? (
-            <img
-              className={styles.logoImage}
-              src='/runosaari-logo.jpg'
-              alt='Runosaari logo'
-            />
-          ) : (
-            <img
-              className={styles.logoImage}
-              src='/runosaari-logo_small.jpg'
-              alt='Runosaari logo'
-            />
-          )}
-          <div className={styles.logoCredits}>
-            <div>@Sanna Hukkanen</div>
-          </div>
-        </div>
-      </section>
     </>
   );
 };

pages/components/Logo.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import styles from '../../styles/Logo.module.scss';
+
+export const Logo = () => {
+  const [isDesktop, setIsDesktop] = useState(true);
+
+  useEffect(() => {
+    setIsDesktop(window.innerWidth > 768);
+  }, []);
+
+  return (
+    <section className={styles.logoContainer}>
+      <div className={styles.logo} id='logo-start'>
+        {isDesktop ? (
+          <img
+            className={styles.logoImage}
+            src='/runosaari-logo.jpg'
+            alt='Runosaari logo'
+          />
+        ) : (
+          <img
+            className={styles.logoImage}
+            src='/runosaari-logo_small.jpg'
+            alt='Runosaari logo'
+          />
+        )}
+        <div className={styles.logoCredits}>
+          <div>@Sanna Hukkanen</div>
+        </div>
+      </div>
+    </section>
+  );
+};

styles/Header.module.scss

@@ -39,29 +39,3 @@
     margin-top: 1rem;
   }
 }
-
-.logoContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  width: 80%;
-  max-width: 1000px;
-  border-radius: 3px 3px 0px 0px;
-  padding-top: 3px;
-}
-
-.logoImage {
-  width: 100%;
-}
-
-.logoCredits {
-  font-size: 90%;
-  display: flex;
-  justify-content: right;
-  max-width: 990px;
-  padding-right: 10px;
-  margin-top: -5px;
-}

styles/Logo.module.scss

@@ -0,0 +1,25 @@
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 80%;
+  max-width: 1000px;
+  border-radius: 3px 3px 0px 0px;
+  padding-top: 3px;
+}
+
+.logoImage {
+  width: 100%;
+}
+
+.logoCredits {
+  font-size: 90%;
+  display: flex;
+  justify-content: right;
+  max-width: 990px;
+  padding-right: 10px;
+  margin-top: -5px;
+}