menu
White logo

Bottom Navigation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

.tabs-wrapper.w-100.bottom-nav
  %ul.nav.classic-tabs.blue-grey.darken-3.d-flex.justify-content-center{ role: :tablist }
    %li.nav-item.m-0
      %a.nav-link.waves-light.d-flex.flex-column.py-1.grey-text.active{ href: "#panel1",
        data: { toggle: :tab }, role: :tab }
        %i.material-icons.mb-1 textsms
        Proof View
    %li.nav-item
      %a.nav-link.waves-light.d-flex.flex-column.py-1.grey-text{ href: "#panel2",
        data: { toggle: :tab }, role: :tab }
        %i.material-icons.mb-1 list
        List View
    %li.nav-item
      %a.nav-link.waves-light.d-flex.flex-column.py-1.grey-text{ href: "#panel3",
        data: { toggle: :tab }, role: :tab }
        %i.material-icons.mb-1 attach_money
        Overages
    %li.nav-item
      %a.nav-link.waves-light.d-flex.flex-column.py-1.grey-text{ href: "#panel3",
        data: { toggle: :tab }, role: :tab }
        %i.material-icons.mb-1 payment
        Make Payment

.tab-content
  #panel1.tab-pane.fade.in.show.active
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
      odit magnam minima, soluta doloribus reiciendis molestiae placeat
      unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
      ratione porro voluptate odit minima.
  #panel2.tab-pane.fade
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
      odit magnam minima, soluta doloribus reiciendis molestiae placeat
      unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
      ratione porro voluptate odit minima.
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
      odit magnam minima, soluta doloribus reiciendis molestiae placeat
      unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
      ratione porro voluptate odit minima.
  #panel3.tab-pane.fade
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
      odit magnam minima, soluta doloribus reiciendis molestiae placeat
      unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
      ratione porro voluptate odit minima.
  #panel4.tab-pane.fade
    %p
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
      odit magnam minima, soluta doloribus reiciendis molestiae placeat
      unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
      ratione porro voluptate odit minima.