mirror of
https://github.com/yude-jp/yude.jp
synced 2024-12-22 20:20:09 +09:00
Add language selector (not yet implemented)
This commit is contained in:
parent
5ba99ffbad
commit
8ace3bc646
16
package-lock.json
generated
16
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
88
pages/components/LangSelector.js
Normal file
88
pages/components/LangSelector.js
Normal file
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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> : ``}
|
||||
|
||||
32
pages/components/Navbar.js
Normal file
32
pages/components/Navbar.js
Normal file
@ -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
|
||||
@ -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"
|
||||
|
||||
46
public/static/images/yude.jp_logo.svg
Normal file
46
public/static/images/yude.jp_logo.svg
Normal file
@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="790.000000pt" height="187.000000pt" viewBox="0 0 790.000000 187.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,187.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M6385 1856 c-17 -7 -43 -28 -58 -45 -53 -64 -29 -178 45 -217 47 -25
|
||||
144 -23 193 2 102 53 99 204 -5 256 -42 21 -132 23 -175 4z"/>
|
||||
<path d="M2993 1478 c5 -254 5 -270 -10 -228 -21 62 -55 105 -110 137 -61 36
|
||||
-193 45 -272 18 -101 -33 -193 -147 -220 -273 -14 -66 -15 -430 -1 -502 26
|
||||
-138 113 -245 226 -280 171 -52 326 10 374 150 l19 55 1 -102 0 -103 140 0
|
||||
140 0 0 700 0 700 -147 0 -146 0 6 -272z m-64 -335 c53 -40 61 -72 61 -262 0
|
||||
-156 -2 -179 -21 -217 -37 -78 -142 -106 -229 -61 -73 37 -80 62 -80 270 0
|
||||
191 6 222 52 265 47 43 161 45 217 5z"/>
|
||||
<path d="M3945 1423 c-211 -13 -363 -127 -410 -308 -21 -83 -21 -387 0 -470
|
||||
21 -79 60 -148 111 -195 174 -160 508 -158 678 5 47 45 90 113 101 158 l7 27
|
||||
-139 0 -140 0 -13 -26 c-22 -41 -66 -58 -150 -58 -58 -1 -83 4 -110 19 -50 29
|
||||
-80 93 -80 172 l0 63 320 0 320 0 0 134 c0 106 -4 147 -20 199 -35 112 -123
|
||||
204 -237 247 -57 21 -170 37 -238 33z m144 -241 c42 -31 69 -79 77 -138 3 -30
|
||||
5 -57 3 -59 -3 -2 -86 -5 -187 -7 l-182 -3 0 49 c0 86 45 153 119 177 42 14
|
||||
141 3 170 -19z"/>
|
||||
<path d="M7495 1419 c-98 -12 -178 -75 -209 -164 -14 -40 -14 -40 -15 58 l-1
|
||||
97 -140 0 -140 0 0 -705 0 -705 147 0 146 0 -6 272 c-3 150 -2 262 2 248 40
|
||||
-127 156 -200 299 -187 163 16 279 128 311 301 16 87 14 416 -3 497 -44 204
|
||||
-192 313 -391 288z m63 -282 c45 -41 52 -74 52 -259 0 -155 -2 -176 -21 -216
|
||||
-38 -78 -141 -104 -229 -59 -73 37 -80 61 -80 272 0 197 7 228 62 268 55 41
|
||||
169 37 216 -6z"/>
|
||||
<path d="M0 1406 c0 -2 86 -222 191 -488 106 -265 194 -493 196 -505 4 -16
|
||||
-57 -199 -134 -401 -4 -10 27 -12 147 -10 l153 3 248 695 c137 382 249 698
|
||||
249 703 0 4 -67 7 -148 7 l-148 0 -91 -277 c-51 -153 -100 -312 -109 -353
|
||||
l-17 -75 -33 125 c-19 69 -69 226 -112 350 l-79 225 -156 3 c-87 1 -157 1
|
||||
-157 -2z"/>
|
||||
<path d="M1220 1103 c0 -462 13 -533 114 -641 105 -112 282 -157 469 -117 170
|
||||
36 287 149 317 307 6 28 10 210 10 404 l0 354 -145 0 -145 0 0 -352 c0 -325
|
||||
-2 -356 -19 -395 -40 -88 -177 -111 -255 -42 -51 44 -56 84 -56 459 l0 330
|
||||
-145 0 -145 0 0 -307z"/>
|
||||
<path d="M5860 1275 l0 -135 230 0 230 0 0 -382 c0 -362 -1 -385 -20 -415 -37
|
||||
-61 -63 -68 -283 -71 l-198 -4 3 -131 3 -132 160 -3 c215 -4 332 10 412 48 77
|
||||
38 153 119 185 198 23 57 23 58 26 610 l3 552 -376 0 -375 0 0 -135z"/>
|
||||
<path d="M5063 710 c-143 -44 -165 -271 -35 -352 29 -18 51 -23 107 -23 126 0
|
||||
190 64 190 190 0 82 -24 130 -81 165 -40 25 -132 35 -181 20z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue
Block a user