如何在 ruby on Rails 中构建带有侧栏的导航栏

Question

在上面的应用程序中，我有一个顶部导航栏和一个侧栏。当用户单击顶部导航栏中的销售选项卡时，会将他们定向到包含侧边栏的销售页面，导航栏中的所有其他页面不包含侧边栏。当用户单击侧边栏上的选项卡之一时，它应该在侧边栏右侧显示一些内容。我遇到的问题是我不确定如何在 ruby on Rails 中构建它。

我目前的销售控制器中有一个索引页面，其中包含侧边栏

sellcontroller.rb

class SellController < ApplicationController
  
  def index
  end
end

index.html.erb

<div class="container-fluid">
    <div class="row flex-nowrap " >
            <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 float-left position-sticky">
                <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
                    <a> My Items<a/>
                    <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Sale</a>
                        </li>
                    
                        <li>
                            <a href="#" class="nav-link px-0 align-middle">
                                <i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Sold</span></a>
                        </li>
                        
                    </ul>
                    
                    
                </div>
            </div>
            <div class="col py-3">
                **content area**
        
            </div>
    </div>
 </div>


 
  

我也有销售和已售出的部分

_sale.html.erb

<div class="container-fluid">
   
    <p>Sale content</p>  
    
</div>

_sold.html.erb

<div class="container-fluid">
   
    <p>Sold content</p>  
    
</div>

我当前的计划是使用 sell_helper.rb 文件中的逻辑根据侧边栏中单击的选项卡来呈现适当的内容，但我觉得应该有更好的方法来做到这一点。

我还希望根据单击侧栏中的选项卡来更改 URL，例如 - localhost:3000/sell/sale。但是，如果我继续使用这种方法，情况就不会如此，因为它显示 localhost:3000/sell/index 因为部分内容在技术上嵌套在索引页面中。

我想过更改销售方式并出售为常规 .html.erb 文件而不是部分文件，但我不知道如何在其周围安装侧边栏组件。

Answer 1

您想要的是每个链接的完整模板，每个模板将呈现共享侧边栏部分及其内容。您可以修复路线中的网址，还可以为新链接添加额外路线，然后将其添加到共享侧边栏。

Rails.application.routes.draw do
  get "sell/sale", to: "sell#sale"
  get "sell/sold", to: "sell#sold"

  # # or if you want to get fancy to do the same
  # scope path: :sell, controller: :sell, as: :sell do
  #   get :sale
  #   get :sold
  # end
end

# app/controllers/sell_controller.rb

class SellController < ApplicationController
end

# app/views/sell/sale.html.erb

<div class="flex">
  <%= render "sell/sidebar" %>
  <div> sale content </div>
</div>

# app/views/sell/sold.html.erb

<div class="flex">
  <%= render "sell/sidebar" %>
  <div> sold content </div>
</div>

# app/views/sell/_sidebar.html.erb

<% is_active = ->(name) { action_name == name } %>

<aside class="flex flex-col">
  <%= link_to "sale", sell_sale_path, class: {"active": is_active.("sale")} %>
  <%= link_to "sold", sell_sold_path, class: {"active": is_active.("sold")} %>
</aside>