Dropdown menu within a menu in NavBar for Bootstrap - bootstrap-5

I am trying to create a dropdown of sub-links in a Navbar dropdown menu. Here is my current progress. I am not able to introduce the toggle button and proper toggle mechanism. When I press on the テンプレート管理, the entire dropdown menu disappeared, and I have to click the navbar menu again to see the list. The expected result is in the screenshot, not sure if Bootstrap has such similar component to use.
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<div class="dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 0.5rem 0">
<%= inline_svg_tag 'setting.svg' %>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-end" aria-labelledby="dropdownMenu2" >
<li class="mt-2" >
<%= link_to hospital_manage_hospitals_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'hospital.svg' %> 医療機関管理
<% end %>
</li>
<li class="mt-2">
<%= link_to hospital_manage_hospital_admin_contacts_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'logout.svg' %> 担当者管理
<% end %>
</li>
<li class="mt-2">
<%= link_to hospital_manage_referral_companies_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'handshake.svg' %> 人材紹介会社管理
<% end %>
</li>
<li class="mt-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" >
<%= link_to hospital_manage_referral_companies_path, class: "dropdown-item" do %>
<%= inline_svg_tag 'template.svg' %> テンプレート管理
<% end %>
</li>
<div class="collapse" id="collapseExample">
<ul>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
スポット求人
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
常勤・非常勤求人
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
勤務票
<% end %>
<%= link_to hospital_manage_spot_job_templates_path, class: "dropdown-item mt-2" do %>
メッセージ
<% end %>
</ul>
</div>
</ul>
</div>

Related

Why doesn't my dropdown menu expand to select the options within?

I'm building a review site using ruby on rails. When I code the drop-down menu, included in the code below, it won't expand.
I know from changing the code that the options are there and work, only the dropdown won't expand.
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<%= link_to "NDLabClub", root_path, class: "navbar-brand" %>
</div>
<ul class="nav navbar-nav">
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to "log In", new_user_session_path %></li>
<% end %>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<% Category.all.each do |category| %>
<li>
<%= link_to category.breed, dogs_path(category: category.breed), class: "link" %>
</li>
<% end %>
</ul>
</li>
<% if user_signed_in? %>
<li><%= link_to "Add Dog", new_dog_path%></li>
<% end %>
</ul>
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>

Getting an error when trying to get login/out and account icons in Rails, how can I fix this?

I'm trying to convert
<!-- application.html.erb -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
into an embedded Ruby HTML file.
The code I have so far is:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-in') %>
Log in
<% end %>
<% end %>
I have the partials set up in application.html.erb:
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
The error I'm getting is:
undefined method `to_sym' for {:span=>"test", :class=>"glyphicon glyphicon-log-out"}:Hash
Did you mean? to_s
to_yaml
to_set
and is highlighting
<%= content_tag(:span => 'test', :class => 'glyphicon glyphicon-log-out') %>
I don't know how to fix it, I've tried using the span class as HTML code but that wasn't working either. The original code works in the application.html.erb file.
I'm assuming it doesn't know how to convert into a symbol as that's part of Bootstrap.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<!--<a class="navbar-brand" href="#">Navbar</a>-->
<%= link_to 'A2Z.ie', home_path, :class => 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li> --> <!-- Dropdown links not working with partials. -->
<li class="nav-item">
<!-- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> -->
<%= link_to 'Home', home_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Locations', locations_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Departments', departments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Employees', employees_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Products', products_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Customers', customers_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Payments', payments_path, :class => 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Orders', orders_path, :class => 'nav-link' %>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<%= render 'devise/menu/registration_items' %>
<%= render 'devise/menu/login_items' %>
</ul>
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="container">
<%= yield %>
</div>
</body>
</html>
https://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag
You need to structure it like this:
<%= content_tag(:span, 'test', :class => 'glyphicon glyphicon-log-out') %>
Or with the new ruby syntax:
<%= content_tag(:span, 'test', class: 'glyphicon glyphicon-log-out') %>
Created images folder
Added the "glyphicon glyphicon-user" and "glyphicon glyphicon-log-in" images from examples on getbootstrap.com, used image link in link_to, e.g.
<%= link_to image_tag("Search.png", :border=>0), destroy_user_session_path, :method => :delete, :class => 'nav-link' %>
UPDATE
You are using Bootstrap 4.3.x which dropped the usage of Glyphicon. You should use FontAwesome like they suggest here. That's why it doesn't work!
You should use this:
content_tag(:span, "test", class: ["glyphicon", "glyphicon-log-out"])
UPDATE 2: RAILS 5 & Font Awesome
Please try this:
Add:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
to your application.html.erb file after the last stylesheet_link_tag tag.
And modify the following file like this:
# app/devise/user/_login_items.html.erb
<% if user_signed_in? %>
<%= link_to destroy_user_session_path, :method => :delete, :class => 'nav-link' do %>
<i class="fas fa-sign-in-alt"></i> Sign out
<% end %>
<% else %>
<%= link_to 'Log in', new_user_session_path, :class => 'nav-link' do %>
<i class="fas fa-sign-out-alt"></i> Log in
<% end %>
<% end %>
I hope this helps!
PS: Never give up!

Best way to show empty lists in Rails

I have been working to follow the best practices in Rails in order to save time in the future.
I am displaying all terms in a view which has more than 0 results.
<% #terms.each do |t| %>
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{t.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, t) %></span>
</div>
</li>
<% end %>
What is the best way to display a different view if the term count is zero? I could do something like a simple if statement in the view doing a count but that seems cluttered. Any suggestions?
How about this:
<% #terms.each do |t| %>
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{t.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, t) %></span>
</div>
</li>
<% end.empty? and begin %>
<li class="media">
<!-- nothing to see -->
</li>
<% end %>
You can also move the code to a partial.
<%= render(:partial => 'terms', :collection => #terms) || 'There are no terms' %>
The partial:
<li class="media">
<div class="media-body">
<div class="media-heading text-semibold"><%= link_to "#{term.name}", authenticated_root_path %></div>
<span class="text-muted"><%= link_to 'Settings', edit_account_term_path(#account, term) %></span>
</div>
</li>
</li>

Rails - Inserting select elements from controller in partial

(Very new to rails and bootstrap) I'm working on a project in which I want to insert elements into an html accordion, 10 elements to be exact. Only 3 of the elements are collapsable. I've read the layouts and rendering part of the Rails documentation but I'm still very confused as to how to do it especially in having to assign the collapsable class to only 3 elements. Any advice is helpful, thanks in advance.
x.HTML.erb
<h4>
<a href="#">
<li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
</a>
</h4>
<% category.subcategories.each do |cat| %>
<li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>
<% end %>
Partial
<h4>
<a href="#">
<li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
</a>
</h4>
<% category.subcategories.each do |cat| %>
<li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>
<% end %>
The HTML accordion structure I want to use:
<div class="accordion" id="accordion2">
<div class="accordion-group">
<h4>
Angulos
</h4>
<h4>
Soleras
</h4>
<h4>
Semiflechas
</h4>
<h4>
Redondos
</h4>
<div class="accordion-heading">
<h4>
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">Cuadrados</a>
</h4>
</div>
<div id="collapseOne" class="accordion-body collapse in">
Cuadrados Normales
Cuadrados Retorcidos
</div>
<h4>
Canal
</h4>
<h4>
Vigas IPR
</h4>
<h4>
Vigas IPS
</h4>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<h4>
<a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">Placas</a>
</h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
Placa de Rollo<br>
Placa de Grado
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<h4>
<a class="accordion-toggle" data-toggle="collapse" href="#collapseThree">Laminas</a>
</h4>
</div>
<div id="collapseThree" class="accordion-body collapse">
Laminas Calientes<br>
Laminas Frias
Laminas Antiderrapantes
</div>
</div>
</div>
If I understand your question correctly, then you want to use partials to generate the HTML you posted. Here's a suggestion.
I don't think you need an .accordion-group around each set that you want to be collapsable. You can just put everything in one.
Here's the outermost ERB template.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<%= #categories.each do |category| %>
<% if category.subcategories.any? %>
<%= render partial: "category_with_sub", locals: {category: category} %>
<% else %>
<%= render partial: "category", locals: {category: category} %>
<% end %>
<% end %>
</div>
</div>
Partial _category_with_sub.html.erb
<div class="accordion-heading">
<h4>
<a href="#">
<li><%= link_to category.name, catalogo_path(cat_id: category.id), class: "accordion-toggle", "data-toggle" => "collapse", remote: true %></li>
</a>
</h4>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<% category.subcategories.each do |cat| %>
<li><%= link_to cat.name, catalogo_path(cat_id: cat.id), class: "accordion-inner", remote: true %></li>
<% end %>
</div>
Partial _category.html.erb
<h4>
<a href="#">
<li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
</a>
</h4>
One final suggestion. It looks like you are using an old version of bootstrap. You might want to consider upgrading to the latest version.
UPDATE
Edited categories to be #categories
Assuming your controller looks something like this.
class CategoriesController < ApplicationController
def index # or whatever action you want
#categories = Category.all # or whatever query you want to use
end
end

twitter bootstrap navbar collapse on my rails app

I don't seem able to get navbar collapse to work on my rails app
application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme available - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme available!", guidelines_path, :class => 'brand' %>
<% end %>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List guidelines by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Hospital", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<li> <%= link_to "My additions", profiles_show_path(id: current_user.profile_name) %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
<li class="nav pull-right">
<%= form_tag guidelines_path, :class => 'navbar-search pull-right', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
<%= yield %>
</div>
</body>
<script src="/assets/js/bootstrap-dropdown.js"></script>
</html>
in my application.js
$(".collapse").collapse()
I'm not using the bootstrap gem, I just added bootstrap manually. I'm not sure if it's an issue with the plugin requirement or how to solve this.
Thanks
you need add
<script src="/assets/js/bootstrap-dropdown.js"></script>
at the end of the template
and
$(".collapse").collapse()
is inside of your_scripts.js not in your style.css file

Resources