diff --git a/src/components/rightbtn.ts b/src/components/rightbtn.ts new file mode 100644 index 0000000..77ad8ef --- /dev/null +++ b/src/components/rightbtn.ts @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', () => { + document.querySelector('.nav_right_btn .more')?.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + const nav = document.querySelector('.nav_right_btn'); + if (!nav) return; + nav.classList.add('expanded'); + }); + document.addEventListener('click', (e) => { + document.querySelector('.nav_right_btn')?.classList.remove('expanded'); + }); +}); diff --git a/src/main.ts b/src/main.ts index 4a68a54..444254d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,6 +6,7 @@ import './scss/style.scss'; import { Anatolo } from './anatolo/anatolo'; import * as Utils from './utils/main'; import FloatBtn from './components/float-btn'; +import './components/rightbtn'; (window as any).Anatolo = Anatolo; (window as any).Utils = Utils; diff --git a/src/scss/raw-components/nav.scss b/src/scss/raw-components/nav.scss index 7cd22a3..d060387 100644 --- a/src/scss/raw-components/nav.scss +++ b/src/scss/raw-components/nav.scss @@ -84,21 +84,21 @@ @media screen and (max-width: $bp-small-width-view) { .information { background-color: var(--secondary); - .nav_right_btn li { - display: none; - &.more { - display: block; - } - } - &:hover { - right: 0; - position: absolute; - .nav_right_btn li { - display: initial; - &.more { + .nav_right_btn { + &.expanded { + li { + display: initial; + } + li.more { display: none; } } + li { + display: none; + } + li.more { + display: initial; + } } } }