Discourse Tab Bar for Mobile

theme-component
116

I really like this idea :heart_eyes: So just played with this a little bit. I believe there is a much better way to make it but for now it works on my site pretty good. :slight_smile:

I use the Big Header - Little Header component </head> code for template to do this.

Unfortunately on iPhone there is limitation because the footer-nav is completely hide the Discourse Tab Bar. So i hide that.

I updated this code!
Now i just share the code here (not sure this is merge able):

Place this on mobile </head> section

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

Place this on mobile css section:

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
	bottom: 49px;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .1s ease-out;
  }
  .posts-filtered-notice {
	transition: all .1s ease-out;
	bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
	bottom: -49px;
	transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
	bottom: 0;
	transition: all .2s ease-in;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .2s ease-in;
  }
  .posts-filtered-notice {
	transition: all .2s ease-in;
	bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

Demo

16 Likes