Refactor header and search components for improved structure and functionality
This commit is contained in:
Fundor333
@@ -1,75 +1,69 @@
|
||||
<div class="navbar" role="navigation">
|
||||
<nav class="menu" aria-label="Main Navigation">
|
||||
<a href="{{ .Site.Home.Permalink }}" class="logo">
|
||||
<i class="fa-solid fa-code fa-xl"></i>
|
||||
</a>
|
||||
<input type="checkbox" id="menu-trigger" class="menu-trigger" />
|
||||
<label for="menu-trigger">
|
||||
<span class="menu-icon">
|
||||
<i class="fa-regular fa-bars fa-xl"></i>
|
||||
</span>
|
||||
</label>
|
||||
<nav class="menu" aria-label="Main Navigation">
|
||||
<a href="{{ .Site.Home.Permalink }}" class="logo">
|
||||
<i class="fa-solid fa-code fa-xl"></i>
|
||||
</a>
|
||||
<input type="checkbox" id="menu-trigger" class="menu-trigger" />
|
||||
<label for="menu-trigger">
|
||||
<span class="menu-icon">
|
||||
<i class="fa-regular fa-bars fa-xl"></i>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="trigger">
|
||||
<ul class="trigger-container">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li>
|
||||
<a class="menu-link {{ if or ($currentPage.IsMenuCurrent "main" .)
|
||||
($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
</a>
|
||||
{{ if .HasChildren }}
|
||||
<ul>
|
||||
{{ range .Children }}
|
||||
<li>
|
||||
<a class="menu-link {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
|
||||
href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
<li>
|
||||
{{ partial "search-form.html" . }}
|
||||
</li>
|
||||
<li class="menu-separator">
|
||||
<span>|</span>
|
||||
</li>
|
||||
<!-- Language List -->
|
||||
{{ if .IsTranslated }}
|
||||
<li>
|
||||
<select aria-label="Select Language" class="lang-list" id="select-language" onchange="location = this.value;">
|
||||
{{ $siteLanguages := .Site.Languages}}
|
||||
{{ $pageLang := .Page.Lang}}
|
||||
{{ range .Page.AllTranslations }}
|
||||
{{ $translation := .}}
|
||||
{{ range $siteLanguages }}
|
||||
{{ if eq $translation.Lang .Lang }}
|
||||
{{ $selected := false }}
|
||||
{{ if eq $pageLang .Lang}}
|
||||
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageCode | upper }}
|
||||
</option>
|
||||
{{ else }}
|
||||
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageCode | upper }}</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
</li>
|
||||
<li class="menu-separator">
|
||||
<span>|</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<a id="mode" href="#">
|
||||
<i class="fa-regular fa-sun mode-sunny fa-xl"></i>
|
||||
<i class="fa-regular fa-moon mode-moon fa-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="trigger">
|
||||
<ul class="trigger-container">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li>
|
||||
<a class="menu-link {{ if or ($currentPage.IsMenuCurrent "main" .)
|
||||
($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
</a>
|
||||
{{ if .HasChildren }}
|
||||
<ul>
|
||||
{{ range .Children }}
|
||||
<li>
|
||||
<a class="menu-link {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
|
||||
href="{{ .URL }}">
|
||||
{{ .Name }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
<li>
|
||||
<a class="menu-link" href="/search">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</a> </li>
|
||||
<!-- Language List -->
|
||||
{{ if .IsTranslated }}
|
||||
<li>
|
||||
<select aria-label="Select Language" class="lang-list" id="select-language" onchange="location = this.value;">
|
||||
{{ $siteLanguages := .Site.Languages}}
|
||||
{{ $pageLang := .Page.Lang}}
|
||||
{{ range .Page.AllTranslations }}
|
||||
{{ $translation := .}}
|
||||
{{ range $siteLanguages }}
|
||||
{{ if eq $translation.Lang .Lang }}
|
||||
{{ $selected := false }}
|
||||
{{ if eq $pageLang .Lang}}
|
||||
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageCode | upper }}
|
||||
</option>
|
||||
{{ else }}
|
||||
<option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageCode | upper }}</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</select>
|
||||
</li>
|
||||
<li class="menu-separator">
|
||||
<span>|</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,32 @@
|
||||
<form id="search"
|
||||
action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
|
||||
<label hidden for="search-input">Search site</label>
|
||||
<input type="text" id="search-input" name="q"
|
||||
placeholder="">
|
||||
action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
|
||||
<label hidden for="search-input">Search site</label>
|
||||
<input type="text" id="search-input" name="q"
|
||||
placeholder>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
|
||||
function popolaInputDaUrl(nomeParametro, idInput) {
|
||||
// 1. Recupera la stringa dei parametri dall'URL corrente
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
// 2. Estrae il valore associato alla chiave specificata
|
||||
const valore = params.get(nomeParametro);
|
||||
|
||||
// 3. Se il valore esiste, popola l'elemento input
|
||||
if (valore) {
|
||||
const inputElement = document.getElementById(idInput);
|
||||
if (inputElement) {
|
||||
inputElement.value = valore;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Esempio di utilizzo all'avvio della pagina:
|
||||
window.onload = () => {
|
||||
popolaInputDaUrl('q', 'search-input');
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template id="search-result" hidden>
|
||||
<article class="content post post-item">
|
||||
<h4 class="post-title post-item-title"><a class="read-more-link"><i class="fa-duotone fa-regular fa-flag-pennant"></i> <a class="summary-title-link"></a></a></h4>
|
||||
<summary class="summary" hidden></summary>
|
||||
<h4 class="post-title post-item-title"><a class="read-more-link"><i class="fa-duotone fa-regular fa-flag-pennant"></i> <a
|
||||
class="summary-title-link"></a></a></h4>
|
||||
<summary class="summary" hidden></summary>
|
||||
|
||||
<div class="read-more-container">
|
||||
<time class="post-item-meta"></time>
|
||||
</div>
|
||||
<div class="read-more-container">
|
||||
<time class="post-item-meta"></time>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
{{ define "main"}}
|
||||
<div class="wrapper list-page">
|
||||
<header class="header">
|
||||
<h1 class="header-title center">{{ .Title }}</h1>
|
||||
<h1 class="header-title center">{{ .Title }}</h1>
|
||||
</header>
|
||||
{{ partial "search-form.html" . }}
|
||||
|
||||
<main class="page-content" aria-label="Content">
|
||||
|
||||
@@ -12,12 +13,12 @@
|
||||
|
||||
<div class="main-inner">
|
||||
|
||||
|
||||
<script src="/js/lunr.min.js"></script>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ partial "search-index.html" . }}
|
||||
|
||||
{{ partial "search-index.html" . }}
|
||||
</main>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user