search

jacobobryant / platypub

A publishing platform built with Biff
MIT License
65 stars 13 forks source link

Use pills instead of dropdown menu for mobile navigation #13

Closed jacobobryant closed 2 years ago

jacobobryant commented 2 years ago

Pills are nice cause you don't have to do an extra tap to make them appear. And if the user is on a tiny screen, they'll wrap. And no need for custom js/hyperscript. Here's some code I just copied from The Sample (need to at least change bg-dark to something else):

image

(defn pills [{:keys [options active]}]
  [:.flex.mx-3.sm:mx-0.overflow-x-auto.whitespace-nowrap
   (for [{:keys [value label href]} options]
     [:a.mr-1.p-2
      {:class (if (= active value)
                "bg-dark rounded text-white"
                "link")
       :href href}
      label])])
jeffp42ker commented 2 years ago

pills

What type of widget do you prefer to toggle dark mode on mobile?

I guess it fits best right-justified on the same line as the menu pills.

jacobobryant commented 2 years ago

sun and moon would be great if that's not too much trouble! I just went with a button originally out of laziness. right-justified sounds good to me.

Might be nice to differentiate the "New site" button from the pills? perhaps make the pills a more neutral color, like the blue used for the two less-important buttons on the send page:

image

jeffp42ker commented 2 years ago

How does this look?

pill-animation

SVG icon source: https://orioniconlibrary.com/icon/sun-and-moon-4452 License No attribution required for personal use - Free SVG & PNG icon For commercial use, credit us ...

jacobobryant commented 2 years ago

Looks good to me!

jacobobryant commented 2 years ago

Closed by #24