#app-bar {
   bottom: 0;
   width: 100vw;
   height: 52px;
   background: #fff;
   box-shadow: 0 -2px 4px rgba(0,0,0, .3);
   z-index: 99;
   display: flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
   transition: all .3s ease;
}

#app-bar > * {
   flex-basis: 100%;
   display: none;
}

#app-bar > *.active {
   display: block;
}

#app-bar:not(.active) {
   transform: translateY(55px);
}