Tag a from erb to Haml

Question

I have next code in haml, dispalying error: Showing /home/ubuntu/workspace/app/views/layouts/application.html.haml where line #24 raised: Illegal nesting: content can't be both given on the same line as %a and nested within it.

line 24 is = current_user.name What is wrong with haml code?

!!!
%html
  %head
    %title Chat
    = stylesheet_link_tag
    = javascript_include_tag
    = csrf_meta_tags

  %body
    %div.navbar.navbar-default.navbar-static-top
      .container   
        .navbar-header
          = link_to 'Chat', root_path, class: 'navbar-brand'

      .navbar
        %ul.nav.navbar-nav
          %li
            = link_to 'Home', root_path

        %ul.nav.navbar-nav.pull-right
          - if user_signed_in?
            %li.dropdown
              %a.dropdown-toggle {"data-toggle": "dropdown", href: "#"}
                = current_user.name    
              %ul.dropdown-menu {role: "menu">
                %li
                  = link_to 'Profile', edit_user_registration_path
                %li 
                  = link_to 'Log out', destroy_user_session_path, method: :delete
          - else
            %li
              = link_to 'Log In', new_user_session_path
            %li
              = link_to 'Sign Up', new_user_registration_path


    .container
      = flash.each do |key, value|
        %div.alert.alert-"#{key}"
          = value

      = yield

  %footer  
    %p Copyright © #{Time.now.year}

Answer 1

Try the following:

%a.dropdown-toggle{data-toggle: "dropdown", href: "#"} = current_user.name

Alternatively, you should be invoking the link_to helper of Rails to get this working well:

= link_to current_user.name, "#", data: {toggle: "dropdown"}, class: "dropdown-toggle"

---

given on the same line as %a and nested within it

The error basically means that HAML is treating your space in between your .dropdown-toggle and { as the "content" of the link tag.

When you then declare the = current_user on the line below, it is confused about which one to show in the "content" of the link

---

In regards your errors, here's how I'd format the page:

!!!
%html
  %head
    %title Chat
    = stylesheet_link_tag
    = javascript_include_tag
    = csrf_meta_tags

  %body
    .navbar.navbar-default.navbar-static-top
      .container   
        .navbar-header
          = link_to 'Chat', root_path, class: 'navbar-brand'

      .navbar
        %ul.nav.navbar-nav
           %li= link_to 'Home', root_path

        %ul.nav.navbar-nav.pull-right
          - if user_signed_in?
            %li.dropdown
              = link_to current_user.name, "#", data: {toggle: "dropdown"}, class: "dropdown-toggle"
              %ul.dropdown-menu{data-role: "menu"}
                 %li= link_to 'Profile', edit_user_registration_path
                 %li= link_to 'Log out', destroy_user_session_path, method: :delete
          - else
            %li= link_to 'Log In', new_user_session_path
            %li= link_to 'Sign Up', new_user_registration_path


    .container
      = flash.each do |key, value|
        .alert.alert-"#{key}" = value
      = yield

  %footer  
    %p Copyright © #{Time.now.year}

Some pointers:

1. You don't need to declare %div - just use a .css_class and it will automatically create a div

2. HAML is basically like a giant markdown script - it treats every nuance in the code differently. This is especially true with inline vs nested content.

If you have a single line, you don't need to nest the content:

.alert.alert-"#{key}"= value

If you have multi-line, you need to keep your initial code free of spaces:

%ul.dropdown-menu{data-role: "menu"}
   = #this can be nested

Answer 2

change Line 23 to

%a.dropdown-toggle{"data-toggle": "dropdown", href: "#"}