Nexis Documentation | Technical Guide

Overview

Introduction to Nexis

Nexis is a premium, high-performance Admin Dashboard template built for modern SaaS applications. It leverages the power of Vanilla JS for speed, Tailwind CSS for styling, and a modular architecture for scalability.

Zero Dependencies

No Node_modules hell. Just pure, clean code that runs instantly.

Global i18n Engine

Built-in support for multiple languages (EN, FR, AR) with RTL support.

Project Structure

root/

Config/
├── assets/
│   ├── css/
│   │   └── main.css       // Core Variables & Global Styles
│   ├── js/
│   │   └── app.js         // The Brain: All logic lives here
├── index.html             // Core Hub (Dashboard)
├── login.html             // Authentication Page
├── profile.html           // User Management
└── ...                    // Other modules (api.html, messages.html, etc.)

Authentication Logic

IMPORTANT

Nexis includes a simulated authentication system using localStorage.
To view the dashboard, use the following default credentials:

Username nexis

Password nexis

Modifying Logic

Locate the App.login function in assets/js/app.js to connect a real backend.

const login = async (username, password) => {
    // Replace this check with your API call
    if (username === 'nexis' && password === 'nexis') {
        localStorage.setItem('app_user', 'logged_in');
        return true;
    }
    throw new Error('Invalid credentials');
};

Colors & Branding

Nexis is built on Tailwind CSS. You can customize the look by modifying the config script in the <head> of every HTML file, or by editing assets/css/main.css for global variables.

1. Updating Primary Color

Change the `primary` color object in the Tailwind config script.

colors: {
    primary: { 
        500: '#6366f1', // Base (Indigo)
        600: '#4f46e5'  // Hover
    } 
}

2. Changing the Logo

The Sidebar logo is text-based with a gradient. You can replace it with an `<img>` tag in `index.html` (and all other pages).

<a href="index.html" class="...">Nexis<span>Pro</span></a>

Adding New Pages

To maintain scalability and the navigation active state, follow these steps to add a new page (e.g., `reports.html`).

Duplicate a template: Copy `index.html` or `files.html` and rename it to `reports.html`.

Add sidebar link: Add the link to the `<nav>` section in your new file AND all existing files.

<a href="reports.html" class="nav-link ...">
    <i class="fa-solid fa-chart-line"></i> 
    <span data-i18n="reports">Reports</span>
</a>

Register in App.js: Update the `pageMap` object in `setupNavigationState` to ensure the sidebar highlights correctly.
```
const pageMap = {
    'index.html': 'dashboard',
    'reports.html': 'reports' // Add this line mapping filename to i18n key
};
```

Language Engine (i18n)

Nexis uses a client-side dictionary for instant translation. All text elements with `data-i18n="key"` are automatically translated.

Adding a Translation

Edit the `TRANSLATIONS` object in `assets/js/app.js`.

const TRANSLATIONS = {
    "en": {
        "dashboard": "Dashboard",
        "new_key": "New Feature Text" 
    },
    "fr": {
        "dashboard": "Tableau de bord",
        "new_key": "Texte nouvelle fonctionnalité"
    }
    // ... Arabic
};

Note: For correct Arabic rendering, the engine automatically switches font-family to 'Cairo' and sets `dir="rtl"`.

Components Library

1. Glass Card

<div class="glass p-6 rounded-2xl">
    <h3>Title</h3>
    <p>Content goes here...</p>
</div>

Glass Effect

This is a live preview of the glass class.

2. Application Toast

Trigger a native Nexis toast notification from anywhere in your JS.

// Type: 'success', 'error', 'info'
Interactions.showToast("Changes saved successfully!", "success");