Layouts 📐

[robinmetral]

Style admin panel with this

[robinmetral]

Got the panel (todo: rename Admin into Panel) to toggle open and closed with a dynamic styled-components display attribute. (182d0a8).

Now I need to animate the opening and closing of the panel.
I don't think it's possible with display, I could switch to this hack: (source)

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

A better animation would be to slide from the right. Two solutions:

1. Either I'd need to set a width:0; and transition into 50% width
   Edit: the problem with transitioning width is that the text wraps and unwraps instead of just sliding
2. Or place the panel outside of the screen to the right (like in this example).