navbar.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. {{ $current_page := . }}
  2. <nav class="navbar navbar-light fixed-top navbar-expand-lg py-0" id="navbar-main">
  3. <div class="container">
  4. <!-- Brand and toggle get grouped for better mobile display -->
  5. <a class="navbar-brand" href="{{ "/" | relLangURL }}">
  6. {{- if site.Params.logo -}}
  7. <img src="{{ printf "/img/%s" site.Params.logo | relURL }}" alt="{{ site.Title }}">
  8. {{- else -}}
  9. {{- site.Title -}}
  10. {{- end -}}
  11. </a>
  12. {{ if or site.Menus.main .IsTranslated }}
  13. <button type="button" class="navbar-toggler" data-toggle="collapse"
  14. data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="{{ i18n "toggle_navigation" }}">
  15. <span><i class="fas fa-bars"></i></span>
  16. </button>
  17. {{ end }}
  18. <!-- Collect the nav links, forms, and other content for toggling -->
  19. <div class="collapse navbar-collapse" id="navbar">
  20. <!-- Left Nav Bar -->
  21. {{ $align_right := site.Params.menu_align_right | default true }}
  22. <ul class="navbar-nav {{ if $align_right }}ml-auto{{ else }}mr-auto{{ end }}">
  23. {{ range site.Menus.main }}
  24. {{ if .HasChildren }}
  25. <li class="nav-item dropdown">
  26. <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
  27. {{ .Pre }}
  28. <span>{{ .Name | safeHTML }}</span>
  29. {{ .Post }}
  30. <span class="caret"></span>
  31. </a>
  32. <ul class="dropdown-menu">
  33. {{ range .Children }}
  34. <li class="dropdown-item my-0 py-0 mx-0 px-0">
  35. <a href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
  36. {{ .Pre }}
  37. <span>{{ .Name | safeHTML }}</span>
  38. {{ .Post }}
  39. </a>
  40. </li>
  41. {{ end }}
  42. </ul>
  43. </li>
  44. {{ else }}
  45. {{/* Set target for link. */}}
  46. {{ $.Scratch.Set "target" "" }}
  47. {{ if gt (len .URL) 4 }}
  48. {{ if eq "http" (slicestr .URL 0 4) }}
  49. {{ $.Scratch.Set "target" " target=\"_blank\" rel=\"noopener\"" }}
  50. {{ end }}
  51. {{ end }}
  52. {{/* Get active page. */}}
  53. {{ $is_link_in_current_path := in $current_page.RelPermalink .URL }}
  54. {{ $is_widget_page := or $current_page.IsHome (eq $current_page.Type "widget_page") }}
  55. {{ $hash := findRE "#(.+)" .URL }}
  56. {{ $is_same_page := $is_link_in_current_path }}
  57. {{ if gt (len $hash) 0 }}
  58. {{ $hash = index $hash 0 }}
  59. {{ $hash_removed := (replace .URL $hash "") }}
  60. {{ if eq (len $hash_removed) 0 }}
  61. {{ $hash_removed = "/" }}{{/* Add robustness for `/#SECTION` or `#SECTION` in `menus.toml`. */}}
  62. {{ end }}
  63. {{ $is_same_page = eq $current_page.RelPermalink $hash_removed }}
  64. {{ end }}
  65. <li class="nav-item">
  66. <a class="nav-link {{if $is_link_in_current_path }} active{{end}}" href="{{.URL | relLangURL}}"{{ if and $is_widget_page $is_same_page }} data-target="{{$hash}}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
  67. {{ .Pre }}
  68. <span>{{ .Name | safeHTML }}</span>
  69. {{ .Post }}
  70. </a>
  71. </li>
  72. {{ end }}
  73. {{ end }}
  74. {{ if not $align_right | and (.IsTranslated | or site.Menus.main_right | or site.Params.search.engine | or site.Params.day_night) }}
  75. </ul>
  76. <ul class="navbar-nav ml-auto">
  77. {{ end }}
  78. {{ range site.Menus.main_right }}
  79. {{/* Set target for link. */}}
  80. {{ $.Scratch.Set "target" "" }}
  81. {{ if gt (len .URL) 4 }}
  82. {{ if eq "http" (slicestr .URL 0 4) }}
  83. {{ $.Scratch.Set "target" " target=\"_blank\" rel=\"noopener\"" }}
  84. {{ end }}
  85. {{ end }}
  86. <li class="nav-item">
  87. <a class="nav-link" href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
  88. {{ .Pre }}
  89. <span>{{ .Name | safeHTML }}</span>
  90. {{ .Post }}
  91. </a>
  92. </li>
  93. {{ end }}
  94. {{ if site.Params.search.engine }}
  95. <li class="nav-item">
  96. <a class="nav-link js-search" href="#"><i class="fas fa-search" aria-hidden="true"></i></a>
  97. </li>
  98. {{ end }}
  99. {{ if .IsTranslated }}
  100. <li class="nav-item dropdown">
  101. <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
  102. <i class="fas fa-globe" aria-hidden="true"></i>
  103. <span>{{ index site.Data.i18n.languages .Lang }}</span>
  104. </a>
  105. <ul class="dropdown-menu">
  106. {{ range .Translations }}
  107. <li class="dropdown-item my-0 py-0 mx-0 px-0">
  108. <a href="{{ .Permalink }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
  109. <span>{{ index site.Data.i18n.languages .Lang }}</span>
  110. </a>
  111. </li>
  112. {{ end }}
  113. </ul>
  114. </li>
  115. {{ end }}
  116. {{ if site.Params.day_night }}
  117. <li class="nav-item">
  118. <a class="nav-link js-dark-toggle" href="#"><i class="fas fa-moon" aria-hidden="true"></i></a>
  119. </li>
  120. {{ end }}
  121. </ul>
  122. </div><!-- /.navbar-collapse -->
  123. </div><!-- /.container -->
  124. </nav>