yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-06-09 23:36:01 +09:00
Code Releases Activity

Fix dropdown

Browse Source
This commit is contained in:
yude 2021-02-06 15:13:53 +09:00
parent 7c64c0f6da
commit 93533821aa
1 changed files with 30 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
pages/components/LangSelector.js
View File

@ -27,59 +27,36 @@ const Dropdown = ({ color }) => {
: (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" }}
>
<Link href="/" locale="ja-JP">
<a
className={
"text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent"
}
>
Japanese
</a>
</Link>
<Link href="/" locale="en-US">
<a
href="/"
locale="en-US"
className={
"text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent"
}
>
English
</a>
</Link>
</div>
</div>
</div>
</div>
<div className="relative inline-block text-left mr-2">
<button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true"
style={{ transition: "all .15s ease" }}
ref={btnDropdownRef}
onClick={() => {
dropdownPopoverShow
? closeDropdownPopover()
: openDropdownPopover();
}}
>
言語 / Languages
<svg className="-mr-1 ml-2 h-5 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div ref={popoverDropdownRef} className={
(dropdownPopoverShow ? "block " : "hidden ") + "origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"}>
<div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<Link href="/" locale="ja-JP">
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">日本語</a>
</Link>
<Link href="/" locale="en-US">
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">English</a>
</Link>
</div>
</div>
</div>
</>
);
};