Mobile Responsive Navigation Ui Tab | No Internal Reload required
Hello, I am RameshDada (However this is not my real name😆) It is much more better than Normal Ui Tabs, Still not convinced? Lets Compare
RameshDada's Responsive Navigation
- Doesn't requires Page reload to navigate.
- Changes to chat icon in discussion, and easier to reply, Changes to plus + icon at index page for new post, It uses Buit-in Modals with some JavaScript.
- Speedy as NoReload required, Easy to navigate and increases user interaction.
- Only for Logged-In users.
Normal Ui Tab Navigation
- Requires reload to navigate
- Only Start New Discussion icon even when you are inside a discussion.
- Speedy but requires reload, and however results in laggy loading in PWA's
- Shown for guests also and Flarum is well-Optimised for guests they don't needs notifications, settings as they are guest and If they want they can simply login and removing some icons from this menu will look unprofessional.
Requirements
- FoF Links : Discuss | Source | Install : composer require fof/links
- logged-in Class in Body : Discuss | Source | Install : composer require zerosonesfun/flarum-member
- Flarum Ads : Discuss | Source | Install : composer require malago/flarum-ads
But Why? (As we will add this code in navigational header, You can also add this in Custom Header but again for better results and speedy navigation follow me)
Installation
Step 1 : Enable FOF Links and Make 3 links in sequence like this
- Tags Page : yourdomain/tags
- Add the sub link inside tags | Notifications : yourdomain/notifications
- Add the sub link inside tags | User Settings : yourdomain/settings
REMEMBER : Make sure to check (tick) Internal Link and Do in this sequence only.
Step 2 : Copy the CSS class for your links like the below given examples
- Tags = .item-link4 .LinksButton
- Notifications = .item-link4-5 .LinksButton
- User Settings = .item-link4-6 .LinksButton
Step 3 : Replace the classes in given JavaScript NOTE : Do not remove 'paste yourclass here'
<script>
function notifierM() {
document.querySelector('.item-link4-5 .LinksButton').click();
}
function newDiscussRamesh() {
document.querySelector('.IndexPage-newDiscussion').click();
}
function gharchalo() {
document.querySelector('#home-link').click();
}
function replykaro() {
document.querySelector('.PostStream-item .ReplyPlaceholder').click();
}
function tagsde() {
document.querySelector('.item-link4 .LinksButton').click();
}
function settingsWala() {
document.querySelector('.item-link4-6 .LinksButton').click();
}</script>
Note : Do not touch replykaro, gharchalo, and newDicussRamesh, You just have to replace this Links Classes with yours.
After replacing all the classes, Copy this JS and add this in Custom Header.
Step 4 : Hide Fof Link that we made as It will look unprofessional make sure to change the given li class with your's.
li.item-link4 {
display: none !important;
}
Add this code in Custom CSS and save it.
Step 5 Make sure that you have enabled .logged-in Class extension and paste the below code to Custom CSS.
@media screen and (max-width: 767px) {
.RAMmenu {
display: none;
z-index: 9;
bottom: 0;
position: fixed;
flex-grow: 1;
height: 44px;
overflow: hidden;
width: 100%;
background-color: @primary-color;
}
.menu-item {
display: flex;
border-left: 2px solid white;
flex-direction: column;
background: none !important;
justify-content: center;
padding-top: 4px;
align-items: center;
flex-grow: 1;
cursor: pointer;
text-decoration: none;
&:focus,
&:hover {
outline: none;
.rameshtab {
color: #d4d4d4;
}
}
}
.NayaShruKar {
display: none;
}
.hotelkhel {
display: none;
}
.rameshtab {
display: block;
margin-bottom: 4px;
font-size: 21px;
transition: 0.25s ease;
color: white;
}
.gharkhel {
border-left: none !important;
}
.App--index {
.NayaShruKar {
display: flex !important;
}
}
.App--discussion{
.hotelkhel {
display: flex !important;
}
}
}
@media screen and (min-width: 750px) {
.RAMmenu {
display: none;
}
.menu-item {
display: none;
}
.rameshtab {
display: none;
}
}
.logged-in .RAMmenu {
display: flex !important;
}
Step 6 : Enable Ads extension and add the below code in Ad position under navigational header box.
<div>
<nav class="RAMmenu" style="display:none;">
<a onclick="gharchalo()" class="menu-item gharkhel">
<i class="fas fa-home rameshtab"></i>
</a>
<a onclick="tagsde()" class="menu-item">
<i class="fas fa-tags rameshtab"></i>
</a>
<a onclick="newDiscussRamesh()" class="menu-item NayaShruKar">
<i class="fas fa-plus rameshtab"></i>
</a>
<a onclick="replykaro()" class="menu-item hotelkhel">
<i class="fas fa-comment-dots rameshtab"></i>
</a>
<a onclick="settingsWala()" class="menu-item">
<i class="fas fa-user-shield rameshtab"></i>
</a>
<a onclick="notifierM()" class="menu-item">
<i class="fas fa-bell rameshtab"></i>
</a>
</nav>
</div>
Step 7 : Enjoy your forum is now well optimized for mobile devices,
If you like it then share your thoughts here, Or if you are having some problems then also let me know here.
Screenshots
On Home Page and on Tags page it shows 5 icons containing start new discussion icon which is invisible on pages that contains discussion or something else.
On Discussion page it shows 5 icons again containing reply icon at middle,
When you are on some page like Notifications it shows 4 icons and new discussion and reply icons are invisible.
Conclusion
- This extension loads all the links internally so no reload required while navigating to home/tags/settings/notifications.
- This extension even uses built-In reply and new discussion MODALS, so instant response no wait.
- This extension makes easier for user to reply as there is no such sticky button like desktop to reply in flarum mobile version and It also helps user to create new discussion instantly as for a new user searching a new discussion icon is hard and this extension contains + plus icons which makes it easier to create new disucssion.
Why don't you make an Extension for it?
As I don't know PHP properly and Never made this, It will be great if you can make this as extension all you need is input classNames from settings page for Fof Links and If you know how to achieve internal links no reload then you can also simply remove the dependencies/requirements of other extensions from Mobile Navigation Tab for Flarum.
Note Add the HTML only in Flarum ADS extension navigational header as It requires App--index class to work properly.
