Implement Drawer

[supermacro]

Implement the Drawer component

https://ant.design/components/drawer/

[effe-megna]

Hi supermacro,

I will try to implement the Drawer component in the next days. For now I'm starting from setup the route and some basic documentation into the showcase.

I'm new to Elm, i will start to work on it officially the next week, i want to say that in 15 minutes or less, i was able to understand the functions that you wrote, really impressive how clear is it.

Nice job!!

[Orasund]

I believe a drawer is not a good first contribution, because you will need to solve two seperate problems first:

• Shade - no matter how many drawers will be displayed, you only ever want to display at most one shade (a shade handles the darkening of the screen)
• internal state - how do you want to handle internal state in Elm? There are two approaches: components and reusable views.

I recomment implementing the collapse component first and to then figure out a good way how to handle internal state. From there one can prototype a shade (which is essentially a global state). Once both are done, the drawer is just the combination of the two.

I've done a implementation of a drawer in orasund/elm-ui-widgets. The solution i went with was to have the shade be controlled by the layout widget. Any widget that wants to trigger a shade would need to be also included into the layout.

This package has also got a layout widget, so it should be possible to take the same approach.

[supermacro]

Hey @effe-megna,

This is great that you're finding Elm approachable! I would say that I agree with @Orasund that this might not be a good first contribution as there are a lot of moving parts.

This might be a good first contribution if you knew Elm well already.

I would recommend one of two things:

• Implement missing functionality on an existing components
  • https://elm-antd.netlify.app/components/button
    • Compare to: https://ant.design/components/button/
  • https://elm-antd.netlify.app/components/typography
    • Compare to: https://ant.design/components/typography/

OR

• Find a simpler component to implement that doesn't have state, such as:
  • https://ant.design/components/divider/
  • https://ant.design/components/affix/
  • Lots of things under "Data Display" heading
    • Example: https://ant.design/components/empty/

---

Regardless, I am available to answer any questions as you're learning! And also join the Slack community as there are a lot of really helpful people there to answer questions.

[effe-megna]

HI,

thanks for reply, i've made a pull request with a basic Drawer component, let me know what you think #27 .

Meanwhile i accept the suggestion and move to some component that doesn't have state.