# Nalika Admin Template

A dark-design Bootstrap 5 admin dashboard with 48 pages — dashboards, e-commerce, charts, forms, tables, mailbox, editors, calendar, kanban board, and more. Fully modernized with zero jQuery.

Template Info
Author Colorlib
License MIT
HTML Pages 48
Build System None required
Technology Stack
CSS Framework Bootstrap 5.3.8
JavaScript Vanilla JS (no jQuery)
Icons Bootstrap Icons 1.13
Charts ApexCharts 5.3
Font Google Fonts Roboto
Animations AOS 2.3

## Getting Started

1. Unzip the downloaded archive
2. Open the `nalika/` folder
3. Open any `.html` file directly in a browser
4. Edit HTML files and CSS directly — no build step or npm needed

All asset paths are relative to `nalika/`. Third-party libraries load from CDN, so an internet connection is needed for first load (browsers cache them afterward).

## What's Included

3
Dashboard layouts
7
Chart pages
5
E-commerce pages
6
Form pages
6
UI component pages
6
Auth & error pages

## Theme Colors

Nalika uses a dark color scheme throughout:

#152036
Main background
#1b2a47
Sidebar
#ec4445
Accent / hover
#00c292
Success / chart
#ab8ce4
Purple / chart

# Page Catalog

All 48 pages organized by category. Each page uses the shared sidebar layout except auth and error pages, which use a minimal full-screen layout.

### Dashboards 3

Dashboard V.1 Dashboard V.2 Dashboard V.3

Feature ApexCharts, Swiper carousel, counter animations, and sparkline mini-charts.

### Charts 7

Analytics Area Charts Bar Charts Line Charts C3 Charts Rounded Charts Sparkline

Powered by ApexCharts and Chart.js with area, line, bar, donut, radial, heatmap, and sparkline chart types.

### E-Commerce 5

Product List Product Detail Product Edit Shopping Cart Payment

### Forms 6

Basic Forms Advanced Forms Multi Upload Password Meter Image Cropper Dual List Box

Uses Tom Select, noUiSlider, Pickr colorpicker, native HTML5 date/time pickers, Cropper.js, and Dropzone.

### Tables 2

Static Table Data Table

Simple-DataTables 10 with sorting, pagination, and search — no jQuery required.

### Mailbox 3

Inbox Mail View Compose

### UI Components 6

Accordion Alerts Buttons Modals Notifications Tabs

### Blog 2

Blog List Blog Details

### Editors 2

Code Editor WYSIWYG Editor

CodeMirror 5 for code editing, Quill 2 for rich text.

### Apps & Tools 6

Calendar Kanban Board Activity Timeline File Manager PDF Viewer Widgets

Calendar uses FullCalendar 6 with event modals, category filtering, and drag-and-drop. Kanban Board uses SortableJS for drag-and-drop task management.

### Auth & Error 6

Login Register Lock Screen Password Recovery 404 Error 500 Error

These pages use a minimal full-screen layout without the sidebar.

# File Structure

All template files live inside the `nalika/` directory. Third-party libraries load from CDN — no `node_modules` or build tools required.

- nalika/
  - style.css — main theme stylesheet (dark theme + BS5 overrides)
  - *.html (48 pages)
  - css/ — component styles
    - main.css — base/utility styles
    - responsive.css — breakpoints (768, 992, 1169px)
    - nalika-icon.css — custom icon font
    - accordions.css, alerts.css, buttons.css, modals.css, tabs.css
    - form/, colorpicker/ — component-specific styles
  - js/
    - main.js — central vanilla JS init (~746 lines, modular)
  - fonts/ — custom nalika icon font
    - nalika.{svg,ttf,woff}
  - img/ — SVG placeholder images by feature
    - logo/, blog-details/, contact/, product/, new-product/, notification/, cropper/
    - favicon.ico
  - pdf/ — sample PDF for viewer page
    - sample.pdf

## Key Files

`style.css` | Main theme stylesheet — dark color scheme, sidebar, header, cards, layout, Bootstrap 5 dark theme overrides
`js/main.js` | Central init script (~746 lines) — sidebar, sticky header, scroll-to-top, counters, AOS, Swiper, FullCalendar, ApexCharts, analytics dashboard, project dashboard
`css/responsive.css` | Responsive breakpoints at 768px, 992px, 1169px
`css/main.css` | Base and utility styles
`css/nalika-icon.css` | Custom nalika icon font definitions
`index.html` | Primary dashboard — ApexCharts area/line/bar charts, Swiper product carousel, sparkline widgets

## CDN vs. Local Assets

All major libraries load from jsDelivr CDN. Local files are limited to the theme and component styles. The active dependency chain for any page is:

    CDN (cached by browser)
     ├── Bootstrap 5.3.8 CSS + JS
     ├── Bootstrap Icons 1.13.1
     ├── AOS 2.3.4
     ├── SimpleBar 6.2.7
     └── Page-specific: ApexCharts, Swiper, FullCalendar, Simple-DataTables, etc.

    Local files
     ├── style.css          (theme + BS5 dark overrides)
     ├── css/main.css       (base)
     ├── css/responsive.css (breakpoints)
     ├── css/nalika-icon.css (custom icons)
     └── js/main.js         (initialization)

# HTML Structure

All pages follow a consistent two-column layout. Auth and error pages use a minimal full-screen layout instead.

## Standard Page Layout

Every dashboard page uses this structure:

    <!-- Left Sidebar -->
    <div class="left-sidebar-pro">
        <nav id="sidebar">
            <div class="sidebar-header">
                <a href="index.html"><img src="img/logo/logo.png"></a>
            </div>
            <div class="nalika-profile">...</div>
            <div class="left-custom-menu-adm-wrap">
                <ul class="nav nav-tabs" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="#">Dashboard</a>
                        <ul class="submenu-angle">
                            <li><a href="index.html">Dashboard v.1</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="all-content-wrapper">
        <div class="header-advance-area">
            <!-- Top header with search, notifications, profile -->
        </div>
        <div class="breadcome-area">...</div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- Page content here -->
                </div>
            </div>
        </div>

        <div class="footer-copyright-area">...</div>
    </div>

## Grid System (Bootstrap 5)

The template uses Bootstrap 5's grid with `col-*`, `col-sm-*`, `col-md-*`, `col-lg-*`, and `col-xl-*`:

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-12">
                <!-- Half-width column -->
            </div>
            <div class="col-lg-6 col-md-6 col-12">
                <!-- Half-width column -->
            </div>
        </div>
    </div>

## Bootstrap 5 Data Attributes

All interactive components use the `data-bs-*` prefix:

    <!-- Dropdown -->
    <a data-bs-toggle="dropdown">...</a>

    <!-- Modal -->
    <button data-bs-toggle="modal" data-bs-target="#myModal">...</button>

    <!-- Collapse (sidebar submenu) -->
    <a data-bs-toggle="collapse" data-bs-target="#submenu1">...</a>

    <!-- Tooltip -->
    <span data-bs-toggle="tooltip" title="Help text">...</span>

## Sidebar Toggle

The sidebar is 205px wide and collapses to 80px. The toggle button (`#sidebarCollapse`) adds `.active` to `#sidebar` and `.mini-navbar` to `body`. On mobile (<992px), it toggles `.sidebar-mobile-open` on `body` with a backdrop overlay. All handled in `js/main.js` with vanilla JS.

## Minimal Layout (Auth / Error Pages)

Login, register, lock screen, password recovery, 404, and 500 pages use a simpler layout without the sidebar:

    <!-- No sidebar wrapper -->
    <div class="login-content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-5">
                    <!-- Login form card -->
                </div>
            </div>
        </div>
    </div>

## Common Head Template

Every page loads a consistent set of base dependencies:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title | Nalika</title>
        <link rel="shortcut icon" href="img/favicon.ico">

        <!-- Bootstrap 5.3.8 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap Icons 1.13.1 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet">
        <!-- AOS Animations -->
        <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
        <!-- SimpleBar -->
        <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">

        <!-- Theme styles -->
        <link rel="stylesheet" href="css/nalika-icon.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/responsive.css">

        <!-- Page-specific CSS here -->
    </head>

# JavaScript Architecture

All JavaScript is vanilla JS — no jQuery required. The central `js/main.js` file (~746 lines) uses a modular one-function-per-feature pattern.

## Design Principles

- One function per feature — `initSidebar()`, `initStickyHeader()`, `initDashboardCharts()`, etc.
- Guard clauses — every function starts with `if (!el) return` to gracefully skip on pages where the element doesn't exist
- No global state — library instances are scoped within their init function
- Modern APIs — `IntersectionObserver`, `requestAnimationFrame`, `classList`, `querySelectorAll`
- AOS initialized outside DOMContentLoaded — since scripts are at the body bottom, AOS must run immediately

## Function Reference

- initTooltips() Initializes Bootstrap 5 tooltips via JS API
- initPopovers() Initializes Bootstrap 5 popovers via JS API
- initSidebar() Sidebar collapse/expand toggle with mobile backdrop overlay
- initSidebarNav() Submenu accordion, active page highlighting. Replaces metisMenu
- initStickyHeader() Header sticks on scroll using scroll listener
- initScrollToTop() Scroll-to-top button with fade animation
- initCounters() Animated number counters using IntersectionObserver + requestAnimationFrame
- initScrollbars() Custom scrollbar via SimpleBar 6 for sidebar and notification panels
- initAOS() Scroll-reveal animations via AOS 2.3 (fade, slide, zoom)
- initProductCarousel() Product slider using Swiper 12 with responsive breakpoints
- initPriceSlider() Price range slider using noUiSlider 15
- initDropdownBehavior() Prevents header dropdown menus from closing on inner click
- initCalendar() FullCalendar 6 with month/week/day views (used on dashboard widgets)
- initDashboardCharts() ApexCharts area, line, bar, and sparkline charts for Dashboard V.1
- initAnalyticsDashboard() Analytics page charts: audience area, traffic donut, server health radial, response time, error rate bar, activity heatmap
- initProjectDashboard() Project dashboard: radial summary cards, task status stacked bar, sprint burndown line chart
- initProjectCalendar() Mini list-week calendar for project dashboard using FullCalendar 6
- initProjectKanban() Mini kanban board for project dashboard using SortableJS

## Initialization Order

    // AOS must be initialized outside DOMContentLoaded
    // when scripts are loaded at body bottom
    initAOS();

    document.addEventListener('DOMContentLoaded', function () {
        initTooltips();
        initPopovers();
        initSidebar();
        initSidebarNav();
        initStickyHeader();
        initScrollToTop();
        initCounters();
        initScrollbars();
        initProductCarousel();
        initPriceSlider();
        initCalendar();
        initDashboardCharts();
        initAnalyticsDashboard();
        initProjectDashboard();
        initProjectCalendar();
        initProjectKanban();
    });

## Page-Specific Scripts

Some pages include additional inline JavaScript for page-specific functionality:

- calendar.html — enhanced FullCalendar with event modals, category filtering, event creation/deletion (~240 lines)
- kanban-board.html — SortableJS initialization for drag-and-drop task columns
- advance-form-element.html — Tom Select, noUiSlider, Pickr initialization
- data-table.html — Simple-DataTables initialization
- code-editor.html — CodeMirror initialization
- tinymc.html — Quill editor initialization

These scripts appear in `<script>` tags after `js/main.js` at the bottom of each page.

## Script Loading Order

Scripts are loaded at the bottom of every page in this order:

    <!-- 1. Bootstrap 5 Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 2. Core libraries -->
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>

    <!-- 3. Page-specific libraries (only when needed) -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@5.3.6/dist/apexcharts.min.js"></script>

    <!-- 4. Main init script (always last) -->
    <script src="js/main.js"></script>

    <!-- 5. Page-specific inline scripts (optional) -->

# Libraries & Dependencies

All libraries load from jsDelivr CDN. No local vendor files, no `node_modules`, no build step. This section lists every dependency and which pages use it.

## Core Stack (Every Page)

Library | Version | Purpose
--- | --- | ---
Bootstrap | 5.3.8 | CSS framework + JS components (dropdowns, modals, tooltips, collapse)
Bootstrap Icons | 1.13.1 | 2,000+ SVG icons via CSS classes (`bi bi-*`)
AOS | 2.3.4 | Scroll-reveal animations (fade, slide, zoom)
SimpleBar | 6.2.7 | Custom scrollbar for sidebar and notification panels

## Dashboard & Charts

Library | Version | Used On
--- | --- | ---
ApexCharts | 5.3.6 | Dashboards, analytics, all chart pages, widgets (12+ pages)
FullCalendar | 6.1.20 | Calendar page (standalone with modals & categories), project dashboard widget
Swiper | 12 | Dashboard product carousel (3 pages)
Chart.js | 4.5.0 | Additional chart types on chart pages

## Forms & Inputs

Library | Version | Purpose
--- | --- | ---
Tom Select | 2.4.6 | Searchable select boxes (replaces Select2 / Chosen)
Native HTML5 | — | Date/time pickers (`type="date"`, `type="time"`, `type="datetime-local"`, `type="month"`, `type="week"`)
noUiSlider | 15.8.1 | Range sliders (replaces Ion.RangeSlider)
Pickr | 1.9.1 | Color picker (replaces Spectrum)
Dropzone | 5.9.3 | File upload with drag & drop
Cropper.js | 2.1.0 | Image cropping

## Tables & Data

Library | Version | Notes
--- | --- | ---
Simple-DataTables | 10.1.0 | Lightweight data tables with sorting, search, pagination — no jQuery required

## Editors

Library | Version | Purpose
--- | --- | ---
CodeMirror | 5.65.18 | Code editor with syntax highlighting
Quill | 2.0.3 | WYSIWYG rich text editor (replaces Summernote)

## Apps & Utilities

Library | Version | Purpose
--- | --- | ---
SortableJS | 1.15.6 | Drag-and-drop for Kanban Board and Dual List Box
SweetAlert2 | 11 | Beautiful alert dialogs and toast notifications

# Customization

How to modify the template's appearance and behavior to match your project.

## Changing Theme Colors

Open `style.css` and find the color definitions near the top. The main colors to change are:

    /* style.css — Main background */
    html, body {
        background: #152036;  /* Change this for overall background */
    }

    /* Sidebar background */
    .left-sidebar-pro {
        background: #1b2a47;  /* Change this for sidebar */
    }

    /* Accent color (used for hover, active states, links) */
    /* Search for #ec4445 and replace globally */

For chart colors, edit the color arrays inside the `initDashboardCharts()` function in `js/main.js`:

    // In js/main.js — initDashboardCharts()
    colors: ['#00c292', '#ab8ce4'],  // Change chart series colors
    // ...
    grid: { borderColor: '#1e3154' }, // Change chart grid lines

## Dark Theme for Native Inputs

Native HTML5 date/time inputs use `color-scheme: dark` on `.form-control` in `style.css` to match the dark theme automatically:

    /* style.css — Bootstrap 5 compatibility section */
    .form-control {
        color-scheme: dark;
    }

## Adding a New Page

1. Copy an existing page (e.g. `static-table.html`) as your starting point
2. Update the `<title>` tag and breadcrumb text
3. Replace the content area inside `.container-fluid`
4. Add a link to the sidebar navigation in the `#menu1` list on all sidebar pages
5. If your page needs extra libraries, add them before `js/main.js`

    <!-- Adding a page-specific library -->
    <script src="https://cdn.jsdelivr.net/npm/some-library/dist/library.min.js"></script>
    <script src="js/main.js"></script> <!-- Always load last -->

## Working with Icons

The template uses two icon sets:

    <!-- Bootstrap Icons (primary) -->
    <i class="bi bi-house-door"></i>
    <i class="bi bi-envelope"></i>
    <i class="bi bi-bell"></i>

    <!-- Custom Nalika icons (sidebar, social) -->
    <i class="icon nalika-home"></i>
    <i class="icon nalika-facebook"></i>

Browse all 2,000+ Bootstrap Icons at icons.getbootstrap.com.

## Sidebar Navigation

The sidebar menu is a nested `<ul>` with class `.submenu-angle` for sub-items. To add a new menu section:

    <li>
        <a class="has-arrow" href="#">
            <i class="icon nalika-bar-chart"></i>
            <span class="mini-click-non">Reports</span>
        </a>
        <ul class="submenu-angle">
            <li><a href="monthly-report.html">Monthly Report</a></li>
            <li><a href="annual-report.html">Annual Report</a></li>
        </ul>
    </li>

The `initSidebarNav()` function in `js/main.js` automatically handles submenu toggling and active-page highlighting. Remember to add the link to all sidebar-bearing pages (42 files).

## Adding Charts

ApexCharts makes it easy to add new charts. Include the library and add a container:

    <!-- 1. Add a container with a unique ID -->
    <div id="myChart"></div>

    <!-- 2. Initialize in a script block -->
    <script>
    var chart = new ApexCharts(document.getElementById('myChart'), {
        chart: { type: 'bar', height: 350, background: 'transparent' },
        series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70] }],
        xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        colors: ['#00c292'],
        tooltip: { theme: 'dark' },
        grid: { borderColor: '#1e3154' }
    });
    chart.render();
    </script>

## Responsive Breakpoints

The layout adapts at three breakpoints defined in `css/responsive.css`:

1169px and below | Content area adjusts, some columns stack
992px and below | Sidebar hides, mobile menu activates with backdrop overlay
768px and below | Single-column layout, cards stack vertically

# Sources & Credits

Third-party libraries and resources used in this template.

### Framework & Icons

- Bootstrap 5.3.8
- Bootstrap Icons 1.13
- Google Fonts — Roboto

### Charts & Data Visualization

- ApexCharts
- Chart.js
- FullCalendar

### UI & Layout

- Swiper
- AOS (Animate On Scroll)
- SimpleBar
- SweetAlert2
- Simple-DataTables
- SortableJS

### Forms & Inputs

- Tom Select
- Native HTML5 date/time inputs
- noUiSlider
- Pickr
- Dropzone
- Cropper.js

### Editors

- CodeMirror
- Quill

# Support

Thank you for using Nalika. If you have any questions or run into issues, we're here to help.

### Need Help?

Our support team is happy to assist with questions about setup, customization, or troubleshooting.

Contact Colorlib