Implementing a dynamic menu feature using Ruby on Rails

Question

Implementing a dynamic menu feature using Ruby on Rails

I have created a secondary navigation bar to help users easily navigate through different sections of their account.

DASHBOARD | ACTIVITY | PORTFOLIO | PROJECTS

My goal is to make the current page stand out by making its CSS bold. For example, when a user is on the 'dashboard' page, I want the navigation bar to appear like this:

DASHBOARD | ACTIVITY | PORTFOLIO | PROJECTS

I have tried using code like:

if current_page?(controller: 'users', action: 'edit)
  <span class="bold">DASHBOARD</span>
else
  DASHBOARD
end

However, this code is not working as expected due to the nested partials I am using to generate the views.

For instance, each user can access their own account information, but since they may have multiple projects, I render a call to a partial located in

views/projects/_list_by_owner.html.erb

and pass in

@projects = Project.where(:owner_id => current_user.id)

from the users_controller#show.

Because the view is being generated from the users_controller rather than the projects_controller, it is not recognizing the correct current_page() value.

Do you have any suggestions on how to further explore the controller/action nesting or perhaps a more efficient way to dynamically generate the CSS class?

css ruby-on-rails-3

Answer 1

Answer №1

Here's my approach

Helper function

def highlight_current_path(path)
  "active" if request.url.include?(path)
end

Implement in View

<%= link_to "users", posts_path, class: highlight_current_path(posts_path) %>

UPDATE: Providing context

If you are working on a template and need to generate complex HTML elements or define classes, using helper functions can be useful. It allows you to modify the appearance of content without accessing the database.

To incorporate this functionality, navigate to App >> helpers >> users_helper.rb

Add the following code:

module LocationsHelper
    def highlight_current_path(path)
        "active" if request.url.include?(path)
    end
end

This function will detect when highlight_current_path is invoked and apply the 'active' class to the HTML element if it matches the current path.

You can then style the 'active' class using simple CSS

a.active{
  font-weight:700;
  text-decoration:underline;
}

Answer 2

Here's my approach

Helper function

def highlight_current_path(path)
  "active" if request.url.include?(path)
end

Implement in View

<%= link_to "users", posts_path, class: highlight_current_path(posts_path) %>

UPDATE: Providing context

If you are working on a template and need to generate complex HTML elements or define classes, using helper functions can be useful. It allows you to modify the appearance of content without accessing the database.

To incorporate this functionality, navigate to App >> helpers >> users_helper.rb

Add the following code:

module LocationsHelper
    def highlight_current_path(path)
        "active" if request.url.include?(path)
    end
end

This function will detect when highlight_current_path is invoked and apply the 'active' class to the HTML element if it matches the current path.

You can then style the 'active' class using simple CSS

a.active{
  font-weight:700;
  text-decoration:underline;
}

Implementing a dynamic menu feature using Ruby on Rails

Answer №1

Similar questions

Identifying a change in the source location of an iframe element

Switching the color of NavLink text when onclick occurs

Is it possible to populate an input field without first having to select it in HTML or JavaScript?

React-Accessible-Accordion is not displaying the toggle icon

Struggling to apply size in percentage to several images used as a background

Converting CSS colors from RGBA to hexadecimal format: A step-by-step guide

How can I get my HTML DIVs to automatically move downward instead of upwards?

Display and animate a div when hovered over inside a wrapper element

Words with emphasized border and drop shadow effect

Using jQuery to alter the attributes of a hover class

How CSS can affect the layout of elements on a webpage

jQuery is not active on responsive designs

The preferred size variable for the allocation allotment is malfunctioning

What is the best way to ensure a textarea element fills the entire height using Bootstrap 4?

`Trying to conceal the tr elements on button click proves tricky with jquery`

Reduce / condense text that is overflowing

@SpringBootApplication is unable to retrieve static files

Validation failure in the CSS document - Syntax error

I am experiencing issues with the interpolation of my SASS variables when they are placed into

Adjust the positioning of the share section to take up the entire width on mobile devices, while displaying differently