Float Container Configuration Guide

This document explains how to easily configure the float navigation system without having to modify the core implementation files. It also covers how to manage the styling with the included CSS utilities.

Configuration Approach

The navigation system now uses a configuration-driven approach where all navigation items, links, and UI elements are defined in a single centralized configuration file.

Files Overview

• navigation-config.js - Contains all the configurable navigation elements
• config.js - Contains general system configuration settings
• float-ui.js - Implementation that reads from configuration
• css-utils.js - Utilities for managing the navbar CSS styles
• main.js - Entry point and initialization

How to Update Navigation Elements

1. Updating Navigation Links

To update the navigation links (Game Tips, Download App, etc.), edit the navLinks array in navigation-config.js:

navLinks: [
  {
    href: '/new-url',              // Change the URL
    translationKey: 'gameTips',    // Reference to translations.js
    iconClass: 'fa-solid fa-gamepad' // FontAwesome icon class
  },
  // Add or remove items as needed
]

2. Updating Grid Items

To update the grid items (Fortune Wheel, VIP Program, etc.), edit the gridItems array:

gridItems: [
  {
    href: 'https://example.com',
    imgSrc: '/path/to/image.png',
    text: 'Display Text',
    translationKey: 'translationKey',
    target: '_self'
  },
  // Add or remove items as needed
]

3. Updating Dropdown Menus

To update dropdown menus (Follow Us, etc.), edit the dropdownMenus array:

dropdownMenus: [
  {
    translationKey: 'menuTitle',
    iconClass: 'fa-solid fa-users',
    subItems: [
      {
        href: 'https://example.com',
        translationKey: 'subItemText',
        iconClass: 'fa-brands fa-example',
        target: '_blank'
      },
      // Add or remove sub-items as needed
    ]
  }
]

4. Updating Logo and Partnership Logo

To update the logo or partnership logo:

logo: {
  src: '/path/to/new-logo.png',
  alt: 'Logo Alt Text'
},

partnershipLogo: {
  href: 'https://partner-site.com',
  imgSrc: '/path/to/partner-logo.png',
  imgAlt: 'Partner Logo Alt Text'
}

Programmatically Updating Configuration

You can also update the configuration programmatically using the exported function:

import { updateNavigationConfig } from './float-ui.js';

// Update specific parts of the navigation
updateNavigationConfig({
  navLinks: [
    // New set of navigation links
  ],
  logo: {
    src: '/path/to/new-logo.png'
  }
});

Managing CSS Styles

The system includes built-in CSS management utilities that allow you to control the styling of the navbar.

Enabling/Disabling CSS Injection

In config.js, you can control whether the CSS is automatically injected:

features: {
  enabled: true,
  // ...
  injectCSS: true  // Set to false to disable CSS injection
}

CSS Utility Functions

You can also manipulate the CSS programmatically:

import { injectNavbarCSS, removeNavbarCSS, toggleNavbarCSS, updateNavbarCSS } from './css-utils.js';

// Inject the default CSS
injectNavbarCSS();

// Remove the CSS
removeNavbarCSS();

// Toggle CSS based on a condition
toggleNavbarCSS(true); // Enable
toggleNavbarCSS(false); // Disable

// Update with custom CSS
updateNavbarCSS(`
  /* Your custom CSS here */
  .sidenav {
    background-color: #333;
    color: white;
  }
`);

Translation Keys

All text elements use translation keys that reference the translation system. To add or update translations:

1. Add the translation key to navigation-config.js
2. Make sure the corresponding keys exist in the translations.js file

Adding New Navigation Elements Dynamically

You can also add new navigation links or dropdown menus dynamically after initialization:

import { addNavLink, addDropdownMenu } from './float-ui.js';

// Add a new navigation link
addNavLink({
  href: '/new-page',
  translationKey: 'newPageName',
  iconClass: 'fa-solid fa-star'
});

// Add a new dropdown menu
addDropdownMenu({
  translationKey: 'newDropdown',
  iconClass: 'fa-solid fa-list',
  subItems: [
    // Array of sub-items
  ]
});