I just added this extension in my fresh Flarum install. It went perfectly and I'm 100% happy. Thanks!

24 days later

rafaucau How can I put a link to create a new discussion with the + icon in the center in the mobile bar?

      a month later
      a month later

      rafaucau hi!

      We use Mobile Tab 1.4.3
      Since we moved to another server it is not working correctly

      • Language is wrong.
      • At the Home button it shows the Text: Private Messages

      Any idea how to fix this?

          2 months later

          Can i eddit MobileTab.tsx in the
          htdoc/vendor/acpl/mobile-tab/js/src/forum/components
          to add or remove items insted of creating a new extension? please help me

          // External dependencies
import type { Children, Vnode } from 'mithril';
import app from 'flarum/forum/app';
import type { ComponentAttrs } from 'flarum/common/Component';
import Component from 'flarum/common/Component';
import listItems from 'flarum/common/helpers/listItems';
import ItemList from 'flarum/common/utils/ItemList';
import LinkButton from 'flarum/common/components/LinkButton';
import Button from 'flarum/common/components/Button';
import LogInModal from 'flarum/forum/components/LogInModal';

// Internal dependencies
import MobileTabItem from './MobileTabItem';
import MobileTabSessionDropdown from './MobileTabSessionDropdown';

export default class MobileTab extends Component {
  view(vnode: Vnode<ComponentAttrs, this>): Children {
    return (
      <nav className="MobileTab">
        <ul className="MobileTab-items">{listItems(this.items().toArray())}</ul>
      </nav>
    );
  }

  items(): ItemList<Children> {
    const items = new ItemList<Children>();

items.add('home', <MobileTabItem route="/" icon="fas fa-home" label={app.translator.trans('acpl-mobile-tab.forum.home')} />, 100);

if ('v17development-flarum-blog' in flarum.extensions) {
  items.add(
    'events',
    <MobileTabItem route={app.route('blog')} icon="fas fa-calander" label={app.translator.trans('acpl-mobile-tab.forum.all_discussions')} />,
    90
  );
} else if ('askvortsov-categories' in flarum.extensions) {
  items.add(
    'categories',
    <MobileTabItem route={app.route('categories')} icon="fas fa-th-list" label={app.translator.trans('acpl-mobile-tab.forum.categories')} />,
    90
  );
} else if ('flarum-tags' in flarum.extensions) {
  items.add(
    'tags',
    <MobileTabItem route={app.route('tags')} icon="fas fa-tags" label={app.translator.trans('acpl-mobile-tab.forum.tags')} />,
    90
  );
}

if (app.session.user) {
  const unread = app.session.user.unreadNotificationCount();
  // The default Flarum component opens as a dropdown on mobile if the drawer is not open
  items.add(
    'notifications',
    <LinkButton
      href={app.route('notifications')}
      icon="fas fa-bell"
      title={app.translator.trans('acpl-mobile-tab.forum.notifications')}
      className="Dropdown NotificationsDropdown"
    >
      {unread ? <span className="NotificationsDropdown-unread">{unread}</span> : ''}
      {app.translator.trans('acpl-mobile-tab.forum.notifications')}
    </LinkButton>,
    80
  );

  items.add('session', <MobileTabSessionDropdown />, 70);
} else {
  items.add(
    'logIn',
    <Button icon="fas fa-user" className="Button Button--link" onclick={() => app.modal.show(LogInModal, {})}>
      {app.translator.trans('acpl-mobile-tab.forum.log_in')}
    </Button>,
    70
  );
}

return items;
  }
}

          i have made the changes and uploaded the files but no changes are seen

          or if there is any other way to do it please tell me

            ritheshnayak
            I recommend reading https://github.com/android-com-pl/mobile-tab?tab=readme-ov-file#extending. The best approach is to create your own extension to modify Mobile Tab.
            However, if you insist on directly modifying the code, you need to compile it after making changes. Run npm i && npm build in the js folder. Keep in mind that modifying files in the vendor folder is not recommended as your changes may be overwritten during updates. If you really want to modify the source code, it's better to fork the repository, but you'll have to maintain your own version of the extension.
            In conclusion, creating your own extension as described in the "Extending" section is the safest and most future-proof way to customize Mobile Tab.

              8 days later

              Hi, thanks for the great extension. Can I change the icons of the standard bar via custom css-style in the admin panel?

                Capybara

                Good question.
                Hopefully we can.

                It'd be quite nice if we could also customize the mobile nav bar's pop-up tabs & links therein too.

                  Is it possible to add a custom navigation bar feature that allows admins to customize the location of the navigation bar and customize each function button of the navigation bar themselves?

                    xiaoxiaobai5724

                    😃Geezuz cripes, that is a brilliant idea!
                    (*I'm assuming you're meaning more than just the mobile nav tab alone...)

                    I think it'd be hugely advantageous for us all to have an extension available that could optionally enable full customizability of the entire primary navigation bar-(both for desktop, tablet and mobile layouts)

                    🤔...tbh I vaguely recall mentioning a similar idea recently, although it was merely suggesting someone consider developing a Flarum version of CustomizeXF's 'Top Navigation' add-on.

                      TeamF

                      Are you meaning a page footer created in the Flarum ACP 'Custom Footer HTML'?

                      Because if so, I found the same thing.

                      My current/temporary solution has been adding ×3 <br>'s below the footer html codes, thus moving everything inside the footer upwards and now slightly above the mobile nav bar.
                      (😄probably looks sh#tty as on bigger screens though)

                          User31 haha lol what a workaround 😃 I will try

                          User31 probably looks sh#tty as on bigger screens though

                          on bigger screens you do not have mobile-tab

                                TeamF On larger screens (e.g. tablets), Flarum will recognize as a PC UA, while the Mobile Tab extension will only appear under Phone UA, and you can only modify the extension or make your screen smaller in some way.