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
57
 
# File 'app/components/bulmacomp/navbar_component.rb', line 51

def initialize(brand: nil, navbar_start: nil, navbar_end: nil, **opts)
  super
  @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



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

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



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

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



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

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:, data:, role:
end

#navbar_menu ⇒ String

Returns html_safe navbar-menu tag.

Returns:

  • (String) —

    html_safe navbar-menu tag



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

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