Navigation menu featuring unique links for varying pages

Question

Navigation menu featuring unique links for varying pages

This application is built on Ruby on Rails, using Ruby version 2.1.4 and Rails version 4.1.14.

I have a Javascript dropdown menu in the header bar that displays a list of items. However, I'm struggling to figure out how to dynamically change the menu options based on the current page.

For example, the "Item view" page may display a certain set of options, while the "Item Edit" page has a different set of options. The challenge is to have the menu items change dynamically on each page.

The header bar, including the dropdown menu, is a partial that is included in every page before the main content. The menu options themselves need to be dynamic.

My initial approach was to define an array (@menulinks) on each page, specifying the menu items and their respective URLs. For example:

@menulinks = {'Edit' => '/item/edit/', 'Delete' => '/item/delete/' etc etc}

I then intended to pass this array into the UL element that controls the menu in the header bar partial. However, I realized that the links require additional logic, such as calling methods using link_to. For instance, a delete link might look like this:

= link_to "Delete", item_path(@item), method: :delete, data: {confirm: "Are you sure you want to delete this item?"}

My question now is how to properly pass such complex links into the UL element. Is there a way to escape the link part so that Rails can interpret it correctly within the UL?

Alternatively, I wonder if I am overcomplicating the situation and if there is a simpler solution to achieve the dynamic menu options.

javascript ruby-on-rails ruby

Answer 1

Answer №1

If you're looking to customize the menu links in your application, using a `before_filter` and helper methods could be a good approach. You can set up a default menu in your `ApplicationController` and override it in other controllers as needed:

class ApplicationController < ActionController::Base

  before_filter :setup_menu_links

  protected

  def setup_menu_links
    @menu_link_list = :default_menu_links
  end

end

class OtherController < ApplicationController

  protected

  def setup_menu_links
    @menu_link_list = :other_menu_links
  end
end

Define your menu links in helper classes:

class ApplicationHelper
  def default_menu_links
    [
      link_to('First item', ...),
      link_to('Second item', ...)
    ]
  end
end

class OtherHelper
  def other_menu_links
    [
      link_to('Other first', ...),
      link_to('Other second', ...)
    ]
  end

Then, call the appropriate method in your menu partial using `send`:

%ul.dropdown-menu
  - self.send(@menu_link_list).each do |menu_link|
  %li= menu_link

Feel free to adapt and expand upon this idea to suit your specific needs.

Answer 2

If you're looking to customize the menu links in your application, using a `before_filter` and helper methods could be a good approach. You can set up a default menu in your `ApplicationController` and override it in other controllers as needed:

class ApplicationController < ActionController::Base

  before_filter :setup_menu_links

  protected

  def setup_menu_links
    @menu_link_list = :default_menu_links
  end

end

class OtherController < ApplicationController

  protected

  def setup_menu_links
    @menu_link_list = :other_menu_links
  end
end

Define your menu links in helper classes:

class ApplicationHelper
  def default_menu_links
    [
      link_to('First item', ...),
      link_to('Second item', ...)
    ]
  end
end

class OtherHelper
  def other_menu_links
    [
      link_to('Other first', ...),
      link_to('Other second', ...)
    ]
  end

Then, call the appropriate method in your menu partial using `send`:

%ul.dropdown-menu
  - self.send(@menu_link_list).each do |menu_link|
  %li= menu_link

Feel free to adapt and expand upon this idea to suit your specific needs.

Answer 3

Answer №2

I realized I was over-complicating things. Here's one approach (though maybe not the most efficient, any other suggestions?):

First, in the partials for each page, create a local variable for each link:

    del_link = link_to "Delete", item_path(@item), method: :delete, data: {confirm: "Are you sure?"}
    edit_link = link_to "Edit", edit_dashboard_path(@dashboard)

Then, gather these links into an array:

    @menuitems = [del_link, edit_link]

Next, in the haml header with the menu, iterate through the array to display the links in a UL:

    %ul.dropdown-menu
      - @leftmenuitems.each do |link|
        %li= link_to link

It appears to be functioning as expected.

Answer 4

I realized I was over-complicating things. Here's one approach (though maybe not the most efficient, any other suggestions?):

First, in the partials for each page, create a local variable for each link:

    del_link = link_to "Delete", item_path(@item), method: :delete, data: {confirm: "Are you sure?"}
    edit_link = link_to "Edit", edit_dashboard_path(@dashboard)

Then, gather these links into an array:

    @menuitems = [del_link, edit_link]

Next, in the haml header with the menu, iterate through the array to display the links in a UL:

    %ul.dropdown-menu
      - @leftmenuitems.each do |link|
        %li= link_to link

It appears to be functioning as expected.

Navigation menu featuring unique links for varying pages

Answer №1

Answer №2

Similar questions

Dynamically allocate a controller to an element following the Bootstrap process

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

AngularJS text markers

JavaScript - Modify input character prior to appending it to the text area

How can I troubleshoot jQuery not functioning in iOS even though it works on Safari?

Is it possible for two-way binding to function in index.html within Angular 4?

JavaScript loop to target a specific item

Challenges when working with AJAX/jQuery in terms of fetching JSON data and setting dataType

Setting a bookmark feature in HTML using localStorage: A step-by-step guide

Cloning a checkbox using Jquery

Is it possible for the r.js optimizer to generate a fresh index.html file that links to the compiled files

The vacant array suddenly fills up with content once it is accessed

AngularJS checkbox validation requires a minimum of two checkboxes to be selected

Script for converting Fixed Positioned Elements to Static

The value of the variable remains consistent throughout the .each function when using JQuery's .post() method

Making Cross-Origin Requests using jQuery's Ajax function and PHP

Obtain the form value upon submission without the need to reload the page

Deduct a digit from a variable

Ways to assign scores to every response button

The Node-Slack Web API feature chat.delete consistently returns a "channel_not_found" error for any channel, despite the fact that the