Material Dashboard PRO and Material Kit PRO in the same files

[alexandru-paduraru]

Thank you for using our products. We highly recommend you not to mix the products because there can be some compatibility issues on the classes. This is a temporary situation, we are working to fix this. Till then here is an overview about how to use the products in your project:

1. The Dashboard should be used for the Admin/CMS part of your website/startup. Here is where you control everything from the management part, where you see stats like this about your products/users, where you edit/add/delete different items, etc. This is the control panel of your site. The Dashboard also includes the Login Page, Register Page or Lock Screen Page so you can use them to have the access to the Dashboard

2. The UI Kit should be used for the part where you present your business. You can create with the kit the Landing Page of your startup/website, the Contact Us Page the Pricing Page the About Us Page etc. Or you can use this to create also your Blog, where you will keep in touch with your audience. You can also built your own pages with already made sections -> Sections

If you create a SaaS, probably your users will have access to the Dashboard too, so they can control some items from there too. But you still need the UI kit for the presentation pages of your business. In this way, you will have the same design in the presentation and also in the Dashboard.

The basic idea is that you should keep the products separate and not try to combine them because you will load your page with too much CSS and Javascript which are not necessary in the same time. Your user will be either on a Landing Page or on the Admin Part.

If you like for example 1 item from one product, like a Card, and it is not in the other product, you can check in the next example how to do that using the SCSS files.

Just follow the next steps, for the FileUpload Example:

1. You can go to material-kit/assets/sass/material-kit/_fileupload.scss and put it in the same folder structure to material-dashboard.
2. Compile again the assets/sass/material-dashboard.scss SASS using Koala http://koala-app.com/ (make sure you set the output path to assets/css/material-kit.css).
3. Move the library for the file upload from material-kit/assets/js/jasny-bootstrap.min.js to the same folder in material-dashboard and then everything should work fine in the Dashboard.

Hope this will help you. Let us know if you have any other issues.

Best, Alex

[ssmrasu]

What i am Using:

                $('.nav-item.active').removeClass('active');
        $('div.sidebar-wrapper ul.nav li a').each(function(){  
            var currentPage = $(this).data('ajax-load');
            if ($action == currentPage) {
                $(this).parent().addClass('active');
                $(this).parent().parent().parent().parent('li').addClass('active');
            }
        });

This is an simple way. You can modify this to your need.