Class: Bulmacomp::NavbarComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/bulmacomp/navbar_component.rb

Overview

Make an html structure for a bulma navbar

Examples:

Empty navbar:

= render Bulmacomp::NavbarComponent.new()

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/"></a>

    <a role="button" class="navbar-burger" aria-label="menu"
      aria-expanded="false" data-target="navbarBasicExample" data_action="page#toggleMenu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu"></div>
</nav>

full navbar:

= render Bulmacomp::NavbarComponent.new(brand: 'Title') do
  <div class="navbar-start"><a href="/" class="navbar-item">Home</a>

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">Title</a>

    <a role="button" class="navbar-burger" aria-label="menu"
    aria-expanded="false" data-target="navbarBasicExample" data_action="page#toggleMenu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu"><div class="navbar-start"><a href="/" class="navbar-item">Home</a></div>
</nav>

Instance Method Summary collapse

Constructor Details

#initialize(brand: nil, navbar_start: nil, navbar_end: nil, **opts) {|optional| ... } ⇒ NavbarComponent

Returns a new instance of NavbarComponent.

Parameters:

  • opts (Hash) —

    to generate content

Options Hash (**opts):

  • :brand (String) —

    navbar brand content

  • :navbar_start (String) —

    optionally navbar-start content

  • :navbar_end (String) —

    optionally navbar-end content

  • :* (String) —

    each other key going as tag option, default is class: ‘navbar’, aria_label: ‘main navigation’, aria_role: ‘navigation’

Yields:

  • (optional) —

    navbar content



51
52
53
54
55
56
 
# File 'app/components/bulmacomp/navbar_component.rb', line 51

def initialize(brand: nil, navbar_start: nil, navbar_end: nil, **opts)
  @brand = brand
  @navbar_start = tag.div navbar_start, class: "navbar-start" if navbar_start.present?
  @navbar_end = tag.div navbar_end, class: "navbar-end" if navbar_end.present?
  @opts = { class: "navbar", aria: { role: "navigation", label: "main navigation" } }.merge(opts)
end

Instance Method Details

#call ⇒ String

Returns html_safe navbar.

Returns:

  • (String) —

    html_safe navbar



59
60
61
 
# File 'app/components/bulmacomp/navbar_component.rb', line 59

def call
  tag.nav safe_join([ navbar_brand, navbar_menu ]), **@opts
end

#navbar_brand ⇒ String

Returns html_safe navbar-brand tag.

Returns:

  • (String) —

    html_safe navbar-brand tag



64
65
66
67
68
69
 
# File 'app/components/bulmacomp/navbar_component.rb', line 64

def navbar_brand
  return if @brand.blank?

  tag.div safe_join([ link_to(@brand, root_path, data_turbo_frame: "yield", class: "navbar-item"), navbar_burger ]),
          class: "navbar-brand"
end

#navbar_burger ⇒ String

Returns html_safe navbar-burger link.

Returns:

  • (String) —

    html_safe navbar-burger link



77
78
79
80
81
82
 
# File 'app/components/bulmacomp/navbar_component.rb', line 77

def navbar_burger
  aria = { expanded: "false", label: "menu" }
  data = { action: "click->page#toggleMenu" }
  role = "button"
  tag.a tag.span(aria_hidden: true) * 3, class: "navbar-burger", aria: aria, data: data, role: role
end

#navbar_menu ⇒ String

Returns html_safe navbar-menu tag.

Returns:

  • (String) —

    html_safe navbar-menu tag



72
73
74
 
# File 'app/components/bulmacomp/navbar_component.rb', line 72

def navbar_menu
  tag.div(safe_join([ @navbar_start, content, @navbar_end ]), class: "navbar-menu", data: { page_target: "menu" })
end