Class: RUI::Navigation::Sidebar

Inherits:
Base
  • Object
show all
Defined in:
lib/rui/navigation/sidebar.rb

Instance Method Summary collapse

Methods inherited from Base

#initialize

Constructor Details

This class inherits a constructor from RUI::Base

Instance Method Details



17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
# File 'lib/rui/navigation/sidebar.rb', line 17

def icon_link(icon:, href:, selected: false)
  if selected
    state_classes = "border-blue-700 text-zinc-700 **:[svg]:stroke-blue-700 font-semibold"
    selected = "true"
  else
    state_classes = "border-transparent text-zinc-500 hover:border-zinc-200 hover:text-zinc-700 **:[svg]:stroke-zinc-400 hover:**:[svg]:stroke-zinc-700"
    selected = "false"
  end

  a(href:, class: "inline-flex items-center gap-2 py-1 #{state_classes}", data: { selected: selected }) do
    div(class: "size-5 md:size-4") do
      render RUI::Icon.new(icon)
    end
    span(class: "text-lg md:text-base") { yield }
  end
end

#section_heading ⇒ Object 



11
12
13
14
15
 
# File 'lib/rui/navigation/sidebar.rb', line 11

def section_heading
  p(class: "pt-8 pb-4 mt-6 text-base md:text-sm font-semibold uppercase text-zinc-400") do
    yield
  end
end

#text_link(href:, selected: false) ⇒ Object 



34
35
36
37
38
39
40
41
42
43
44
 
# File 'lib/rui/navigation/sidebar.rb', line 34

def text_link(href:, selected: false)
  if selected
    state_classes = "border-blue-700 text-zinc-700 font-semibold"
  else
    state_classes = "border-transparent text-zinc-400 hover:border-zinc-200 hover:text-zinc-700"
  end

  a(href:, class: "text-zinc-400 px-5 py-1 border-l-3 #{state_classes}") do
    span(class: "text-lg md:text-base") { yield }
  end
end

#view_template ⇒ Object 



4
5
6
7
8
9
 
# File 'lib/rui/navigation/sidebar.rb', line 4

def view_template
  nav(id: "side-nav", class: "lg:w-72 p-10 pb-36 hidden lg:flex flex-col bg-white z-50 lg:z-auto fixed w-screen md:w-auto h-screen lg:max-h-full overflow-y-auto", data: { "navigation-target": "sidebar" }) do
    yield
  end
  button(class: "lg:hidden hidden bg-black/75 fixed w-screen h-screen", data: { navigation_target: "curtain", action: "navigation#toggle" })
end