The mod.dashboard() method automatically attaches event listeners for all interactive elements in the .mod-dashboard component, including sidebar collapse/expand functionality, user dropdown toggles, and mobile navigation.
Method API
// Using mod(-plus).iife.min.js
window.mod.dashboard();
// Using mod(-plus).esm.min.js
import { dashboard } from 'path/to/mod(-plus).esm.min.js';
dashboard();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Dashboard HTML
<div class="mod-dashboard">
<aside class="mod-dashboard-sidebar">
<header class="mod-dashboard-sidebar-header">
<div class="mod-dashboard-logo">
<a href="/">
<img class="mod-dashboard-sidebar-logo-full" src="/mod_logo.svg" alt="Mod" />
<img class="mod-dashboard-sidebar-logo-collapsed" src="/mod_icon.svg" alt="Mod" />
</a>
</div>
<i class="mod-icon-log-out mod-hide-on-mobile"></i>
</header>
<nav class="mod-dashboard-sidebar-navigation">
<section class="mod-dashboard-sidebar-navigation-section">
<h5>Messages</h5>
<ul>
<li><a href="#"><i class="mod-icon-mail"></i> <span class="mod-navigation-item-label">Inbox</span> <span class="mod-count-badge">3</span></a></li>
<li><a href="#"><i class="mod-icon-message-circle"></i> <span class="mod-navigation-item-label">Chat</span> <span class="mod-count-badge">25</span></a></li>
</ul>
</section>
</nav>
<footer class="mod-dashboard-sidebar-footer">
<i class="mod-icon-log-out"></i>
<div class="mod-dashboard-sidebar-user">
<div class="mod-avatar-circle" data-status="online"><img src="/female_avatar.jpeg" alt="User" /></div>
<div class="mod-dashboard-sidebar-user-info">
<h4>Jane Smith</h4>
<p>Online</p>
</div>
<i class="mod-icon-chevrons-up-down"></i>
<div class="mod-dropdown">
<section class="mod-dropdown-section">
<ul>
<li><a href="#"><i class="mod-icon-user"></i> Profile</a></li>
<li><a href="#"><i class="mod-icon-cog"></i> Settings</a></li>
</ul>
</section>
<ul>
<li>Logout</li>
</ul>
</div>
</div>
</footer>
</aside>
<main class="mod-dashboard-page">
<div class="mod-dashboard-header">
<div class="mod-dashboard-header-left">
<i class="mod-icon-menu mod-hide-on-desktop"></i>
<h1 class="mod-dashboard-header-title mod-hide-on-desktop">Dashboard</h1>
</div>
<div class="mod-dashboard-header-right">
<div class="mod-actions-list">
<ul>
<li><i class="mod-icon-bell"></i></li>
</ul>
</div>
</div>
</div>
<div class="mod-dashboard-content">
<!-- Your dashboard content here -->
</div>
</main>
</div>Dashboard JavaScript
window.mod.dashboard();