- Dashboard
- Images
- Files
- Games
- Books
- Notifications
- Settings
- Profile

How it works

Inside each `<a>` element there's a hidden (using transform and opacity) `<span>` containing the text. Like this:

    a span {
     position: absolute;
     left: calc(100% + 1.5rem); //Moves it all the way to the right

     opacity: 0;
     transform: scale(0);
     transform-origin: center left;
     transition: .15s ease;
    }

On hover or focus this span becomes visible through a transition of both transform and opacity. Like this:

    a:hover span, a:focus span {
     opacity: 1;
     transform: scale(1);
    }

The `<span>` also has a psuedo-element in the shape of a rectangle, but rotated 45 degrees to make it look like a triangle. See the code for more details.