How to use Sinatra to highlight navigation menu when on current page?

Question

I am having trouble calling the css to indicate the current page that will allow a color tab to show when a page is clicked. I know the "current-menu-item" class works because when you do:

<li id="menu-item" class="current-menu-item">
 <a href="/about-us">About Us</a>
</li>

You are able to see the properties associated with the task. I don't know what else to try and I am looking for insight on what I might be doing wrong.

This is my main.rb file

require 'bundler/setup'
require 'rubygems'
require 'sinatra'
require 'sinatra/activerecord'
require 'sinatra/flash'
require 'sinatra/reloader' if development?
require './config/environments'
require 'pathname'
require 'uri'


require './routes/init'
require  './helpers/init'
require  './models/init'

get '/' do
 erb :"index.html"
end

get '/about-us' do
 erb :"about_us.html"
end

get '/services' do
 erb :"services.html"  
end

get '/sign-up' do
 erb :"sign_up.html"
end

init.rb

require_relative 'user.rb'

helper1.rb

helpers do

  def active_page?(path='')
    request.path_info =='/'+path ? 'active_page': nil
  end
end

layout.erb

            <div class="menu-main-menu-container">
              <ul id="menu-main-menu" class="menu">
                <li id="menu-item" class="menu-item">
                  <a href="/">Home</a>
                   </li>
                <li id="menu-item" class="menu-item">
                <a href="/services">Services</a>
                </li>
                <li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page?  %>" >
                 <a href="/about-us"> About Us </a>
                </li>
                 <li id="menu-item" class="menu-item "><a href="/sign-up">Sign Up</a></li>

            </ul>
          </div>

Answer 1

two things, first:

you want to display the string, "current-menu-item" and not the object current-menu-item if the conditional is true, so you want to move the quotes

change:

<li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page?  %>" >

to:

<li id="menu-item" class=<%= "current-menu-item" if '/about-us' == active_page? %>>

second:

the conditional and helper method are not used correctly

the helper would be used best if it returned true or false change the helper method to the following:

def active_page?(path='')
  request.path_info == '/' + path
end

then back to the layout:

<li id="menu-item" class=<%= "current-menu-item" if active_page?("about-us") %>>

logically, this will accomplish what you are trying to do.