Add language selector (not yet implemented)

pages/components/LangSelector.js

@@ -0,0 +1,88 @@
+import React from "react";
+import Popper from "popper.js";
+
+const Dropdown = ({ color }) => {
+  // dropdown props
+  const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
+  const btnDropdownRef = React.createRef();
+  const popoverDropdownRef = React.createRef();
+  const openDropdownPopover = () => {
+    new Popper(btnDropdownRef.current, popoverDropdownRef.current, {
+      placement: "bottom-start"
+    });
+    setDropdownPopoverShow(true);
+  };
+  const closeDropdownPopover = () => {
+    setDropdownPopoverShow(false);
+  };
+  // bg colors
+  let bgColor;
+  color === "white"
+    ? (bgColor = "bg-gray-800")
+    : (bgColor = "bg-" + color + "-500");
+  return (
+    <>
+      <div className="flex flex-wrap">
+        <div className="w-full ">
+          <div className="relative inline-flex align-middle w-full">
+            <button
+              className={
+                "text-white font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 " +
+                bgColor
+              }
+              style={{ transition: "all .15s ease" }}
+              type="button"
+              ref={btnDropdownRef}
+              onClick={() => {
+                dropdownPopoverShow
+                  ? closeDropdownPopover()
+                  : openDropdownPopover();
+              }}
+            >
+              Language / 言語
+            </button>
+            <div
+              ref={popoverDropdownRef}
+              className={
+                (dropdownPopoverShow ? "block " : "hidden ") +
+                (color === "white" ? "bg-white " : bgColor + " ") +
+                "text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
+              }
+              style={{ minWidth: "12rem" }}
+            >
+              <a
+                href="#pablo"
+                className={
+                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
+                  (color === "white" ? " text-gray-800" : "text-white")
+                }
+                onClick={e => e.preventDefault()}
+              >
+                Japanese
+              </a>
+              <a
+                href="#pablo"
+                className={
+                  "text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent " +
+                  (color === "white" ? " text-gray-800" : "text-white")
+                }
+                onClick={e => e.preventDefault()}
+              >
+                English
+              </a>
+              
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default function LangSelector() {
+  return (
+    <>
+      <Dropdown color="white" />
+    </>
+  );
+}

pages/components/Layout.js

@@ -11,6 +11,7 @@ const Layout = (props) => {
         <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
         <link rel="icon" href="/static/images/favicon.ico" />
       </Head>
+      
       <main>
         {/*
         {title ? <h1 className="page-title">{title}</h1> : ``}

pages/components/Navbar.js

@@ -0,0 +1,32 @@
+import "tailwindcss/tailwind.css";
+import Popper from "popper.js";
+import Link from 'next/link';
+import LangSelector from "./LangSelector"
+import { useState } from 'react';
+
+const Navbar = () => {
+    const [active, setActive] = useState(false);
+  
+    const handleClick = () => {
+      setActive(!active);
+    };
+
+    return (
+      <>
+        <nav className='flex items-center flex-wrap p-3 '>
+        <Link href='/'>
+          <a className='inline-flex items-center p-2 mr-4 '>
+            <span className='text-xl text-black font-bold tracking-wide'>
+              yude.jp
+            </span>
+          </a>
+        </Link>
+            
+            <div className="origin-top-right absolute right-0">
+                <LangSelector />
+            </div>
+      </nav>
+      </>
+        );
+    };
+export default Navbar

pages/index.js

@@ -1,10 +1,12 @@
 import Layout from "./components/Layout"
+import Navbar from "./components/Navbar"
 import Link from 'next/link'
 import Image from 'next/image'
 
 const Index = () => (
 
     <Layout title="ホーム">
+      <Navbar />
       <div className="my-9">
         <Image className="rounded-full"
             src         = "/static/images/avatar.png"