mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 23:38:56 +00:00
🎉 Feat: add sub menu (nested menu) support (#31)
TODO: compatibly support mobile header
This commit is contained in:
Cell
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
## v0.2.14
|
||||
|
||||
- :recycle: Refactor: header layout
|
||||
- Add sub menu (nested menu) support ([#31](https://github.com/Lruihao/FixIt/issues/31))
|
||||
- Modified language selector to submenu (@pandaoh[`eced169`](https://github.com/Lruihao/FixIt/commit/eced169713ce4a0208ce70ab556824e47eb671d5), @Lruihao[#31](https://github.com/Lruihao/FixIt/issues/31))
|
||||
- Fix some header css bug ([#31](https://github.com/Lruihao/FixIt/issues/31))
|
||||
- :zap: Perf: remove third-party library clipboard.js ([#84](https://github.com/Lruihao/FixIt/issues/84))
|
||||
- :pencil2: Docs: fix highlight url typo in `theme-documentation-built-in-shortcodes` (@d-baer[#85](https://github.com/Lruihao/FixIt/pull/85))
|
||||
- **Full Changelog:** @Lruihao [`v0.2.13...v0.2.14`](https://github.com/Lruihao/FixIt/compare/v0.2.13...v0.2.14)
|
||||
|
||||
@@ -59,17 +59,13 @@ header {
|
||||
color: transparent;
|
||||
box-sizing: border-box;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
width: 1.25rem;
|
||||
@include border-radius(0.5rem);
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: $header-background-color;
|
||||
background-color: transparent;
|
||||
vertical-align: baseline !important;
|
||||
@include transition(width 0.3s ease);
|
||||
|
||||
[theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@include placeholder(transparent);
|
||||
@@ -84,6 +80,10 @@ header {
|
||||
.search-toggle {
|
||||
left: 0.5rem;
|
||||
right: auto;
|
||||
|
||||
.open & {
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
@@ -141,6 +141,7 @@ header {
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
box-sizing: border-box;
|
||||
|
||||
[header-desktop='normal'] & {
|
||||
position: static;
|
||||
@@ -148,9 +149,11 @@ header {
|
||||
|
||||
.header-wrapper {
|
||||
padding: 0 2rem 0 10vh;
|
||||
height: 100%;
|
||||
|
||||
.header-title {
|
||||
font-size: $header-title-font-size;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu {
|
||||
@@ -168,19 +171,22 @@ header {
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
margin: 0 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
list-style: none;
|
||||
|
||||
&.delimiter {
|
||||
border-left: 1.5px solid $global-font-color;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-left: 1px dashed lighten($global-font-secondary-color, 20%);
|
||||
|
||||
[theme='dark'] & {
|
||||
border-left-color: $global-border-color-dark;
|
||||
border-left-color: darken($global-font-secondary-color-dark, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
& .dropdown-icon {
|
||||
text-align: right;
|
||||
margin-left: 0.25rem;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme='dark'] & {
|
||||
@@ -192,25 +198,34 @@ header {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.search {
|
||||
margin: 0 -0.5rem 0 0;
|
||||
&.active {
|
||||
>.menu-link {
|
||||
font-weight: bold;
|
||||
color: $menu-active-color;
|
||||
|
||||
[theme='dark'] & {
|
||||
color: $menu-active-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
z-index: 160;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
display: none;
|
||||
top: calc(#{$header-height} - 0.5rem);
|
||||
right: 0;
|
||||
// max-width: 5rem;
|
||||
|
||||
top: calc(#{$header-height} - 0.75rem);
|
||||
left: 0;
|
||||
border-radius: $global-border-radius;
|
||||
border: 1px solid $global-border-color;
|
||||
background-color: $header-background-color;
|
||||
@include transition(box-shadow 0.3s ease);
|
||||
|
||||
[theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
border-color: $global-border-color-dark;
|
||||
}
|
||||
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));
|
||||
@@ -218,24 +233,16 @@ header {
|
||||
.menu-item {
|
||||
height: $header-height*0.5;
|
||||
line-height: $header-height*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
a.active {
|
||||
font-weight: 900;
|
||||
// TODO 命名不规范
|
||||
color: $header-hover-color;
|
||||
|
||||
[theme='dark'] & {
|
||||
color: $header-hover-color-dark;
|
||||
max-width: 15rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open .header-wrapper .menu .menu-item.search {
|
||||
margin: 0 0.25rem 0 0.5rem;
|
||||
|
||||
input {
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
@@ -63,9 +63,9 @@ $header-background-color-dark: #252627 !default;
|
||||
$header-title-font-family: $global-font-family !default;
|
||||
$header-title-font-size: 1.5rem !default;
|
||||
|
||||
// Color of the hover header item
|
||||
$header-hover-color: #161209 !default;
|
||||
$header-hover-color-dark: #fff !default;
|
||||
// Color of the active menu item
|
||||
$menu-active-color: #161209 !default;
|
||||
$menu-active-color-dark: #fff !default;
|
||||
|
||||
// Color of the search background
|
||||
$search-background-color: #e9e9e9 !default;
|
||||
|
||||
@@ -41,9 +41,9 @@
|
||||
{{- with .Page -}}
|
||||
{{- $url = .RelPermalink -}}
|
||||
{{- end -}}
|
||||
<li class="menu-item">
|
||||
<a
|
||||
class="{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }}active{{ end }}"
|
||||
<li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}">
|
||||
<a
|
||||
class="menu-link"
|
||||
href="{{ $url }}"
|
||||
{{ with .Title }}title="{{ . }}"{{ end }}
|
||||
{{ if (urls.Parse $url).Host }}rel="noopener noreffer" target="_blank"{{ end }}
|
||||
@@ -51,16 +51,19 @@
|
||||
{{- with .Pre -}}{{- . | safeHTML }} {{ end }}{{ .Name }}{{ with .Post }} {{ . | safeHTML -}}{{- end -}}
|
||||
</a>
|
||||
{{- if .HasChildren -}}
|
||||
<i class="dropdown-icon fas fa-caret-down fa-fw"></i>
|
||||
<i class="dropdown-icon fas fa-caret-down"></i>
|
||||
<ul class="sub-menu">
|
||||
{{ range .Children }}
|
||||
{{- $url := .URL | relLangURL -}}
|
||||
{{- with .Page -}}
|
||||
{{- $url = .RelPermalink -}}
|
||||
{{- end -}}
|
||||
<li class="menu-item">
|
||||
<a
|
||||
class="{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }}active{{ end }}"
|
||||
<li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}">
|
||||
<!-- {{- if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) -}}
|
||||
<i class="fas fa-caret-right"></i>
|
||||
{{- end -}} -->
|
||||
<a
|
||||
class="menu-link"
|
||||
href="{{ $url }}"
|
||||
{{ with .Title }}title="{{ . }}"{{ end }}
|
||||
{{ if (urls.Parse $url).Host }}rel="noopener noreffer" target="_blank"{{ end }}
|
||||
@@ -73,15 +76,14 @@
|
||||
{{- end -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
||||
{{- if .Site.Menus.main -}}
|
||||
<!-- TODO -->
|
||||
<li class="menu-item delimiter"></li>
|
||||
{{- end -}}
|
||||
{{- if .Site.IsMultiLingual -}}
|
||||
<li class="menu-item language">
|
||||
<span title="{{ T "selectLanguage" }}">
|
||||
{{- .Language.LanguageName -}}
|
||||
<i class="dropdown-icon fas fa-caret-down fa-fw"></i>
|
||||
<i class="dropdown-icon fas fa-caret-down"></i>
|
||||
</span>
|
||||
<ul class="sub-menu" id="language-select-desktop">
|
||||
{{- if eq .Kind "404" -}}
|
||||
|
||||
Reference in New Issue
Block a user