Skip to content

Commit

Permalink
feat: supports secondary menu configuration in mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@XPoet
XPoet committed Jul 10, 2024
1 parent ae9fa33 commit 7b32ee5
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 72 deletions.
59 changes: 43 additions & 16 deletions layout/_partial/header.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ for (const key in origin_h_menu_nav_object) {
<header class="header-wrapper<%= s_fs_enable === true && is_home() ? ' transparent-1' : '' %>">
<div class="border-box header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
<div class="left border-box">
<div class="left flex-start border-box">
<% if (bi_logo) { %>
<a class="logo-image border-box" href="<%- url_for('/') %>">
<%- image_tag(bi_logo) %>
Expand All @@ -25,28 +25,28 @@ for (const key in origin_h_menu_nav_object) {
</div>
<div class="right border-box">
<div class="pc">
<div class="pc border-box">
<ul class="menu-list border-box">
<% for (const i in h_menu_nav_object) { %>
<% const { path, icon, name, children } = getMenuItemObj(h_menu_nav_object, i) %>
<li class="menu-item border-box<%- children.length ? ' has-sub-menu' : '' %><%- is_current(path) && !children.length ? ' active' : '' %>">
<a class="border-box" href="<%- !children.length ? url_for(path) : 'javascript:void(0);' %>">
<li class="menu-item flex-start border-box<%- children.length ? ' has-sub-menu' : '' %><%- is_current(path) && !children.length ? ' active' : '' %>">
<a class="menu-text-color border-box" href="<%- !children.length ? url_for(path) : 'javascript:void(0);' %>">
<% if (icon) { %>
<i class="menu-icon <%= icon %>"></i>
<i class="menu-text-color menu-icon <%= icon %>"></i>
<% } %>
<%= __(name).toUpperCase() %>
<% if (children.length) { %>
<i class="collapse-icon fa-solid fa-angle-down"></i>
<i class="menu-text-color collapse-icon fa-solid fa-angle-down"></i>
<% } %>
</a>
<% if (children.length) { %>
<ul class="sub-menu-list border-box">
<% for (const smi of children) { %>
<% const { path: p2, icon: i2, name: n2 } = parseMenuItem(smi) %>
<li class="sub-menu-item border-box <%- is_current(p2) ? ' active' : '' %>">
<a class="border-box" href="<%- url_for(p2) %>">
<a class="menu-text-color border-box flex-start" href="<%- url_for(p2) %>">
<% if (i2) { %>
<i class="sub-menu-icon <%= i2 %>"></i>
<i class="menu-text-color sub-menu-icon <%= i2 %>"></i>
<% } %>
<%= __(n2).toUpperCase() %>
</a>
Expand All @@ -58,12 +58,12 @@ for (const key in origin_h_menu_nav_object) {
<% } %>
<% if (local_search_enable === true) { %>
<li class="menu-item search search-popup-trigger">
<i class="fas search fa-search"></i>
<i class="menu-text-color fas search fa-search"></i>
</li>
<% } %>
</ul>
</div>
<div class="mobile">
<div class="mobile border-box flex-start">
<% if (local_search_enable === true) { %>
<div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
<% } %>
Expand All @@ -75,13 +75,40 @@ for (const key in origin_h_menu_nav_object) {
</div>
<div class="header-drawer">
<ul class="drawer-menu-list">
<ul class="drawer-menu-list border-box">
<% for (const i in h_menu_nav_object) { %>
<% const { path, name} = getMenuItemObj(h_menu_nav_object, i) %>
<li class="drawer-menu-item flex-center">
<a class="<%- is_current(path) ? 'active' : '' %>"
href="<%- url_for(path) %>"
><%= __(name).toUpperCase() %></a>
<% const { path, icon, name, children } = getMenuItemObj(h_menu_nav_object, i) %>
<li class="drawer-menu-item border-box<%- children.length ? ' has-sub-menu' : ' not-sub-menu' %><%- is_current(path) && !children.length ? ' active' : '' %>">
<label class="drawer-menu-label border-box">
<a class="drawer-menu-text-color left-side flex-start border-box" href="<%- !children.length ? url_for(path) : 'javascript:void(0);' %>">
<% if (icon) { %>
<span class="menu-icon-wrap border-box flex-center">
<i class="drawer-menu-text-color menu-icon <%= icon %>"></i>
</span>
<% } %>
<%= __(name).toUpperCase() %>
</a>
<% if (children.length) { %>
<i class="right-side collapse-icon fa-solid fa-angle-left"></i>
<% } %>
</label>
<% if (children.length) { %>
<ul class="drawer-sub-menu-list border-box">
<% for (const smi of children) { %>
<% const { path: p2, icon: i2, name: n2 } = parseMenuItem(smi) %>
<li class="sub-menu-item border-box<%- is_current(p2) ? ' active' : '' %>">
<a class="drawer-menu-text-color border-box flex-start" href="<%- url_for(p2) %>">
<% if (i2) { %>
<span class="sub-menu-icon-wrap border-box flex-center">
<i class="drawer-menu-text-color sub-menu-icon <%= i2 %>"></i>
</span>
<% } %>
<%= __(n2).toUpperCase() %>
</a>
</li>
<% } %>
</ul>
<% } %>
</li>
<% } %>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion source/css/common/css-variables.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
--header-scroll-progress-bar-height 2px
--header-title-font-family var(--base-font-family)
--header-title-font-size 1.8rem
--header-menu-icon inline-block // Option values: inline-block | none
--header-menu-icon inline-flex // Option values: inline-flex | none


// ==============================================================================================
Expand Down
Loading

0 comments on commit 7b32ee5

Please sign in to comment.