From 495f8f42806cae28dd2ad202b5dadcd1eb6d22ff Mon Sep 17 00:00:00 2001
From: Garrit Franke <garritfranke@gmail.com>
Date: Tue, 29 Sep 2020 14:25:33 +0200
Subject: [PATCH] fix: profile in responsive layout

---
 components/Header.js  | 18 +++++++++++++++++-
 components/Layout.js  | 21 ++++++++++++++++++++-
 components/Profile.js | 12 +++++++++---
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index e0b36cc..701ede8 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,14 +1,30 @@
+import { useLayoutEffect, useState } from "react";
 import Link from "next/link";
 import Profile from "./Profile";
 
+function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+}
+
 export default function Header(props) {
+  const [windowWidth, windowHeight] = useWindowSize();
+
   return (
     <header className="header">
       <nav className="nav" role="navigation" aria-label="main navigation">
         <Link href="/">
           <h1>{props.siteTitle}</h1>
         </Link>
-        <Profile></Profile>
+        {windowWidth >= 768 && <Profile></Profile>}
       </nav>
       <style jsx>
         {`
diff --git a/components/Layout.js b/components/Layout.js
index 04aff51..226027b 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,5 +1,21 @@
+import { useState, useLayoutEffect } from "react";
+
 import Header from "./Header";
 import Meta from "./Meta";
+import Profile from "./Profile";
+
+function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+}
 
 export default function Layout({
   siteTitle,
@@ -7,11 +23,14 @@ export default function Layout({
   children,
   pathname,
 }) {
+  const [windowWidth, windowHeight] = useWindowSize();
+
   return (
-    <section className={`layout ${pathname == "info" && "info_page"}`}>
+    <section className={`layout`}>
       <Meta siteTitle={siteTitle} siteDescription={siteDescription} />
       <Header siteTitle={siteTitle} />
       <div className="content">{children}</div>
+      {windowWidth <= 768 && <Profile className="content"></Profile>}
       <style jsx>
         {`
           .layout {
diff --git a/components/Profile.js b/components/Profile.js
index e263a33..a805d18 100644
--- a/components/Profile.js
+++ b/components/Profile.js
@@ -1,8 +1,8 @@
 import Link from "next/link";
 
-export default function Header(props) {
+export default function Profile(props) {
   return (
-    <header className="header">
+    <div className="profile">
       <img src="/me.jpg"></img>
       <h2>Garrit Franke</h2>
       <p>Random tips, tricks and thoughts about software</p>
@@ -20,8 +20,14 @@ export default function Header(props) {
           Link {
             margin: 1rem;
           }
+
+          @media (max-width: 767px) {
+            .profile {
+              margin: 20px;
+            }
+          }
         `}
       </style>
-    </header>
+    </div>
   );
 }