Skip to content

Commit 825abc1

Browse files
AJsQuestionsAJsQuestions
committed
🌓 Move theme toggle to prominent position
- Moved toggle next to menu on all pages - Added .nav-right wrapper for menu + toggle - Toggle now visible on every page including home - Mobile responsive adjustments
1 parent 6181a28 commit 825abc1

File tree

15 files changed

+132
-106
lines changed

15 files changed

+132
-106
lines changed

‎assets/css/common/header.css‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,13 @@ body:not(.dark) #sun {
8989
display: none;
9090
}
9191

92+
/* Nav right section - menu + toggle */
93+
.nav-right {
94+
display: flex;
95+
align-items: center;
96+
gap: 12px;
97+
}
98+
9299
/* Menu - Dropdown style navigation */
93100
#menu {
94101
display: flex;
@@ -160,19 +167,34 @@ body:not(.dark) #sun {
160167
@media (max-width: 640px) {
161168
.nav {
162169
min-height: 64px;
170+
flex-wrap: wrap;
171+
gap: 8px;
172+
padding: 8px var(--gap);
173+
}
174+
175+
.nav-right {
176+
width: 100%;
177+
justify-content: space-between;
178+
gap: 8px;
163179
}
164180

165181
#menu {
166182
gap: 2px;
167183
padding: 4px;
184+
flex: 1;
185+
overflow-x: auto;
168186
}
169187

170188
#menu a {
171-
padding: 8px 12px;
172-
font-size: 13px;
189+
padding: 8px 10px;
190+
font-size: 12px;
173191
}
174192

175193
.logo a {
176194
font-size: 18px;
177195
}
196+
197+
button#theme-toggle {
198+
flex-shrink: 0;
199+
}
178200
}

‎layouts/partials/header.html‎

Lines changed: 67 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -75,78 +75,75 @@
7575
{{- $label_text -}}
7676
</a>
7777
{{- end }}
78-
<div class="logo-switches">
79-
{{- if (not site.Params.disableThemeToggle) }}
80-
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
81-
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
82-
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
83-
stroke-linejoin="round">
84-
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
85-
</svg>
86-
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
87-
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
88-
stroke-linejoin="round">
89-
<circle cx="12" cy="12" r="5"></circle>
90-
<line x1="12" y1="1" x2="12" y2="3"></line>
91-
<line x1="12" y1="21" x2="12" y2="23"></line>
92-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
93-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
94-
<line x1="1" y1="12" x2="3" y2="12"></line>
95-
<line x1="21" y1="12" x2="23" y2="12"></line>
96-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
97-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
98-
</svg>
99-
</button>
100-
{{- end }}
101-
102-
{{- $lang := .Lang}}
103-
{{- $separator := or $label_text (not site.Params.disableThemeToggle)}}
104-
{{- with site.Home.AllTranslations }}
105-
<ul class="lang-switch">
106-
{{- if $separator }}<li>|</li>{{ end }}
107-
{{- range . -}}
108-
{{- if ne $lang .Lang }}
109-
<li>
110-
<a href="{{- .Permalink -}}" title="{{ .Language.Params.languageAltTitle | default (.Language.LanguageName | emojify) | default (.Lang | title) }}"
111-
aria-label="{{ .Language.LanguageName | default (.Lang | title) }}">
112-
{{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }}
113-
{{- .Language.LanguageName | emojify -}}
114-
{{- else }}
115-
{{- .Lang | title -}}
116-
{{- end -}}
117-
</a>
118-
</li>
119-
{{- end -}}
120-
{{- end}}
121-
</ul>
122-
{{- end }}
123-
</div>
78+
{{- $lang := .Lang}}
79+
{{- with site.Home.AllTranslations }}
80+
<ul class="lang-switch">
81+
{{- range . -}}
82+
{{- if ne $lang .Lang }}
83+
<li>
84+
<a href="{{- .Permalink -}}" title="{{ .Language.Params.languageAltTitle | default (.Language.LanguageName | emojify) | default (.Lang | title) }}"
85+
aria-label="{{ .Language.LanguageName | default (.Lang | title) }}">
86+
{{- if (and site.Params.displayFullLangName (.Language.LanguageName)) }}
87+
{{- .Language.LanguageName | emojify -}}
88+
{{- else }}
89+
{{- .Lang | title -}}
90+
{{- end -}}
91+
</a>
92+
</li>
93+
{{- end -}}
94+
{{- end}}
95+
</ul>
96+
{{- end }}
12497
</div>
12598
{{- $currentPage := . }}
126-
<ul id="menu">
127-
{{- range site.Menus.main }}
128-
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
129-
{{- $page_url:= $currentPage.Permalink | absLangURL }}
130-
{{- $is_search := eq (site.GetPage .KeyName).Layout `search` }}
131-
<li>
132-
<a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
133-
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
134-
<span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
135-
{{- .Pre }}
136-
{{- .Name -}}
137-
{{ .Post -}}
138-
</span>
139-
{{- if (findRE "://" .URL) }}&nbsp;
140-
<svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
141-
stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
142-
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
143-
<path d="M15 3h6v6"></path>
144-
<path d="M10 14L21 3"></path>
145-
</svg>
146-
{{- end }}
147-
</a>
148-
</li>
99+
<div class="nav-right">
100+
<ul id="menu">
101+
{{- range site.Menus.main }}
102+
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
103+
{{- $page_url:= $currentPage.Permalink | absLangURL }}
104+
{{- $is_search := eq (site.GetPage .KeyName).Layout `search` }}
105+
<li>
106+
<a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
107+
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
108+
<span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
109+
{{- .Pre }}
110+
{{- .Name -}}
111+
{{ .Post -}}
112+
</span>
113+
{{- if (findRE "://" .URL) }}&nbsp;
114+
<svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
115+
stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
116+
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
117+
<path d="M15 3h6v6"></path>
118+
<path d="M10 14L21 3"></path>
119+
</svg>
120+
{{- end }}
121+
</a>
122+
</li>
123+
{{- end }}
124+
</ul>
125+
{{- if (not site.Params.disableThemeToggle) }}
126+
<button id="theme-toggle" accesskey="t" title="Toggle theme (Alt + T)">
127+
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
128+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
129+
stroke-linejoin="round">
130+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
131+
</svg>
132+
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
133+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
134+
stroke-linejoin="round">
135+
<circle cx="12" cy="12" r="5"></circle>
136+
<line x1="12" y1="1" x2="12" y2="3"></line>
137+
<line x1="12" y1="21" x2="12" y2="23"></line>
138+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
139+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
140+
<line x1="1" y1="12" x2="3" y2="12"></line>
141+
<line x1="21" y1="12" x2="23" y2="12"></line>
142+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
143+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
144+
</svg>
145+
</button>
149146
{{- end }}
150-
</ul>
147+
</div>
151148
</nav>
152149
</header>

0 commit comments

Comments
 (0)