Make sidebar responsive - Githubissues

supermacro / elm-antd

The official Ant Design UI Kit for Elm

MIT License

58 stars 11 forks source link

Make sidebar responsive #7

Open supermacro opened 4 years ago

supermacro commented 4 years ago

the and Sider component (known as Layout.Sidebar in elm-antd) does not have a specification on how to respond to changing browser widths, and I think that makes sense.

The way it should be done is by registering a subscription for browser width resizing and then calling Layout.sidebarWidth with a new value at that point.

https://github.com/greptail/elm-antd/blob/1bf22831662268d6fd6d6fed07e78f3da36e32f8/showcase/src/elm/Router.elm#L269

Desired outcome:

Adjust sidebar width based on the breakpoints specified by Antd
If the viewport width is < 768px then replace menu Layout.Sider + Menu with a Drawer that can be toggled open with a button as displayed below.
- The icon is already implemented (Ant.Icons.menuOutlined)

Screen Shot 2020-05-03 at 9 08 00 PM

supermacro commented 4 years ago

This issue is blocked by https://github.com/greptail/elm-antd/issues/9