dwyl / mvp

📲 simplest version of the @dwyl app
https://mvp.fly.dev
GNU General Public License v2.0
84 stars 2 forks source link

Update navigation links to make svg icon clickable #213

Closed SimonLab closed 1 year ago

SimonLab commented 1 year ago

Only the text of the link is clickable: image

However the button contains the svg icon which I think should be clickable too.

Use do/end notation on the link:

              <%= link to: "/logout", class: "" do %>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-2"
                fill="white"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path d="M22.763,10.232l-4.95-4.95L16.4,6.7,20.7,11H6.617v2H20.7l-4.3,4.3,1.414,1.414,4.95-4.95a2.5,2.5,0,0,0,0-3.536Z" />
                <path d="M10.476,21a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H9.476a1,1,0,0,1,1,1V8.333h2V3a3,3,0,0,0-3-3H3A3,3,0,0,0,0,3V21a3,3,0,0,0,3,3H9.476a3,3,0,0,0,3-3V15.667h-2Z" />
              </svg>
                Logout
              <% end %>

This requires more css flexbox classes as currently the svg is displayed as;

image

However it is now clickable.

I'm not sure we want to display links as button also.

see also the last example on https://hexdocs.pm/phoenix_html/Phoenix.HTML.Link.html#link/2-examples for the syntax

SimonLab commented 1 year ago

Fixed with the following commit: https://github.com/dwyl/mvp/commit/1deaf367995a64f8245abc69e919dc629af63593 However only clicking on the text trigger the link. I'll try to apply the button styles to the link tag itself instead of using a div.

SimonLab commented 1 year ago

Completed with #223

nelsonic commented 1 year ago

Confirmed working. Thanks for doing this @SimonLab 👍