RuhNetConsulting
/
concept
mirror of https://github.com/puikinsh/concept
1
0
Fork 0
Code Issues 0 Projects 0 Releases 2 Wiki Activity
Browse Source

Cleanup

pull/16/head
Aigars Silkalns 4 months ago
parent
6141708e9c
commit
c7b1c1d198
6 changed files with 530 additions and 568 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +42
    -1
      .gitignore
  2. +112
    -0
      concept-modern/CHANGELOG.md
  3. +205
    -0
      concept-modern/README.md
  4. +171
    -0
      concept-modern/VITE_GUIDE.md
  5. +0
    -94
      pages/404-page.html
  6. +0
    -473
      pages/blank-page.html

+ 42
- 1
.gitignore View File

@ -1,2 +1,43 @@
*.md
# OS Files
.DS_Store
Thumbs.db
# Development/Migration Files
MIGRATION_STATUS.md
MODERNIZATION_PLAN.md
SIMPLIFIED_APPROACH.md
CLAUDE.md
TODO.md
*.log
# Old Template Files (to be removed after full migration)
/pages/
/assets/
/documentation/
/package.json
/package-lock.json
/vite.config.js
/src/scss/main.scss
concept-bootstrap-5-admin-dashboard.png
# Keep only the modern version
!/concept-modern/
# Node modules
node_modules/
# Build files
dist/
build/
# IDE files
.vscode/
.idea/
*.swp
*.swo
# Temporary files
*.tmp
*.temp
.cache/
concept-modern/DEVELOPMENT_STATUS.md

+ 112
- 0
concept-modern/CHANGELOG.md View File

@ -0,0 +1,112 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [2.0.1] - 2025-08-04
### Changed
- Updated Vite from 5.4.11 to 7.0.6 for next-generation frontend tooling
- Updated Sass from 1.81.0 to 1.89.2
- Updated Terser from 5.37.0 to 5.43.1
- Updated @vitejs/plugin-legacy from 5.4.3 to 7.1.0
- Updated all dependencies to latest 2025 versions
### Fixed
- Compatibility issues with latest dependency versions
- Build configuration for Vite 7.x
## [2.0.0] - 2025-08-04
### Added
- Complete Bootstrap 5.3.7 migration from Bootstrap 4
- Vite 5.4.11 build system with Hot Module Replacement
- Handlebars templating engine with reusable partials
- ES6 module architecture throughout the application
- New Dashboard Pages:
- Finance Dashboard with financial metrics and charts
- Sales Dashboard with funnel visualization and team performance
- Influencer Dashboard with social media analytics
- New Application Pages:
- Calendar with FullCalendar 6 integration
- User Management with DataTables and bulk actions
- Timeline/Activity Feed with real-time updates
- Comprehensive Settings page with 8 sections
- New UI Components:
- Typography showcase page
- Advanced multiselect with Tom Select
- Form validation examples
- 404 Error page with modern design
- Responsive sidebar with improved mobile navigation
- Chart.js 4.5.0 integration for all chart types
- DataTables with Bootstrap 5 styling
- Export functionality for tables and timelines
- Dark mode preparation in settings
- Loading states and animations throughout
- Success/error notifications system
- Keyboard navigation support
- SCSS architecture with component separation
### Changed
- Migrated all JavaScript from jQuery to vanilla JavaScript
- Updated all Bootstrap 4 classes to Bootstrap 5
- Replaced data-* attributes with data-bs-* for Bootstrap 5
- Modernized build process from webpack to Vite
- Improved responsive design for all screen sizes
- Enhanced performance with code splitting
- Updated FontAwesome to version 7.0.0
- Redesigned header with better search placement
- Improved sparkline charts in revenue widgets
- Better mobile navigation with single hamburger menu
- Updated all form components to Bootstrap 5 syntax
- Modernized table styling and functionality
- Enhanced sidebar active state management
### Removed
- jQuery dependency completely removed
- Bootstrap 4 and its dependencies
- Outdated build tools and configurations
- Legacy browser polyfills (replaced with Vite legacy plugin)
- Redundant CSS classes and utilities
- Old JavaScript patterns and jQuery plugins
- Deprecated Bootstrap 4 components
### Fixed
- Navigation menu active states across all pages
- Mobile sidebar closing when interacting with dropdowns
- Chart overflow issues in dashboard widgets
- Sparkline positioning in revenue cards
- Double hamburger menu on mobile devices
- Badge styling in sidebar navigation
- FontAwesome icon display in FullCalendar buttons
- Mini calendar responsive behavior
- DataTables responsive plugin integration
- Form validation styling
- Dropdown menu backgrounds
- Various responsive design issues
### Security
- Updated all dependencies to latest secure versions
- Removed vulnerable jQuery version
- Added Content Security Policy headers support
- Implemented proper form validation
- Added CSRF token support preparation
### Technical Details
- Node.js 16+ required
- npm 8+ required
- ES6+ JavaScript features used
- CSS Grid and Flexbox for layouts
- CSS custom properties for theming
- Async/await for asynchronous operations
- Module pattern for code organization
## [1.0.0] - Previous Version
### Initial Release
- Original Bootstrap 4 template
- jQuery-based interactions
- Basic dashboard functionality
- Limited responsive features

+ 205
- 0
concept-modern/README.md View File

@ -0,0 +1,205 @@
# Concept Modern - Bootstrap 5 Admin Dashboard
A modern, responsive admin dashboard template built with Bootstrap 5, featuring a clean design and comprehensive functionality for web applications.
## Overview
Concept Modern is a complete rewrite of the Concept Bootstrap 4 admin template, modernized with the latest web technologies and completely jQuery-free. This dashboard provides a solid foundation for building admin panels, analytics dashboards, and management systems.
## Features
### Core Technologies
- **Bootstrap 5.3.7** - Latest Bootstrap framework with modern components
- **Vite 7.0.6** - Next-generation frontend tooling with lightning-fast HMR support
- **Handlebars** - Template engine with reusable partials
- **SCSS** - Advanced styling with variables and mixins
- **ES6 Modules** - Modern JavaScript architecture
- **jQuery-free** - Pure vanilla JavaScript implementation
### Dashboard Pages
- **E-commerce Dashboard** - Main dashboard with revenue cards, charts, and recent orders
- **Finance Dashboard** - Financial metrics, transaction charts, and portfolio overview
- **Sales Dashboard** - Sales funnel, team performance, and revenue analytics
- **Influencer Dashboard** - Social media metrics, engagement tracking, and campaign performance
### UI Components
- **Cards** - Various card layouts with images, colors, borders, and lists
- **Typography** - Complete typography showcase with Bootstrap 5 utilities
- **Forms** - Form elements, validation, and multiselect components
- **Charts** - Chart.js integration with line, bar, pie, and doughnut charts
- **Tables** - Basic tables and DataTables integration with sorting/filtering
### Applications
- **Calendar** - Full-featured calendar with FullCalendar integration
- **User Management** - User list with DataTables, filters, and bulk actions
- **Timeline** - Activity feed with filters and real-time updates
- **Settings** - Comprehensive settings page with multiple sections
### Additional Pages
- **404 Error Page** - Modern error page with helpful navigation
- **Blank Page Template** - Starting point for custom pages
## Installation
### Prerequisites
- Node.js 16.x or higher
- npm 8.x or higher
### Setup Instructions
1. Clone or download the repository:
```bash
git clone https://github.com/yourusername/concept-modern.git
cd concept-modern
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Build for production:
```bash
npm run build
```
5. Preview production build:
```bash
npm run preview
```
## Project Structure
```
concept-modern/
├── src/
│ ├── assets/ # Static assets (images, fonts)
│ ├── js/ # JavaScript modules
│ │ ├── components/ # Reusable components
│ │ └── pages/ # Page-specific scripts
│ ├── pages/ # HTML pages
│ │ ├── dashboards/ # Dashboard pages
│ │ ├── ui-elements/ # UI component pages
│ │ └── misc/ # Miscellaneous pages
│ ├── partials/ # Handlebars partials
│ │ └── layouts/ # Layout components
│ ├── scss/ # SCSS styles
│ │ ├── components/ # Component styles
│ │ ├── layouts/ # Layout styles
│ │ └── pages/ # Page-specific styles
│ └── index.html # Main entry point
├── dist/ # Production build output
├── public/ # Public assets
├── package.json # Project dependencies
└── vite.config.js # Vite configuration
```
## Key Dependencies
### Core
- `bootstrap@5.3.7` - UI framework
- `@fortawesome/fontawesome-free@7.0.0` - Icon library
- `vite@7.0.6` - Build tool
- `sass@1.89.2` - CSS preprocessor
### JavaScript Libraries
- `chart.js@4.5.0` - Charts and graphs
- `datatables.net-bs5@2.2.3` - Advanced tables
- `@fullcalendar/core@6.1.15` - Calendar functionality
- `tom-select@2.4.1` - Enhanced select boxes
### Build Tools
- `vite-plugin-handlebars@2.0.0` - Handlebars support
- `@vitejs/plugin-legacy@7.1.0` - Legacy browser support
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Chrome Mobile (latest)
- Safari Mobile (latest)
## Development Guidelines
### Adding a New Page
1. Create the HTML file in `src/pages/`
2. Add the page to `vite.config.js` in the `rollupOptions.input` section
3. Create corresponding JavaScript in `src/js/pages/`
4. Create SCSS file in `src/scss/pages/` and import in `main.scss`
5. Update sidebar navigation in `src/partials/layouts/sidebar.hbs`
### Component Structure
JavaScript modules follow this pattern:
```javascript
export function initializeComponent() {
// Component logic
}
// Auto-initialize on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeComponent);
} else {
initializeComponent();
}
```
### SCSS Organization
- Use Bootstrap variables for consistency
- Follow BEM naming convention where applicable
- Keep component styles modular
- Use mixins for repeated patterns
## Performance Optimization
- Vite's code splitting for optimal loading
- Lazy loading for heavy components
- Optimized images and assets
- Minimal CSS with PurgeCSS in production
- ES6 modules for tree shaking
## Deployment
The production build can be deployed to any static hosting service:
1. Build the project: `npm run build`
2. Deploy the `dist/` folder to your hosting service
3. Configure your server to serve `index.html` for all routes
### Recommended Hosting
- Netlify
- Vercel
- GitHub Pages
- AWS S3 + CloudFront
- Any static file server
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Support
For support, please open an issue in the GitHub repository or contact support@yourcompany.com.
## Credits
- Original Concept template design
- Bootstrap team for the excellent framework
- All open-source library contributors

+ 171
- 0
concept-modern/VITE_GUIDE.md View File

@ -0,0 +1,171 @@
# Vite Build System Guide
This project uses Vite as the build tool with Handlebars for templating. This guide helps you understand the setup and common tasks.
## Project Structure
```
concept-modern/
├── src/ # Source files
│ ├── assets/ # Static assets (images, fonts)
│ ├── js/ # JavaScript files
│ │ ├── app.js # Main entry point
│ │ ├── components/ # Reusable JS components
│ │ └── pages/ # Page-specific JS
│ ├── scss/ # SCSS stylesheets
│ │ ├── main.scss # Main stylesheet
│ │ ├── components/ # Component styles
│ │ └── pages/ # Page-specific styles
│ ├── pages/ # HTML pages
│ ├── partials/ # Handlebars partials
│ │ └── layouts/ # Layout partials (header, sidebar, etc.)
│ └── index.html # Main entry page
├── dist/ # Build output (git-ignored)
├── vite.config.js # Vite configuration
└── package.json # Dependencies and scripts
```
## Key Features
### 1. No CDN Dependencies
All dependencies are bundled locally:
- Bootstrap 5 is installed via npm
- FontAwesome is installed via npm
- Only Google Fonts uses CDN (for optimal caching)
### 2. Handlebars Templating
- Reusable partials for common elements (header, sidebar, footer)
- Page-specific variables (pageTitle, activeMenu, activePage)
- Helper functions for conditionals and comparisons
### 3. Module-based JavaScript
- ES6 modules with proper imports
- Bootstrap components imported as needed
- Page-specific scripts loaded only when needed
## Common Tasks
### Adding a New Page
1. **Create the HTML file** in the appropriate directory:
```
src/pages/your-new-page.html
```
2. **Use the standard template structure**:
```html
<!doctype html>
<html lang="en">
<head>
{{> layouts/head pageTitle="Your Page Title" }}
</head>
<body>
<div class="dashboard-main-wrapper">
{{> layouts/header }}
{{> layouts/sidebar activeMenu="menu-id" activePage="page-id" }}
<div class="dashboard-wrapper">
<div class="dashboard-content">
<!-- Your content here -->
</div>
{{> layouts/footer }}
</div>
</div>
{{> layouts/scripts }}
<!-- Page specific JS if needed -->
<script type="module" src="../js/pages/your-page.js"></script>
</body>
</html>
```
3. **Add to vite.config.js**:
```js
rollupOptions: {
input: {
// ... existing entries
'your-new-page': resolve(__dirname, 'src/pages/your-new-page.html'),
}
}
```
4. **Update navigation** in `src/partials/layouts/sidebar.hbs`
### Adding Page-Specific Styles
1. Create a new SCSS file:
```
src/scss/pages/_your-page.scss
```
2. Import it in `src/scss/main.scss`:
```scss
@import "pages/your-page";
```
### Adding Page-Specific JavaScript
1. Create a new JS file:
```
src/js/pages/your-page.js
```
2. Import Bootstrap if needed:
```js
import * as bootstrap from 'bootstrap';
```
3. Reference it in your HTML page:
```html
<script type="module" src="../js/pages/your-page.js"></script>
```
## Build Commands
```bash
# Development server with hot reload
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
```
## Best Practices
1. **Always use relative paths** in HTML files for JS imports
2. **Import Bootstrap components** only when needed
3. **Use Handlebars partials** for repeated elements
4. **Keep page-specific code** in separate files
5. **Use SCSS variables** for consistent theming
6. **Test the production build** before deployment
## Troubleshooting
### Module not found errors
- Ensure all imports use proper paths
- Check that the file is added to vite.config.js
### Styles not loading
- Verify SCSS file is imported in main.scss
- Check for syntax errors in SCSS
### JavaScript errors
- Import Bootstrap before using its components
- Use proper module syntax (import/export)
### 404 errors in development
- Add HTML file to vite.config.js input
- Restart the dev server after config changes
## Helper Scripts
Run the build utility to find missing HTML files:
```bash
node scripts/build-utils.js
```
This will scan for all HTML files and show which ones need to be added to the Vite config.

+ 0
- 94
pages/404-page.html View File

@ -1,94 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/libs/css/style.css">
<link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<div class="dashboard-main-wrapper p-0">
<!-- ============================================================== -->
<!-- navbar -->
<!-- ============================================================== -->
<nav class="navbar navbar-expand dashboard-top-header bg-white">
<div class="container-fluid">
<!-- ============================================================== -->
<!-- brand logo -->
<!-- ============================================================== -->
<div class="dashboard-nav-brand">
<a class="dashboard-logo" href="../index.html">Concept</a>
</div>
<!-- ============================================================== -->
<!-- end brand logo -->
<!-- ============================================================== -->
</div>
</nav>
<!-- ============================================================== -->
<!-- end navbar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- wrapper -->
<!-- ============================================================== -->
<div class="bg-light text-center">
<div class="container">
<div class="row">
<div class="offset-xl-2 col-xl-8 offset-lg-2 col-lg-8 col-md-12 col-sm-12 col-12">
<div class="error-section">
<img src="../assets/images/error-img.png" alt="" class="img-fluid">
<div class="error-section-content">
<h1 class="display-3">Page Not Found</h1>
<p> The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<a href="../index.html" class="btn btn-secondary btn-lg">Back to homepage</a>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<div class="bg-white p-3">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-dark text-center">
Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- end footer -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- end wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- end footer -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- end main wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- end main wrapper -->
<!-- ============================================================== -->
<!-- Optional JavaScript -->
<script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<script src="../assets/libs/js/main-js.js"></script>
</body>
</html>

+ 0
- 473
pages/blank-page.html View File

@ -1,473 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/libs/css/style.css">
<link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<div class="dashboard-main-wrapper">
<!-- ============================================================== -->
<!-- navbar -->
<!-- ============================================================== -->
<div class="dashboard-header">
<nav class="navbar navbar-expand-lg bg-white fixed-top">
<a class="navbar-brand" href="../index.html">Concept</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right-top">
<li class="nav-item">
<div id="custom-search" class="top-search-bar">
<input class="form-control" type="text" placeholder="Search..">
</div>
</li>
<li class="nav-item dropdown notification">
<a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span class="indicator"></span></a>
<ul class="dropdown-menu dropdown-menu-right notification-dropdown">
<li>
<div class="notification-title"> Notification</div>
<div class="notification-list">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="notification-info">
<div class="notification-list-user-img"><img src="../assets/images/avatar-2.jpg" alt="" class="user-avatar-md rounded-circle"></div>
<div class="notification-list-user-block"><span class="notification-list-user-name">Jeremy Rakestraw</span>accepted your invitation to join the team.
<div class="notification-date">2 min ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="notification-info">
<div class="notification-list-user-img"><img src="../assets/images/avatar-3.jpg" alt="" class="user-avatar-md rounded-circle"></div>
<div class="notification-list-user-block"><span class="notification-list-user-name">
John Abraham</span>is now following you
<div class="notification-date">2 days ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="notification-info">
<div class="notification-list-user-img"><img src="../assets/images/avatar-4.jpg" alt="" class="user-avatar-md rounded-circle"></div>
<div class="notification-list-user-block"><span class="notification-list-user-name">Monaan Pechi</span> is watching your main repository
<div class="notification-date">2 min ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="notification-info">
<div class="notification-list-user-img"><img src="../assets/images/avatar-5.jpg" alt="" class="user-avatar-md rounded-circle"></div>
<div class="notification-list-user-block"><span class="notification-list-user-name">Jessica Caruso</span>accepted your invitation to join the team.
<div class="notification-date">2 min ago</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li>
<div class="list-footer"> <a href="#">View all notifications</a></div>
</li>
</ul>
</li>
<li class="nav-item dropdown connection">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a>
<ul class="dropdown-menu dropdown-menu-right connection-dropdown">
<li class="connection-list">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/github.png" alt="" > <span>Github</span></a>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/dribbble.png" alt="" > <span>Dribbble</span></a>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/dropbox.png" alt="" > <span>Dropbox</span></a>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/bitbucket.png" alt=""> <span>Bitbucket</span></a>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/mail_chimp.png" alt="" ><span>Mail chimp</span></a>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
<a href="#" class="connection-item"><img src="../assets/images/slack.png" alt="" > <span>Slack</span></a>
</div>
</div>
</li>
<li>
<div class="conntection-footer"><a href="#">More</a></div>
</li>
</ul>
</li>
<li class="nav-item dropdown nav-user">
<a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/avatar-1.jpg" alt="" class="user-avatar-md rounded-circle"></a>
<div class="dropdown-menu dropdown-menu-right nav-user-dropdown" aria-labelledby="navbarDropdownMenuLink2">
<div class="nav-user-info">
<h5 class="mb-0 text-white nav-user-name">
John Abraham</h5>
<span class="status"></span><span class="ml-2">Available</span>
</div>
<a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
<a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>
<a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- ============================================================== -->
<!-- end navbar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- left sidebar -->
<!-- ============================================================== -->
<div class="nav-left-sidebar sidebar-dark">
<div class="menu-list">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="d-xl-none d-lg-none" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-column">
<li class="nav-divider">
Menu
</li>
<li class="nav-item ">
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle"></i>Dashboard <span class="badge badge-success">6</span></a>
<div id="submenu-1" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a>
<div id="submenu-1-2" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="../index.html">E Commerce Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../ecommerce-product.html">Product List</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../ecommerce-product-single.html">Product Single</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../ecommerce-product-checkout.html">Product Checkout</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../dashboard-finance.html">Finance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../dashboard-sales.html">Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a>
<div id="submenu-1-1" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="../dashboard-influencer.html">Influencer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../influencer-finder.html">Influencer Finder</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../influencer-profile.html">Influencer Profile</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI Elements</a>
<div id="submenu-2" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="general.html">General</a>
</li>
<li class="nav-item">
<a class="nav-link" href="carousel.html">Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="listgroup.html">List Group</a>
</li>
<li class="nav-item">
<a class="nav-link" href="typography.html">Typography</a>
</li>
<li class="nav-item">
<a class="nav-link" href="accordions.html">Accordions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tabs.html">Tabs</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
<div id="submenu-3" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="chart-c3.html">C3 Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chart-chartist.html">Chartist Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chart-charts.html">Chart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chart-morris.html">Morris</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chart-sparkline.html">Sparkline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chart-gauge.html">Guage</a>
</li>
</ul>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a>
<div id="submenu-4" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="form-elements.html">Form Elements</a>
</li>
<li class="nav-item">
<a class="nav-link" href="form-validation.html">Parsely Validations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="multiselect.html">Multiselect</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a>
<div id="submenu-5" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="general-table.html">General Tables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data-tables.html">Data Tables</a>
</li>
</ul>
</div>
</li>
<li class="nav-divider">
Features
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a>
<div id="submenu-6" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="invoice.html">Invoice</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blank-page.html">Blank Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blank-page-header.html">Blank Page Header</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="404-page.html">404 page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sign-up.html">Sign up Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="forgot-password.html">Forgot Password</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html">Pricing Tables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="timeline.html">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable List</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">Widgets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="media-object.html">Media Objects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cropper-image.html">Cropper</a>
</li>
<li class="nav-item">
<a class="nav-link" href="color-picker.html">Color Picker</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps <span class="badge badge-secondary">New</span></a>
<div id="submenu-7" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="inbox.html">Inbox</a>
</li>
<li class="nav-item">
<a class="nav-link" href="email-details.html">Email Detail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="email-compose.html">Email Compose</a>
</li>
<li class="nav-item">
<a class="nav-link" href="message-chat.html">Message Chat</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a>
<div id="submenu-8" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="icon-material.html">Material Icons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="icon-themify.html">Themify Icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="icon-flag.html">Flag Icons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="icon-weather.html">Weather Icon</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-9" aria-controls="submenu-9"><i class="fas fa-fw fa-map-marker-alt"></i>Maps</a>
<div id="submenu-9" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="map-google.html">Google Maps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="map-vector.html">Vector Maps</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu Level</a>
<div id="submenu-10" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Level 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-11" aria-controls="submenu-11">Level 2</a>
<div id="submenu-11" class="collapse submenu" style="">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Level 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Level 2</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Level 3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- ============================================================== -->
<!-- end left sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- wrapper -->
<!-- ============================================================== -->
<div class="dashboard-wrapper">
<div class="container-fluid dashboard-content">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h3 class="text-center">Content goes here!</h3>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<div class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="text-md-right footer-links d-none d-sm-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- end footer -->
<!-- ============================================================== -->
</div>
</div>
<!-- ============================================================== -->
<!-- end main wrapper -->
<!-- ============================================================== -->
<!-- Optional JavaScript -->
<script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<script src="../assets/libs/js/main-js.js"></script>
</body>
</html>

Write Preview
Loading…
Cancel
Save