Cacher is the code snippet organizer for pro developers

body
  margin 0
  background #131119
  font-family sans-serif

nav
  width 106px
  height 100vh
  box-sizing border-box
  padding 20px 0
  position fixed
  top 0
  left 0
  white-space nowrap
  overflow-X hidden
  overflow-Y hidden
  background #242128
  border-right 12px solid #542088
  transition all .5s
  > span
    display block
    padding 2em
    font-size 14px
    margin 0 0
    color rgba(white, 0)
    font-weight 600
    transition all .5s
  .navitem
    color rgba(0,0,0,0)
    display block
    position relative
    text-decoration none
    font-size 24px
    padding .5em 2em
    transition all .5s
    &:hover
      //background rgba(white, .025)
      color white
      i
        color white
    i
      font-size 32px
      vertical-align middle
      margin-left 50%
      color rgba(white, .5)
      padding 8px
      border 4px solid
      border-radius 100%
      transform translateX(-50%)
      transition all .2s .5s
  &:hover
    width 360px
    overflow-X auto
    overflow-Y auto
    span
      color rgba(white, .5)
      transition all 1s .25s
    .navitem
      color rgba(white, .8)
      i
        margin-left 0
      for n in (1..10)
        &:nth-of-type({n})
          transition all .2s, color 1s (.025s * n + .25s)
          i
            transition all .2s, margin-left .2s (.025s * n + .25s)

nav
  a.navitem[href="#"]
    i.material-icons home
    |Home
  a.navitem[href="#"]
    i.material-icons chrome_reader_mode
    |Articles
  a.navitem[href="#"]
    i.material-icons folder
    |Projects
  span Title
  a.navitem[href="#"]
    i.material-icons movie
    |Videos
  a.navitem[href="#"]
    i.material-icons book
    |Tutorials
  a.navitem[href="#"]
    i.material-icons description
    |Documentation
  a.navitem[href="#"]
    i.material-icons code
    |Github
  span Website
  a.navitem[href="#"]
    i.material-icons settings
    |Settings
  a.navitem[href="#"]
    i.material-icons help
    |Help