https://github.com/android-com-pl/mobile-tab
Flarum extension. Adds a bottom tab on mobile
https://github.com/android-com-pl/mobile-tab
flarum flarum-extension hacktoberfest navigation
Last synced: 4 months ago
JSON representation
Flarum extension. Adds a bottom tab on mobile
- Host: GitHub
- URL: https://github.com/android-com-pl/mobile-tab
- Owner: android-com-pl
- License: mit
- Created: 2021-07-18T04:41:32.000Z (almost 5 years ago)
- Default Branch: 2.x
- Last Pushed: 2026-02-01T00:08:48.000Z (5 months ago)
- Last Synced: 2026-02-01T08:07:54.092Z (5 months ago)
- Topics: flarum, flarum-extension, hacktoberfest, navigation
- Language: TypeScript
- Homepage: https://discuss.flarum.org/d/28216-mobile-tab
- Size: 3.48 MB
- Stars: 10
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Mobile Tab Component
 [](https://packagist.org/packages/acpl/mobile-tab) [](https://packagist.org/packages/acpl/mobile-tab/stats) [](https://github.com/android-com-pl/mobile-tab?sponsor=1)
A [Flarum](https://flarum.org) extension. Adds a bottom tab on mobile.
## Installation
Install with composer:
```sh
composer require acpl/mobile-tab
```
## Updating
```sh
composer update acpl/mobile-tab
php flarum migrate
php flarum cache:clear
```
## Extending
> [!IMPORTANT]
> These instructions are for Flarum 2.0.
> For Flarum 1.x documentation, please refer to:
> [Flarum 1.x Guide](https://github.com/android-com-pl/mobile-tab/tree/1.x?tab=readme-ov-file#extending)
You can add, modify, and delete items in the mobile tab using your own extension.
Read: [https://docs.flarum.org/2.x/extend/extending-extensions](https://docs.flarum.org/2.x/extend/extending-extensions/)
1. Install `acpl/mobile-tab` as your extension's composer dependency or add it as an [optional dependency](https://docs.flarum.org/2.x/extend/extending-extensions/#optional-dependencies) in your `composer.json`.
2. In the `tsconfig.json` file add `"ext:acpl/mobile-tab/*": ["../vendor/acpl/mobile-tab/js/dist-typings/*"]` to the `compilerOptions.paths` object.
3. You can now import and use the registry classes to modify the mobile tab.
### Example
Create `extendMobile.ts` in your extension's `js/common` directory:
```tsx
import MobileTabItemsRegistry from "ext:acpl/mobile-tab/common/MobileTabItemsRegistry";
import app from "flarum/common/app";
import { extend } from "flarum/common/extend";
export default () => {
extend(MobileTabItemsRegistry.prototype, "items", (items) => {
// Add a simple link item
items.add("following", {
icon: "fas fa-star",
label: app.translator.trans("my-ext.forum.index.following_label"),
href: () => app.route("following"),
canView: () => !!app.session.user,
source: "extension",
});
// Add an item that we plan to turn into an interactive component on the forum frontend
items.add("my-interactive-item", {
icon: "fas fa-rocket",
label: app.translator.trans("my-ext.forum.my_interactive_item_label"),
source: "extension",
});
});
};
```
Use this file in both admin and forum. Example for the admin side:
```tsx
import app from "flarum/admin/app";
import extendMobileTab from "../common/extendMobileTab";
app.initializers.add("my-ext/mobile-tab-example", () => {
extendMobileTab();
// ... other initializers
});
```
To make an item interactive on the forum, assign a component using the `forumComponent` property.
> [!NOTE]
> Interactive components should be registered in `MobileTabItemsRegistryForum` because they import `from flarum/forum/*`.
> Registering them in the common registry would break the admin panel.
```tsx
import MobileTabItemsRegistryForum from "ext:acpl/mobile-tab/forum/data/MobileTabItemsRegistryForum";
import { extend } from "flarum/common/extend";
import app from "flarum/forum/app";
import extendMobileTab from "../common/extendMobileTab";
import MyCustomTabItem from "./components/MyCustomTabItem";
app.initializers.add("my-ext/mobile-tab-example", () => {
extendMobileTab();
extend(MobileTabItemsRegistryForum.prototype, "items", (items) => {
// Get the item defined in common and enhance it for the forum
const myItem = items.get("my-interactive-item");
items.setContent("my-interactive-item", {
...myItem, // Keep icon, label, and other shared properties
forumComponent: MyCustomTabItem, // Add the forum-only interactive component
});
});
// ... other initializers
});
```
```tsx
import MobileTabComponent from "ext:acpl/mobile-tab/common/components/MobileTabComponent";
import Button from "flarum/common/components/Button";
export default class MyCustomTabItem extends MobileTabComponent {
view() {
const { icon, label } = this.attrs.definition;
return (
console.log("clicked")}
>
{label}
);
}
}
```
## Links
- [Packagist](https://packagist.org/packages/acpl/mobile-tab)
- [GitHub](https://github.com/android-com-pl/mobile-tab)
- [Discuss](https://discuss.flarum.org/d/28216-mobile-tab)