ResponsiveNavbarWithIcons

Info Generate Packages

This Ruby code defines a class named `NavbarWithIconAtStartAndEndComponent` that inherits from `ApplicationComponent`. The class contains a method named `template` which constructs a navigation bar (navbar) with a specific layout and styling. The navigation bar consists of three segments:

1. The left segment ("flex-none") contains a button with an icon represented by an SVG, which appears to be a menu icon (three horizontal lines).
2. The central segment ("flex-1") displays the text "daisyUI" within a button, indicating the navbar might be styled using daisyUI, a popular design framework.
3. The right segment ("flex-none") also contains a button with an icon represented by an SVG, which this time appears to be a more actions icon (three dots representing more options).

The navbar is styled with a base color ("bg-base-100") and includes buttons that are styled to be square and ghost-like, meaning they likely have a minimal or outline-style appearance. The SVG icons within the buttons use classes to set their size and color ("inline-block w-5 h-5 stroke-current"), ensuring they visually integrate with the navbar's overall design. This component is likely part of a larger web application where it serves the purpose of providing a user interface element for navigation and possibly some quick actions or options.

# frozen_string_literal: true

class NavbarWithIconAtStartAndEndComponent < ApplicationComponent
  def template
    div(class: "navbar bg-base-100") do
      div(class: "flex-none") do
        button(class: "btn btn-square btn-ghost") do
          svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "inline-block w-5 h-5 stroke-current") do |svg|
            svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M4 6h16M4 12h16M4 18h16")
          end
        end
      end
      div(class: "flex-1") do
        a(class: "btn btn-ghost text-xl") { "daisyUI" }
      end
      div(class: "flex-none") do
        button(class: "btn btn-square btn-ghost") do
          svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "inline-block w-5 h-5 stroke-current") do |svg|
            svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z")
          end
        end
      end
    end
  end
end

Try a prompt