-
Notifications
You must be signed in to change notification settings - Fork 0
Add Sidebar component #89
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
6c5e4ee
Demo flowbite-components 0.2.1
koppen 3064557
Add Sidebar component with Item subcomponent
koppen b3216ac
Render the sidebar items on their own
koppen 7e1185a
Clarify that we render Sidebar::Item components
koppen 94cf21d
Update changelog
koppen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module Flowbite | ||
| # Renders a fixed-position sidebar container. | ||
| # | ||
| # Use {Flowbite::Sidebar} as the outer shell and | ||
| # {Flowbite::Sidebar::Navigation} inside it to render the list of | ||
| # {Flowbite::Sidebar::Item}s. | ||
| # | ||
| # @example Usage | ||
| # <%= render(Flowbite::Sidebar.new) do %> | ||
| # <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %> | ||
| # <% nav.with_item do %> | ||
| # <%= render(Flowbite::Sidebar::Item.new(href: "/dashboard")) { "Dashboard" } %> | ||
| # <% end %> | ||
| # <% end %> | ||
| # <% end %> | ||
| # | ||
| # @see https://flowbite.com/docs/components/sidebar/ | ||
| # @lookbook_embed SidebarPreview | ||
| class Sidebar < ViewComponent::Base | ||
| class << self | ||
| def classes | ||
| [ | ||
| "fixed", "top-0", "left-0", "z-40", "w-64", "h-screen", | ||
| "transition-transform", "-translate-x-full", "sm:translate-x-0" | ||
| ] | ||
| end | ||
| end | ||
|
|
||
| # @param class [Array<String>] Additional CSS classes for the sidebar | ||
| # container. | ||
| # @param options [Hash] Additional HTML options for the sidebar container. | ||
| def initialize(class: nil, **options) | ||
| super() | ||
| @class = Array.wrap(binding.local_variable_get(:class)) | ||
| @options = options | ||
| end | ||
|
|
||
| def call | ||
| content_tag(:aside, aside_options) do | ||
| content_tag(:div, class: wrapper_classes) do | ||
| content | ||
| end | ||
| end | ||
| end | ||
|
|
||
| private | ||
|
|
||
| def aside_classes | ||
| self.class.classes + @class | ||
| end | ||
|
|
||
| def aside_options | ||
| {class: aside_classes, "aria-label": "Sidebar"}.merge(@options) | ||
| end | ||
|
|
||
| def wrapper_classes | ||
| ["h-full", "px-3", "py-4", "overflow-y-auto", "bg-neutral-primary-soft"] | ||
| end | ||
| end | ||
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module Flowbite | ||
| class Sidebar | ||
| # Renders a sidebar navigation item. | ||
| # | ||
| # Each item renders as a list item containing a link. Optionally, an icon | ||
| # can be provided using the +icon+ slot, which will be displayed before the | ||
| # label text. | ||
| # | ||
| # @example Basic item | ||
| # <%= render Flowbite::Sidebar::Item.new(href: "/dashboard") { "Dashboard" } %> | ||
| # | ||
| # @example Item with icon | ||
| # <%= render(Flowbite::Sidebar::Item.new(href: "/dashboard")) do |item| %> | ||
| # <% item.with_icon do %> | ||
| # <svg class="w-5 h-5" ...>...</svg> | ||
| # <% end %> | ||
| # Dashboard | ||
| # <% end %> | ||
| # | ||
| # @viewcomponent_slot icon An optional icon displayed before the label text. | ||
| class Item < ViewComponent::Base | ||
| renders_one :icon | ||
|
|
||
| attr_reader :href, :options | ||
|
|
||
| class << self | ||
| def classes | ||
| [ | ||
| "flex", "items-center", "px-2", "py-1.5", "text-body", | ||
| "rounded-base", "hover:bg-neutral-tertiary", "hover:text-fg-brand", "group" | ||
| ] | ||
| end | ||
| end | ||
|
|
||
| # @param class [Array<String>] Additional CSS classes for the link element. | ||
| # @param href [String] The URL for the navigation link. | ||
| # @param options [Hash] Additional HTML attributes for the link element. | ||
| def initialize(href:, class: nil, **options) | ||
| super() | ||
| @class = Array.wrap(binding.local_variable_get(:class)) | ||
| @href = href | ||
| @options = options | ||
| end | ||
|
|
||
| def call | ||
| content_tag(:li) do | ||
| link_options = {class: link_classes}.merge(options) | ||
| content_tag(:a, href: href, **link_options) do | ||
| concat(icon) if icon? | ||
| concat(content_tag(:span, content, class: label_classes)) | ||
| end | ||
| end | ||
| end | ||
|
|
||
| private | ||
|
|
||
| def label_classes | ||
| "ms-3" if icon? | ||
| end | ||
|
|
||
| def link_classes | ||
| self.class.classes + @class | ||
| end | ||
| end | ||
| end | ||
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| module Flowbite | ||
| class Sidebar | ||
| # Renders the navigation list for a sidebar. | ||
| # | ||
| # This component renders a +<ul>+ with navigation items. It can be used | ||
| # inside a {Flowbite::Sidebar} for a fixed-position sidebar, or standalone | ||
| # in any layout that needs sidebar-style navigation. | ||
| # | ||
| # @example Inside a Sidebar | ||
| # <%= render(Flowbite::Sidebar.new) do %> | ||
| # <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %> | ||
| # <% nav.with_item do %> | ||
| # <%= render(Flowbite::Sidebar::Item.new(href: "/")) { "Home" } %> | ||
| # <% end %> | ||
| # <% end %> | ||
| # <% end %> | ||
| # | ||
| # @example Standalone | ||
| # <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %> | ||
| # <% nav.with_item do %> | ||
| # <%= render(Flowbite::Sidebar::Item.new(href: "/")) { "Home" } %> | ||
| # <% end %> | ||
| # <% end %> | ||
| class Navigation < ViewComponent::Base | ||
| renders_many :items | ||
|
|
||
| class << self | ||
| def classes | ||
| ["space-y-2", "font-medium"] | ||
| end | ||
| end | ||
|
|
||
| # @param class [Array<String>] Additional CSS classes for the list element. | ||
| # @param options [Hash] Additional HTML options for the list element. | ||
| def initialize(class: nil, **options) | ||
| super() | ||
| @class = Array.wrap(binding.local_variable_get(:class)) | ||
| @options = options | ||
| end | ||
|
|
||
| def call | ||
| content_tag(:ul, list_options) do | ||
| items.each do |item| | ||
| concat(item) | ||
| end | ||
| end | ||
| end | ||
|
|
||
| private | ||
|
|
||
| def list_classes | ||
| self.class.classes + @class | ||
| end | ||
|
|
||
| def list_options | ||
| {class: list_classes}.merge(@options) | ||
| end | ||
| end | ||
| end | ||
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.