x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<turbo-frame id="lui-sidebar" target="lui-main-layout" data-controller="sidebar"> <aside class="lui-sidebar"> <div class="lui-sidebar__item-list"> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item lui-sidebar__item--active " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> <div id="this-is-example_looposui-sidebar-v1-singleitem" class="w-full" data-action="mouseleave->sidebar#hide mouseenter->sidebar#show"> <a data-action="mouseover->drawer#hide" data-turbo-action="advance" href="some_path"> <div class="lui-sidebar__item " style=""> <icon class="lui-sidebar-item__icon fa-regular fa-diagram-cells"></icon> <div class="lui-sidebar__item__short-title"> <p class="lui-sidebar__item__label">This is Example</p> </div> </div> </a></div> </div> </aside></turbo-frame>No Usage documentation to display.
1
2
3
4
5
config = LooposUi::Sidebar::Configuration.new.tap do |c| c.items = n_items.times.map { example_menu_item } c.items.first[:active] = trueendrender(::LooposUi::Sidebar.new(config: config))No notes provided.
| Param | Description | Input |
|---|---|---|
|
The number of items to display in the sidebar |
|
Sidebar
The Sidebar component can be configured using a Sidebar::Configuration object.
Currently there are three types of sidebar items:
Sidebar::Item- (private) The base class for all sidebar items.Sidebar::SingleItem- A single item with an icon and a title that opens a new page.Sidebar::DrawerItem- A single item with an icon and a title that opens a drawer with more items.Sidebar::Divider- A divider between items. Does not inherit fromSidebar::Item.
Item properties
Following are the properties available for the **Sidebar**::SingleItem and Sidebar::DrawerItem components:
Common properties (Single and Drawer Items)
| Key | Default | Description |
|---|---|---|
title |
nil |
The title of the sidebar item and of the drawer component. Also accepts callable. |
short_title |
nil |
The title of the sidebar item. Takes priority over title. Also accepts callable. |
icon |
nil |
The icon to be displayed next to the title. Expects FontAwesome classes. eg: fa-regular fa-house or just a symbol eg: :house |
image |
nil |
Displayed instead of the icon, taking precedence. Will be resized to fit. Expects a path to a rails asset, or an URI to an image. eg: fa-regular fa-house. |
active |
false |
Boolean or any callable to set the active state. the lambda will be executed in the context of the Sidebar::Item instance. currently you can use any Rails URL helper methods inside the block as is if you have your own helpers you want to use, call them on the helpers proxy eg: -> { helpers.my_custom_helper(...) }. |
visible |
true |
Controls if the component is rendered to the page. Accepts boolean or callable, like the active attribute. |
counter |
nil |
If present and positive, will create a Counter next to the short_title. Accepts a number of a callable. Callable will be evaluated in the context of the Item ViewComponent. |
disabled |
false |
Controls if the Icon is clickable. Expects a boolean value. |
tooltip_title |
nil |
Optional tooltip to show on hover. If disabled is true, will default to "Disabled". |
color |
nil |
Overrides the icon and title color. The set color is not the accent color, it's fixed. Disables color change on hover. Expects hexadecimal value, or a registered symbol. Available symbols: :impact (#40A77F). Also accepts callable. |
bg_color |
nil |
Expects hexadecimal value or accepts callable. |
path |
"#" |
Target location URL. Accepts boolean or callable. |
When active is not set, it will be determined by the current URL.
DrawerItem properties
| Key | Default | Description |
|---|---|---|
description |
nil |
Text that should appear under the main title. |
menu_items |
nil |
An array of Hash. Accepts title, path, visible, active, and disabled. These properties work the same was as the ones mentioned above. |
Configuration
The sidebar can be configured in an initializer file, usually in config/initializers/loopos_ui.rb.
Each sidebar item is initialized with a hash of properties, or a symbol.
This is done by the factory method Sidebar::Item.from_hash, where it guesses the type of the item based on the properties provided.
If the value passed in a symbol with the value :divider, it will create a Divider item.
If the menu_items property is present, it will create a DrawerItem, otherwise a SingleItem.
You can override this by passing the type property.
This way, the factory method will camelize the value and try to instantiate
the class with the same name: LooposUi::Sidebar::#{type}.
Following is an example configuration to get you started:
# config/initializers/loopos_ui.rbLooposUi.configure do |config| #... config.sidebar do |sidebar| sidebar.items = [ { title: "The Home Page of your application", short_title: "Home" # Will expand to "fa-regular fa-house" icon: :house, # image: "https://cataas.com/cat", # image: 'loopos-icon.png', active: true, path: "?clicked_button=title", # path: "https://google.com", # path: -> { user.admin? ? "page 1" : "page 2" }, }, { title: "Services", icon: "fa-regular fa-cubes", menu_items: [ { title: "Active", active: true }, { title: "Hover me" }, { title: "Disabled", disabled: -> { !user.admin? } # disabled: true }, ] }, :divider, # {type: :divider}, # equivalent to the above { title: "Impact", image: 'loopos-icon.png', color: :impact # color: "#40A77F" }, ] endend