logo

ResponsiveNavbarWithSearchAndUserDropdown

InfoGeneratePackages

This Ruby code defines a custom component named `NavbarWithSearchInputAndDropdownComponent` that inherits from `ApplicationComponent`. The purpose of this component is to generate HTML for a navigation bar with specific features. Here are the functionalities and details:

1. **Navigation Bar Layout**: The component creates a navigation bar (`navbar`) with a light base color (`bg-base-100`). This layout consists of two main sections aligned horizontally.

2. **Brand or Logo Section**: In the first section (`flex-1`), there is a placeholder for a brand or logo represented by the text "daisyUI", stylized as an extra-large ghost button (`btn btn-ghost text-xl`).

3. **Interactive Elements**: The second section (`flex-none gap-2`) contains two interactive components:
a. **Search Input**: A text field (`input`) for searching, with placeholder text "Search". It is designed to be responsive, indicated by its width adjusting from `w-24` to wider (`md:w-auto`) on medium screen sizes and above.
b. **Dropdown Menu**: A dropdown menu triggered by a button styled as a circular avatar (`btn-circle avatar`). Within the dropdown, there are menu items such as "Profile" (with a "New" badge), "Settings", and "Logout". The dropdown is intended to appear at the end of the navigation bar (`dropdown-end`), and is designed with a minimal modern look featuring a box shadow (`shadow`), rounded corners (`rounded-box`), and a base light background color.

4. **Avatar Image**: The button that triggers the dropdown contains an avatar image, indicating personalization or user representation. The image has alt text specifying it as a "Tailwind CSS Navbar component" and uses a stock photo URL as its source.

Overall, the component utilizes the Tailwind CSS and DaisyUI frameworks to create a modern, responsive, and interactive navigation bar suitable for web applications seeking a clean and functional user interface.

# frozen_string_literal: true

class NavbarWithSearchInputAndDropdownComponent < ApplicationComponent
  def template
    div(class: "navbar bg-base-100") do
      div(class: "flex-1") do
        a(class: "btn btn-ghost text-xl") { "daisyUI" }
      end
      div(class: "flex-none gap-2") do
        div(class: "form-control") do
          input(type: "text", placeholder: "Search", class: "input input-bordered w-24 md:w-auto")
        end
        div(class: "dropdown dropdown-end") do
          div(tabindex: "0", role: "button", class: "btn btn-ghost btn-circle avatar") do
            div(class: "w-10 rounded-full") do
              img(alt: "Tailwind CSS Navbar component", src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg")
            end
          end
          ul(tabindex: "0", class: "mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52") do
            li do
              a(class: "justify-between") do
                plain "Profile"
                span(class: "badge") { "New" }
              end
            end
            li { a { "Settings" } }
            li { a { "Logout" } }
          end
        end
      end
    end
  end
end

Children