diff --git a/package-lock.json b/package-lock.json index 9f877f6..a975af0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@zeit/next-css": "^1.0.1", "autoprefixer": "^10.2.4", "next": "^10.0.6", + "popper.js": "^1.16.1", "postcss": "^8.2.4", "react": "^17.0.1", "react-dom": "^17.0.1", @@ -4859,6 +4860,16 @@ "node": ">=6" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -11650,6 +11661,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", diff --git a/package.json b/package.json index c91fa9c..efd7cea 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@zeit/next-css": "^1.0.1", "autoprefixer": "^10.2.4", "next": "^10.0.6", + "popper.js": "^1.16.1", "postcss": "^8.2.4", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/pages/components/LangSelector.js b/pages/components/LangSelector.js new file mode 100644 index 0000000..bac4acb --- /dev/null +++ b/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 ( + <> +
+
+
+ +
+ e.preventDefault()} + > + Japanese + + e.preventDefault()} + > + English + + +
+
+
+
+ + ); +}; + +export default function LangSelector() { + return ( + <> + + + ); +} \ No newline at end of file diff --git a/pages/components/Layout.js b/pages/components/Layout.js index d7a9744..1e4761f 100644 --- a/pages/components/Layout.js +++ b/pages/components/Layout.js @@ -11,6 +11,7 @@ const Layout = (props) => { {title ? `${title} - ${siteTitle}` : siteTitle} +
{/* {title ?

{title}

: ``} diff --git a/pages/components/Navbar.js b/pages/components/Navbar.js new file mode 100644 index 0000000..1e2e1dd --- /dev/null +++ b/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 ( + <> + + + ); + }; +export default Navbar \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index cf48acc..9b79f1d 100644 --- a/pages/index.js +++ b/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 = () => ( +
+ + + + + + + + + + + + + +