Problem with bootstrap Theme


#1

Hey there, I am a beginner in EmberJs i’have a problem with Gentelella Bootstrap Template . I imported the theme correctly but on click nothing Work ( Toggle button & li menu ) this is my Code

- ember-cli-build.js

/jshint node:true/ /* global require, module */ var EmberApp = require(‘ember-cli/lib/broccoli/ember-app’);

module.exports = function(defaults) { var app = new EmberApp(defaults, { // Add options here }); // Style-Sheets Import //Bootstrap app.import(‘bower_components/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css’); //Font-awesome app.import(‘bower_components/gentelella/vendors/font-awesome/css/font-awesome.min.css’); //NProgress app.import(‘bower_components/gentelella/vendors/nprogress/nprogress.css’) //iCheck app.import(‘bower_components/gentelella/vendors/iCheck/skins/flat/grey.css’); //Bootstrap-progressbar app.import(‘bower_components/gentelella/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css’); //JQVMap app.import(‘bower_components/gentelella/vendors/jqvmap/dist/jqvmap.min.css’); //Bootstrap-daterangepicker app.import(‘bower_components/gentelella/vendors/bootstrap-daterangepicker/daterangepicker.css’); //Custom Theme Style app.import(‘bower_components/gentelella/build/css/custom.min.css’); //Font-awesome app.import(‘bower_components/gentelella/vendors/font-awesome/fonts/fontawesome-webfont.ttf’, { destDir: ‘fonts’ }); app.import(‘bower_components/gentelella/vendors/font-awesome/fonts/fontawesome-webfont.woff’, { destDir: ‘fonts’ }); app.import(‘bower_components/gentelella/vendors/font-awesome/fonts/fontawesome-webfont.woff2’, { destDir: ‘fonts’ }); //Bootstrap Fonts app.import(‘bower_components/gentelella/vendors/bootstrap/dist/fonts/glyphicons-halflings-regular.woff’, { destDir: ‘fonts’ }); app.import(‘bower_components/gentelella/vendors/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2’, { destDir: ‘fonts’ }); // Js Import //jQuery app.import(‘bower_components/gentelella/vendors/jquery/dist/jquery.min.js’); //Bootstrap app.import(‘bower_components/gentelella/vendors/bootstrap/dist/js/bootstrap.min.js’); //FastClick app.import(‘bower_components/gentelella/vendors/fastclick/lib/fastclick.js’); //NProgress app.import(‘bower_components/gentelella/vendors/nprogress/nprogress.js’); //Chart.js app.import(‘bower_components/gentelella/vendors/Chart.js/dist/Chart.min.js’); //Gauge.js app.import(‘bower_components/gentelella/vendors/gauge.js/dist/gauge.min.js’); //Bootstrap-progressbar app.import(‘bower_components/gentelella/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js’); //iCheck app.import(‘bower_components/gentelella/vendors/iCheck/icheck.min.js’); //Skycons app.import(‘bower_components/gentelella/vendors/skycons/skycons.js’); //Flot_library app.import(‘bower_components/gentelella/vendors/Flot/jquery.flot.js’); app.import(‘bower_components/gentelella/vendors/Flot/jquery.flot.pie.js’); app.import(‘bower_components/gentelella/vendors/Flot/jquery.flot.time.js’); app.import(‘bower_components/gentelella/vendors/Flot/jquery.flot.stack.js’); app.import(‘bower_components/gentelella/vendors/Flot/jquery.flot.resize.js’); //Flot_library app.import(‘bower_components/gentelella/vendors/flot.orderbars/js/jquery.flot.orderBars.js’); app.import(‘bower_components/gentelella/vendors/flot-spline/js/jquery.flot.spline.min.js’); app.import(‘bower_components/gentelella/vendors/flot.curvedlines/curvedLines.js’); //DateJS app.import(‘bower_components/gentelella/vendors/DateJS/build/date.js’); //JQVMap app.import(‘bower_components/gentelella/vendors/jqvmap/dist/jquery.vmap.js’); app.import(‘bower_components/gentelella/vendors/jqvmap/dist/maps/jquery.vmap.world.js’); app.import(‘bower_components/gentelella/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js’); //Bootstrap-daterangepicker app.import(‘bower_components/gentelella/vendors/moment/min/moment.min.js’); app.import(‘bower_components/gentelella/vendors/bootstrap-daterangepicker/daterangepicker.js’);

//Custom Theme Scripts app.import(‘bower_components/gentelella/build/js/custom.min.js’);

return app.toTree(); };

- application.hbs ( div toggle ) collapse don’t work

  <div class="top_nav">
    <div class="nav_menu">
      <nav>
        <div class="nav toggle">
          <a id="menu_toggle"><i class="fa fa-bars"></i></a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li class="">
            <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <img src="images/img.jpg" alt="">John Doe
              <span class=" fa fa-angle-down"></span>
            </a>
            <ul class="dropdown-menu dropdown-usermenu pull-right">
              <li><a href="javascript:;"> Profile</a></li>
              <li>
                <a href="javascript:;">
                  <span class="badge bg-red pull-right">50%</span>
                  <span>Settings</span>
                </a>
              </li>
              <li><a href="javascript:;">Help</a></li>
              <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
            </ul>
          </li>
          <li role="presentation" class="dropdown">
            <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
              <i class="fa fa-envelope-o"></i>
              <span class="badge bg-green">6</span>
            </a>
            <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
              <li>
                <a>
                  <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                  <span>
                 <span>John Smith</span>
                  <span class="time">3 mins ago</span>
                  </span>
                  <span class="message">
                 Film festivals used to be do-or-die moments for movie makers. They were where...
               </span>
                </a>
              </li>
              <li>
                <a>
                  <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                  <span>
                 <span>John Smith</span>
                  <span class="time">3 mins ago</span>
                  </span>
                  <span class="message">
                 Film festivals used to be do-or-die moments for movie makers. They were where...
               </span>
                </a>
              </li>
              <li>
                <a>
                  <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                  <span>
                 <span>John Smith</span>
                  <span class="time">3 mins ago</span>
                  </span>
                  <span class="message">
                 Film festivals used to be do-or-die moments for movie makers. They were where...
               </span>
                </a>
              </li>
              <li>
                <a>
                  <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                  <span>
                 <span>John Smith</span>
                  <span class="time">3 mins ago</span>
                  </span>
                  <span class="message">
                 Film festivals used to be do-or-die moments for movie makers. They were where...
               </span>
                </a>
              </li>
              <li>
                <div class="text-center">
                  <a>
                    <strong>See All Alerts</strong>
                    <i class="fa fa-angle-right"></i>
                  </a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <!-- /top navigation -->

Thank you for your help


#2

I have the same issue, do you have any updates?