Merge pull request #19 from christianesperar/develop

Sidebar fixes and code enhancements

.eslintrc

@@ -1,13 +1,16 @@
 {
   "plugins": [
-    "cypress"
+    "cypress",
+    "prettier"
   ],
   "extends": [
     "airbnb",
-    "plugin:cypress/recommended"
+    "plugin:cypress/recommended",
+    "prettier"
   ],
   "rules": {
-    "no-console": 0
+    "no-console": 0,
+    "prettier/prettier": ["error"]
   },
   "env": {
     "browser": true,

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

cypress/integration/sidebar.spec.js

@@ -1,27 +1,36 @@
 describe('Sidebar', () => {
-  beforeEach(() => {
+  it('should have active state for url with index.html', () => {
     cy.visit('http://127.0.0.1:8080/index.html');
+
+    cy.get('.g-sidebar__menu-item:contains(Dashboard)').should(
+      'have.class',
+      'g-sidebar__menu-item--selected'
+    );
   });
 
-  it('should have active state', () => {
-    cy.get('.g-sidebar__menu-item:contains(Dashboard)')
-      .should('have.class', 'g-sidebar__menu-item--selected');
+  it('should have active state for url with /', () => {
+    cy.visit('http://127.0.0.1:8080/bootstrap-4-components/');
+
+    cy.get('.g-sidebar__menu-item:contains(Components)').should(
+      'have.class',
+      'g-sidebar__menu-item--selected'
+    );
   });
 
   it('should be collapsible', () => {
+    cy.visit('http://127.0.0.1:8080/index.html');
+
     cy.get('.g-header__sidebar-toggle').click();
 
-    cy.get('.g-sidebar')
-      .should('have.class', 'g-sidebar--collapse');
+    cy.get('.g-sidebar').should('have.class', 'g-sidebar--collapse');
 
     cy.get('.g-header__sidebar-toggle').click();
 
-    cy.get('.g-sidebar')
-      .should('not.have.class', 'g-sidebar--collapse');
+    cy.get('.g-sidebar').should('not.have.class', 'g-sidebar--collapse');
   });
 });
 
-describe('Sidebar Expand', () => {
+describe('Sidebar expand', () => {
   beforeEach(() => {
     cy.visit('http://127.0.0.1:8080/index.html');
   });
@@ -46,13 +55,22 @@ describe('Sidebar Expand', () => {
       .should('be.visible');
   });
 
+  it('menu item should only have one active', () => {
+    cy.get('.g-sidebar__menu-item:contains(Multilevel Menu)')
+      .click()
+      .get('.g-sidebar__menu-item:contains(Pages)')
+      .click()
+      .get('.g-sidebar__menu-item--active')
+      .its('length')
+      .should('be.equal', 2);
+  });
+
   it('should have sidebar footer', () => {
-    cy.get('.g-sidebar__footer')
-      .should('be.visible');
+    cy.get('.g-sidebar__footer').should('be.visible');
   });
 });
 
-describe('Sidebar Collapse', () => {
+describe('Sidebar collapse', () => {
   beforeEach(() => {
     cy.visit('http://127.0.0.1:8080/index.html');
 
@@ -74,23 +92,18 @@ describe('Sidebar Collapse', () => {
   });
 
   it('menu item should show on hover', () => {
-    cy.get('.g-sidebar__menu-item:contains(Multilevel Menu)')
-      .trigger('mouseover');
+    cy.get('.g-sidebar__menu-item:contains(Multilevel Menu)').trigger('mouseover');
 
-    cy.get('.g-sidebar__menu-description:contains(Multilevel Menu)')
-      .should('be.visible');
+    cy.get('.g-sidebar__menu-description:contains(Multilevel Menu)').should('be.visible');
   });
 
   it('menu item should show on click', () => {
-    cy.get('.g-sidebar__menu-item:contains(Multilevel Menu)')
-      .click();
+    cy.get('.g-sidebar__menu-item:contains(Multilevel Menu)').click();
 
-    cy.get('.g-sidebar__menu-description:contains(Multilevel Menu)')
-      .should('be.visible');
+    cy.get('.g-sidebar__menu-description:contains(Multilevel Menu)').should('be.visible');
   });
 
   it('should not have sidebar footer', () => {
-    cy.get('.g-sidebar__footer')
-      .should('not.be.visible');
+    cy.get('.g-sidebar__footer').should('not.be.visible');
   });
 });

cypress/plugins/index.js

@@ -14,4 +14,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

dist/assets/css/excludable.css

@@ -4,7 +4,7 @@
 
 .e-bootstrap-logo-b {
   position: relative;
-  font-family: "Helvetica Neue", Arial, sans-serif; }
+  font-family: 'Helvetica Neue', Arial, sans-serif; }
 
 .e-bootstrap-logo-4 {
   position: absolute;

dist/assets/css/theme.css

@@ -20,7 +20,7 @@
 .g-list__bullet::before {
   content: "";
   font-weight: 900;
-  font-family: "Font Awesome 5 Free";
+  font-family: 'Font Awesome 5 Free';
   font-style: normal; }
 
 .g-container {
@@ -230,7 +230,7 @@ a:hover {
 .g-header__nav-link {
   height: 100%; }
 
-.g-header__nav-link:hover, .g-header__nav-link[aria-expanded="true"] {
+.g-header__nav-link:hover, .g-header__nav-link[aria-expanded='true'] {
   color: #23527c !important;
   background: #d9dee4; }
 
@@ -253,7 +253,7 @@ a:hover {
   color: #fff;
   font-weight: 500;
   font-size: 10px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
   line-height: 13px; }
 
 .g-header__profile-photo {
@@ -410,11 +410,11 @@ a:hover {
   font-size: 10px;
   content: "";
   font-weight: 900;
-  font-family: "Font Awesome 5 Free";
+  font-family: 'Font Awesome 5 Free';
   font-style: normal; }
 
 .g-sidebar__menu-item--active.g-sidebar__menu-item--arrow::after {
-  content: "\f077"; }
+  content: '\f077'; }
 
 .g-sidebar__menu-link {
   display: block;

dist/assets/js/custom.js

@@ -22,7 +22,7 @@
     isTouchScreen: 'ontouchstart' in document.documentElement,
 
     isCurrentUrl: function isCurrentUrl(href) {
-      return href === CURRENT_URL || CURRENT_URL.indexOf(href + 'index') > -1 || href.indexOf(CURRENT_URL + 'index') > -1;
+      return href && (href === CURRENT_URL || href + '/' === CURRENT_URL || CURRENT_URL.indexOf(href + 'index') > -1 || href.indexOf(CURRENT_URL + 'index') > -1);
     }
   };
 })(jQuery);
@@ -68,10 +68,10 @@
   };
 
   /**
-  * Collapse and mobile
-  * Store current event to `bubbling` to fix issue where `mouseenter` and `click`
-  * are both triggered on mobile
-  */
+   * Collapse and mobile
+   * Store current event to `bubbling` to fix issue where `mouseenter` and `click`
+   * are both triggered on mobile
+   */
   var bubbling = void 0;
 
   /**