navbar.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. {% assign breakpoint = include.breakpoint | default: 'md' %}
  2. {% assign condensed = include.condensed | default: false %}
  3. {% if include.sticky %}
  4. <div class="sticky-top">
  5. {% endif %}
  6. <header class="navbar navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% else %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endif %}{% if include.sticky %} sticky-top{% endif %}{% if include.overlap %} navbar-overlap{% endif %}{% if include.class %} {{ include.class }}{% endif %} d-print-none"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %} {% if include.dark %} data-bs-theme="dark"{% endif %}>
  7. <div class="container-xl">
  8. {% include layout/navbar-toggler.html target="navbar-menu" %}
  9. {% unless include.hide-brand %}
  10. {% include layout/navbar-logo.html small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
  11. {% endunless %}
  12. {% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint dark=include.dark %}
  13. {% if condensed %}
  14. <div class="collapse navbar-collapse" id="navbar-menu">
  15. {% if include.hide-search %}
  16. {% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
  17. {% elsif include.hide-menu %}
  18. {% include layout/navbar-search.html rounded=include.transparent %}
  19. {% else %}
  20. <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
  21. {% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
  22. {% unless condensed %}
  23. {% assign search-class = "ms-md-auto ps-md-4 py-2 py-md-0 me-md-4 order-first order-md-last flex-grow-1" %}
  24. {% unless include.fluid-search %}
  25. {% assign search-class = search-class | append: " flex-md-grow-0" %}
  26. {% endunless %}
  27. {% include layout/navbar-search.html breakpoint=breakpoint rounded=include.transparent class=search-class %}
  28. {% endunless %}
  29. </div>
  30. {% endif %}
  31. </div>
  32. {% endif %}
  33. </div>
  34. </header>
  35. {% unless condensed %}
  36. <header class="navbar-expand-{{ breakpoint }}">
  37. <div class="collapse navbar-collapse" id="navbar-menu">
  38. <div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
  39. <div class="container-xl">
  40. <div class="row flex-fill align-items-center">
  41. <div class="col">
  42. {% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons long-titles=true %}
  43. </div>
  44. <div class="col-2 d-none d-xxl-block">
  45. {% include layout/navbar-search.html breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </header>
  52. {% endunless %}
  53. {% if include.sticky %}
  54. </div>
  55. {% endif %}