Commit 46f44067 authored by Siong-Ui Te's avatar Siong-Ui Te

pure css toggle setting menu

parent 6375fe24
package main
import (
. "github.com/siongui/godom"
)
//DISCUSS: close mobile nav menu after click?
func setupNavbar() {
// setting nav item
sl := Document.QuerySelector(".setting-link")
sl.AddEventListener("click", func(e Event) {
// toggle arrow
downArrow := sl.QuerySelector(".down-arrow")
downArrow.ClassList().Toggle("is-hidden")
// right arrow
downArrow.NextSibling().ClassList().Toggle("is-hidden")
// setting menu
Document.QuerySelector(".setting-menu").ClassList().Toggle("is-hidden")
})
}
......@@ -29,7 +29,6 @@ func handleInputKeyUp(e Event) {
}
func main() {
setupNavbar()
setting.SetStorageKeyName("PaliDictionarySetting")
setting.SetupPaliSetting()
setupKeypad()
......
......@@ -12,8 +12,18 @@
/* #paliNavbarMenu { left:0; right:0; top:100%; position: absolute; } */
}
label[for="setting-toggle"]:hover {
cursor: pointer;
background-color: #fafafa;
color: #3273dc;
}
#setting-toggle:not(:checked) ~ article.setting-menu { display: none; }
#setting-toggle:not(:checked) + .navbar > .navbar-menu > .navbar-start > label span:nth-child(1) { display: none; }
#setting-toggle:checked + .navbar > .navbar-menu > .navbar-start > label span:nth-child(2) { display: none; }
</style>
<input type="checkbox" id="setting-toggle" class="is-hidden">
<nav class="navbar has-background-light-gold has-border-gold" role="navigation" aria-label="main navigation">
<input type="checkbox" id="menu-toggle" class="is-hidden">
<div class="navbar-brand">
......@@ -38,9 +48,9 @@
<span data-default-string="About">{{gettext "About"}}</span>
</a>
<a class="navbar-item setting-link">
<span class="is-hidden down-arrow">&#9660;</span><span>&#9658;</span><span data-default-string="Setting">{{gettext "Setting"}}</span>
</a>
<label class="navbar-item" for="setting-toggle">
<span>&#9660;</span><span>&#9658;</span><span data-default-string="Setting">{{gettext "Setting"}}</span>
</label>
</div>
<div class="navbar-end">
......
{{define "setting"}}
<article class="message is-info setting-menu is-hidden">
<article class="message is-info setting-menu">
<div class="message-body">
<input type="checkbox" id="isShowWordPreview"/>
<span data-default-string="Input Word Explanation Preview">{{gettext "Input Word Explanation Preview"}}</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment