github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-09-14 06:50:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify site-nav-toggle element

Browse Source
This commit is contained in:
Mimi 2026-08-20 14:10:46 +08:00
parent 96d34a0bb9
commit d62fdfa759
6 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
layout/_partials/header/brand.njk
View File

@ -1,10 +1,8 @@
<div class="site-brand-container"> <div class="site-brand-container">
<div class="site-nav-search"> <div class="site-nav-search popup-trigger" aria-label="{{ __('menu.search') }}" role="button">
<div class="toggle popup-trigger" aria-label="{{ __('menu.search') }}" role="button"> {%- if theme.algolia_search.enable or theme.local_search.enable %}
{%- if theme.algolia_search.enable or theme.local_search.enable %} <i class="fa fa-search fa-fw fa-lg"></i>
<i class="fa fa-search fa-fw fa-lg"></i> {%- endif %}
{%- endif %}
</div>
</div> </div>
<div class="site-meta"> <div class="site-meta">
@ -25,11 +23,9 @@
{%- endif %} {%- endif %}
</div> </div>
<div class="site-nav-toggle"> <div class="site-nav-toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button">
<div class="toggle" aria-label="{{ __('accessibility.nav_toggle') }}" role="button"> {%- if theme.menu %}
{%- if theme.menu %} <i class="fa fa-ellipsis fa-fw fa-lg"></i>
<i class="fa fa-ellipsis fa-fw fa-lg"></i> {%- endif %}
{%- endif %}
</div>
</div> </div>
</div> </div>

3
source/css/_common/outline/header/index.styl
View File

@ -12,11 +12,10 @@
.site-brand-container { .site-brand-container {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 0 10px;
} }
.use-motion { .use-motion {
.column, .site-brand-container .toggle { .column {
opacity: 0; opacity: 0;
} }
} }

12
source/css/_common/outline/header/site-nav.styl
View File

@ -1,13 +1,19 @@
.site-nav-toggle, .site-nav-search { .site-nav-toggle, .site-nav-search {
color: var(--text-color);
display: none; display: none;
padding: 0 10px;
.fa {
transition: transform .5s;
}
+mobile() { +mobile() {
flex-column(); flex-column();
} }
}
.toggle { .site-nav-on .site-nav-toggle .fa {
color: var(--text-color); transform: rotate(-90deg);
}
} }
.site-nav { .site-nav {

6
source/css/_schemes/Pisces/_header.styl
View File

@ -21,11 +21,9 @@
} }
.site-nav-toggle, .site-nav-search { .site-nav-toggle, .site-nav-search {
color: white;
+tablet() { +tablet() {
flex-column(); flex-column();
} }
.toggle {
color: white;
}
} }

1
source/css/noscript.styl
View File

@ -15,7 +15,6 @@ body { margin-top: 2rem; }
} }
.use-motion .column, .use-motion .column,
.use-motion .site-brand-container .toggle,
.use-motion .footer { opacity: initial; } .use-motion .footer { opacity: initial; }
.use-motion .site-title, .use-motion .site-title,

3
source/js/next-boot.js
View File

@ -9,8 +9,7 @@ NexT.boot.registerEvents = function() {
NexT.utils.updateFooterPosition(); NexT.utils.updateFooterPosition();
// Mobile top menu bar. // Mobile top menu bar.
document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => { document.querySelector('.site-nav-toggle').addEventListener('click', event => {
event.currentTarget.classList.toggle('toggle-close');
const siteNav = document.querySelector('.site-nav'); const siteNav = document.querySelector('.site-nav');
if (!siteNav) return; if (!siteNav) return;
siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px'); siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');