Mobile Tab Component

A Flarum extension. Adds a bottom tab on mobile.

Installation

Install with composer:

composer require acpl/mobile-tab

Updating

composer update acpl/mobile-tab
php flarum cache:clear

Extending

You can add, modify, and delete items in the mobile tab using your own extension.
Read: https://docs.flarum.org/extend/extending-extensions/

1. Install acpl/mobile-tab as your extension's composer dependency or add it as an optional dependency in your composer.json.
2. Add acpl-mobile-tab to your extension's webpack.config.js to ensure proper bundling:

   const config = require("flarum-webpack-config");
   
   module.exports = config({
     useExtensions: ["acpl-mobile-tab"],
   });

3. You can now import and use mobile tab components in your extension. Here are some examples of how to modify the mobile tab:

   import { components } from "@acpl-mobile-tab";
   import { extend } from "flarum/common/extend";
   
   const { MobileTab, MobileTabItem } = components;
   
   export default () => {
     // Extend the items method of MobileTab prototype
     extend(MobileTab.prototype, "items", (items) => {
       // Add new item
       items.add(
         "following",
         <MobileTabItem
           href={app.route("following")}
           icon="fas fa-star"
           label={app.translator.trans("my-ext.forum.my-item")}
         />,
         90,
       );
   
       // Add new item using custom HTML
       items.add("my-item", <div>...This is my custom item</div>, 70);
   
       // Remove item
       items.remove("home");
     });
   };

If you are using TypeScript, add the following path to your tsconfig.json to enable type hints for the mobile tab components in your code editor:

{
  "extends": "flarum-tsconfig",
  "compilerOptions": {
    "paths": {
      "@acpl-mobile-tab": [
        "./vendor/acpl/mobile-tab/js/dist-typings/index.d.ts"
      ]
    }
  }
}

Links

• Packagist
• GitHub
• Discuss