Skip to content

Commit e5abd92

Browse files
sathishksathishk
committed
Header Custom
1 parent 6dfe6c4 commit e5abd92

File tree

3 files changed

+284
-0
lines changed

3 files changed

+284
-0
lines changed

‎assets/scss/common/_custom.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,8 @@ li.nav-item a.nav-link, #buttonColorMode, #searchToggleDesktop {
1010

1111
section.section-features>.container>.row>.col-lg-5 {
1212
background-color: #F5F4F4;
13+
}
14+
15+
.navbar-brand > img {
16+
height: 40px;
1317
}

‎hugo_stats.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@
130130
"h4",
131131
"h5",
132132
"header",
133+
"header-logo",
133134
"highlight",
134135
"home",
135136
"icon",
@@ -195,6 +196,7 @@
195196
"offcanvas-header",
196197
"offcanvas-start",
197198
"offcanvas-title",
199+
"order-0",
198200
"order-3",
199201
"order-lg-4",
200202
"p-0",

‎layouts/partials/header/header.html

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
{{ if site.Params.doks.alert -}}
2+
{{ partial "header/alert.html" . }}
3+
{{ end -}}
4+
5+
{{ if site.Params.doks.navbarSticky -}}
6+
<div class="sticky-top">
7+
{{ end -}}
8+
9+
{{ if site.Params.doks.headerBar -}}
10+
<div class="header-bar"></div>
11+
{{ end -}}
12+
13+
<header class="navbar navbar-expand-lg">
14+
{{ with site.Params.doks.containerBreakpoint -}}
15+
<div class="container-{{ . }}">
16+
{{ else -}}
17+
<div class="container">
18+
{{ end -}}
19+
20+
<!-- Site title -->
21+
<!-- Insert our Custom OCM Text Image Instead of the Plain title. -->
22+
<!-- <a class="navbar-brand me-auto me-lg-3" href="{{ relLangURL "" }}">{{ .Site.Title }}</a> -->
23+
<a class="navbar-brand order-0" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
24+
<img src="/images/logo_full.svg" alt="Open Component Model Logo" class="header-logo">
25+
</a>
26+
27+
<!-- FlexSearch mobile -->
28+
{{ partial "main/showFlexSearch" . }}
29+
{{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
30+
{{ if $showFlexSearch -}}
31+
<button type="button" id="searchToggleMobile" class="btn btn-link nav-link mx-2 d-lg-none" aria-label="Search website">
32+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
33+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
34+
<circle cx="10" cy="10" r="7"></circle>
35+
<line x1="21" y1="21" x2="15" y2="15"></line>
36+
</svg>
37+
</button>
38+
{{ end -}}
39+
40+
<!-- Section navigation -->
41+
{{ if (in site.Params.doks.sectionNav .Section) -}}
42+
<button class="btn btn-link d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavSection" aria-controls="offcanvasNavSection" aria-label="Open section navigation menu">
43+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots-vertical" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
44+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
45+
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
46+
<path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
47+
<path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
48+
</svg>
49+
</button>
50+
<div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasNavSection" aria-labelledby="offcanvasNavSectionLabel">
51+
{{ if site.Params.doks.headerBar -}}
52+
<div class="header-bar"></div>
53+
{{ end -}}
54+
<div class="offcanvas-header">
55+
<h5 class="offcanvas-title" id="offcanvasNavSectionLabel">{{ .Section | humanize }}</h5>
56+
<button type="button" class="btn btn-link nav-link p-0 ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
57+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
58+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
59+
<path d="M18 6l-12 12"></path>
60+
<path d="M6 6l12 12"></path>
61+
</svg>
62+
</button>
63+
</div>
64+
<div class="offcanvas-body">
65+
<aside class="doks-sidebar mt-n3">
66+
<nav id="doks-docs-nav" aria-label="Tertiary navigation">
67+
{{ partial "sidebar/section-menu.html" . }}
68+
</nav>
69+
</aside>
70+
</div>
71+
</div>
72+
{{ end -}}
73+
74+
<!-- Main navigation button -->
75+
<button class="btn btn-link nav-link mx-2 order-3 d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavMain" aria-controls="offcanvasNavMain" aria-label="Open main navigation menu">
76+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
77+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
78+
<line x1="4" y1="8" x2="20" y2="8"></line>
79+
<line x1="4" y1="16" x2="20" y2="16"></line>
80+
</svg>
81+
</button>
82+
83+
<!-- Main navigation -->
84+
<div class="offcanvas offcanvas-end h-auto" tabindex="-1" id="offcanvasNavMain" aria-labelledby="offcanvasNavMainLabel">
85+
{{ if site.Params.doks.headerBar -}}
86+
<div class="header-bar d-lg-none"></div>
87+
{{ end -}}
88+
<div class="offcanvas-header">
89+
<h5 class="offcanvas-title" id="offcanvasNavMainLabel">{{ site.Title }}</h5>
90+
<button type="button" class="btn btn-link nav-link p-0 ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
91+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
92+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
93+
<path d="M18 6l-12 12"></path>
94+
<path d="M6 6l12 12"></path>
95+
</svg>
96+
</button>
97+
</div>
98+
<!--
99+
<div class="offcanvas-header">
100+
<h5 class="offcanvas-title fw-bold" id="offcanvasNavMainLabel">{{ .Site.Params.Title }}</h5>
101+
<button class="btn btn-link nav-link ms-auto" type="button" data-bs-dismiss="offcanvas" aria-label="Close menu">
102+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
103+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
104+
<path d="M18 6l-12 12"></path>
105+
<path d="M6 6l12 12"></path>
106+
</svg>
107+
</button>
108+
</div>
109+
-->
110+
<div class="offcanvas-body d-flex flex-column flex-lg-row justify-content-between">
111+
<ul class="navbar-nav flex-grow-1 justify-content-end">
112+
{{- $current := . -}}
113+
{{- $section := $current.Section -}}
114+
{{ range .Site.Menus.main -}}
115+
{{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
116+
{{- $active = or $active (eq .Name $current.Title) -}}
117+
{{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
118+
{{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "authors")) -}}
119+
{{ if .HasChildren -}}
120+
<li class="nav-item dropdown">
121+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
122+
{{ .Name -}}
123+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
124+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
125+
<path d="M6 9l6 6l6 -6"></path>
126+
</svg>
127+
</a>
128+
<ul class="dropdown-menu shadow rounded border-0">
129+
{{ range .Children -}}
130+
{{- $active = eq .Name $current.Title -}}
131+
<li><a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a></li>
132+
{{ end -}}
133+
</ul>
134+
</li>
135+
{{ else -}}
136+
<li class="nav-item">
137+
<a class="nav-link{{ if $active }} active{{ end }}" href="{{ .URL | absURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
138+
</li>
139+
{{ end -}}
140+
{{ end -}}
141+
</ul>
142+
143+
<!-- FlexSearch desktop -->
144+
{{ partial "main/showFlexSearch" . }}
145+
{{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
146+
{{ if $showFlexSearch -}}
147+
<button type="button" id="searchToggleDesktop" class="btn btn-link nav-link p-2 d-none d-lg-block" aria-label="Search website">
148+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
149+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
150+
<circle cx="10" cy="10" r="7"></circle>
151+
<line x1="21" y1="21" x2="15" y2="15"></line>
152+
</svg>
153+
</button>
154+
{{ end -}}
155+
156+
<!-- Language dropdown -->
157+
{{ if eq site.Params.doks.multilingualMode true -}}
158+
159+
<div class="dropdown mt-1 order-lg-2">
160+
<button class="btn btn-dropdown dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
161+
<span class="dropdown-caret">
162+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
163+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
164+
<path d="M4 5h7"></path>
165+
<path d="M9 3v2c0 4.418 -2.239 8 -5 8"></path>
166+
<path d="M5 9c0 2.144 2.952 3.908 6.7 4"></path>
167+
<path d="M12 20l4 -9l4 9"></path>
168+
<path d="M19.1 18h-6.2"></path>
169+
</svg>
170+
<span id="doks-language-current">{{ .Site.Language.LanguageName }}</span>
171+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
172+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
173+
<path d="M6 9l6 6l6 -6"></path>
174+
</svg>
175+
</span>
176+
</button>
177+
<ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-languages">
178+
179+
<li><span class="dropdown-item current" aria-current="true">{{ .Site.Language.LanguageName }}</span></li>
180+
181+
<li><hr class="dropdown-divider"></li>
182+
183+
{{ if site.Params.doks.showMissingLanguages -}}
184+
{{ $translatedLangs := slice -}}
185+
{{ range .Translations -}}
186+
{{ $translatedLangs = $translatedLangs | append .Lang }}
187+
{{- end }}
188+
{{ range site.Languages -}}
189+
{{ if and (ne $.Lang .Lang) (not (in $.Params.skipTranslations .Lang)) -}}
190+
{{ $isTranslated := in $translatedLangs .Lang -}}
191+
<li><a class="dropdown-item {{ if not $isTranslated }}untranslated{{ end }}" rel="alternate" href="{{ if $isTranslated }}{{ (index (where $.Translations "Lang" .Lang) 0).RelPermalink }}{{ else }}{{ .Lang | relURL }}{{ end }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .LanguageName }}</a></li>
192+
{{- end }}
193+
{{- end }}
194+
{{ else -}}
195+
{{ range .Translations -}}
196+
<li><a class="dropdown-item" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Language.LanguageName }}</a></li>
197+
{{- end }}
198+
{{- end }}
199+
<!--
200+
<li><hr class="dropdown-divider"></li>
201+
<li><a class="dropdown-item" href="/docs/contributing/how-to-contribute/">Help Translate</a></li>
202+
-->
203+
</ul>
204+
</div>
205+
{{ end -}}
206+
207+
<!-- Versioning dropdown -->
208+
{{ if eq site.Params.doks.docsVersioning true -}}
209+
210+
<div class="dropdown mt-1 order-lg-3">
211+
<button class="btn btn-dropdown dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
212+
<span class="d-none">Doks</span> v{{ site.Params.doks.docsVersion }}
213+
<span class="dropdown-caret">
214+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
215+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
216+
<path d="M6 9l6 6l6 -6"></path>
217+
</svg>
218+
</span>
219+
</button>
220+
<ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-versions">
221+
<li><a class="dropdown-item current" aria-current="true" href="/docs/{{ site.Params.doks.docsVersion }}/prologue/introduction/">Latest ({{ site.Params.doks.docsVersion }}.x)</a></li>
222+
<li><hr class="dropdown-divider"></li>
223+
<li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li>
224+
<li><a class="dropdown-item" href="/docs/0.1/prologue/introduction/">v0.1.x</a></li>
225+
<li><hr class="dropdown-divider"></li>
226+
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
227+
</ul>
228+
</div>
229+
{{ end -}}
230+
231+
<!-- Color mode toggler -->
232+
{{ if and (eq site.Params.doks.colorMode "auto") site.Params.doks.colorModeToggler -}}
233+
<button id="buttonColorMode" class="btn btn-link mx-auto nav-link p-0 ms-lg-2 me-lg-1" type="button" aria-label="Toggle theme">
234+
<svg data-bs-theme-value="dark" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
235+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
236+
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
237+
</svg>
238+
<svg data-bs-theme-value="light" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
239+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
240+
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0m-5 0h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
241+
</svg>
242+
</button>
243+
{{ end -}}
244+
245+
<!-- Social menu -->
246+
{{ if .Site.Menus.social -}}
247+
<ul id="socialMenu" class="nav mx-auto flex-row order-lg-4">
248+
{{ range .Site.Menus.social -}}
249+
<li class="nav-item">
250+
<a class="nav-link social-link" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 visually-hidden">{{ .Name | safeHTML }}</small></a>
251+
</li>
252+
{{ end -}}
253+
</ul>
254+
{{ end -}}
255+
256+
257+
<!-- Navbar button mobile -->
258+
{{ if site.Params.doks.navBarButton -}}
259+
<a class="btn btn-primary rounded-pill mt-2 btn-block d-lg-none" href="{{ site.Params.doks.navBarButtonUrl | absURL }}" role="button">{{ site.Params.doks.navBarButtonText }}</a>
260+
{{ end -}}
261+
</div>
262+
</div>
263+
264+
<!-- Navbar button desktop -->
265+
{{ if site.Params.doks.navBarButton -}}
266+
<a class="btn btn-primary rounded-pill ms-3 me-2 px-4 order-lg-3 d-none d-lg-block" href="{{ site.Params.doks.navBarButtonUrl | absURL }}" role="button">{{ site.Params.doks.navBarButtonText }}</a>
267+
{{ end -}}
268+
269+
</div>
270+
</header>
271+
{{ if site.Params.doks.navbarSticky -}}
272+
</div>
273+
{{ end -}}
274+
275+
<!-- Search modal -->
276+
{{ if site.Params.doks.flexSearch -}}
277+
{{ partial "header/search-modal" . }}
278+
{{ end -}}

0 commit comments

Comments
 (0)