Mobile menu
1. What This Page Is For
The Mobile menu page allows administrators to select the layout of the mobile bottom navigation bar displayed to players accessing the lobby on smartphones. This bar houses 5 core navigation shortcuts: Menu, Promotion, Center Action (Login/Register or Deposit/Withdraw), Activity, and Contact.
Choosing the right mobile menu provides a smooth, modern, single-thumb navigation experience customized to your platform's branding.
2. Before You Begin
- Permission Requirements: You must have the 'Mobile menu' permission in your staff role to view and edit mobile navigation layouts. (Users without update permission see the page in read-only mode).
- Things to Prepare:
- Verify your Theme colour settings, as active indicators and radiant glow effects directly inherit your selected site palette.
- Understand the dual-state center button: For guests who have not signed in, the center button prompts Login / Register. Once signed in, it transforms into an animated gold coin for instant Dep/With (Deposit & Withdraw) wallet access.
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title Mobile menu, subtitle, and navigation breadcrumb path (Site look / Mobile menu).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Preview Card (Preview): A simulated phone container (390 px width) rendering the active mobile bar with your real theme colours:
- State Toggle: Player (signed-in state) and Visitor (guest state).
- Language Toggle: Thai and English.
- Layout Selection Grid (Layouts): 4 distinct mobile navigation layout cards with mini-visualizations and an In use indicator.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons.
4. Search and Filters
There is no table search on this page. Instead, 2 preview toggles in the top-right corner of the preview card allow administrators to inspect dynamic states:
| Toggle Option | Selectable Values | Preview Result |
|---|---|---|
| User State | Player / Visitor | - Player: Center button displays an animated gold coin labeled Dep/With. - Visitor: Center button displays an entry arrow icon labeled Login / Register. |
| Language | Thai / English | Toggles button labels across all 5 navigation slots between Thai (เมนู, โปรโมชั่น, ฝาก-ถอน, กิจกรรม, ติดต่อ) and English (Menu, Promotion, Dep/With, Activity, Contact). |
5. Data Table and Layout Cards
4 Available Mobile Navigation Layouts
| ID | Layout Name | Bar Geometry & Styling | Selected Item & Center Button Behavior |
|---|---|---|---|
| 6 | Curved notch (Lobby default) | Bar curves gracefully inward to cradle the central circular coin | Center button floats within the contour notch with label neatly positioned beneath |
| 2 | Floating dock | Rounded frosted glass island floating above screen borders | Selected item rests upon a soft pill of your site's primary gradient |
| 3 | Top line | Edge-to-edge full-width bar | Selected item is crowned by a glowing top-edge accent line; center button is a raised rounded square |
| 4 | Rising bubble | Edge-to-edge bar with elevated bubble animation | Selected item elevates above the bar inside a circular gradient bubble; center button is an outlined ring |
(Note: Legacy layouts 0, 1, and 5 have been modernized and incorporated into these 4 main layouts).
5 Standard Mobile Navigation Buttons
| Slot | Button Name (TH) | Button Name (EN) | Player Action When Tapped |
|---|---|---|---|
| 1 | เมนู | Menu | Opens the main lobby slide-out drawer with game categories and platform shortcuts. |
| 2 | โปรโมชั่น | Promotion | Navigates directly to the promotional offers and bonuses list. |
| 3 (Center) | เข้าสู่ระบบ / สมัคร or ฝาก-ถอน | Login / Register or Dep/With | Prominent center button: opens the login popup if guest, or the financial wallet drawer if signed in. |
| 4 | กิจกรรม | Activity | Opens platform activities such as the lucky wheel, check-in, or turnover missions. |
| 5 | ติดต่อ | Contact | Opens customer support and official contact channels. |
6. Step-by-Step Guide
1. Changing the Mobile Navigation Layout
- Navigate to Site look > Mobile menu from the left navigation menu.
- In the Layouts grid, click your preferred layout among the 4 options.
- Review the phone simulation preview in the card above.
- Toggle between Player and Visitor states to verify the center button appearance.
- Toggle between Thai and English to ensure text fits without truncation.
- Click Save in the bottom action bar.
- A green alert will notify you: "Mobile menu saved". Players will see the new layout upon their next page load.
2. Discarding Changes Before Saving
- If you tested other layouts and wish to revert to the active one, click Cancel in the bottom action bar.
- The selection resets immediately to the layout marked In use.
7. Form Fields and Settings
| Field / Selection | Required? | Description | Example | Constraints |
|---|---|---|---|---|
| Layouts | Required | Choose 1 of the 4 standardized mobile navigation layouts. | Curved notch (Layout 6) | Only 1 layout can be active at a time; applies to all mobile phone viewports. |
8. Popups and Confirmation Modals
1. Version Conflict Dialog
- Triggered When: Another administrator saved mobile menu settings while your session was active.
- What You See: A dedicated modal dialog warning that your local state differs from the latest server version, featuring a Load latest button and a Close button.
- Action Required: Click Load latest to fetch the newest published configuration, select your preferred layout, and save again.
- Result: Prevents concurrent administrators from overwriting each other's settings.
9. Status Badges and Colors
| Badge / Indicator | Color | Meaning | Required Action |
|---|---|---|---|
| In use | Green | The currently published mobile navigation bar on the live site. | No action required if maintaining current layout. |
| Lobby default | Grey | System standard layout recommendation (Curved notch). | Informational tag. |
| White Checkmark | Blue | The layout currently selected in your draft preview. | Click Save to publish. |
| Selection Border | Blue | Highlight ring surrounding the active selection card. | Indicates user focus. |
10. Frequently Asked Questions and Troubleshooting
- Why didn't my mobile phone immediately update after saving?
- Layout changes apply on the next page request. If players have the lobby open, they should refresh the page or restart their browser tab.
- Why is the Save button greyed out and unclickable?
- The Save button is only enabled when you select a layout that is different from the one currently marked In use.
- Why does the center coin rotate only once?
- The Lottie coin animation spins once on entry to catch player attention while conserving battery life and performance on mobile devices.
- Can I customize the icons for Menu, Promotion, Activity, and Contact?
- Yes. All mobile navigation icons can be replaced with custom SVG pictures or animated Lottie files in the Site look > Icons menu.