Merge pull request #24 from noesya/design-system/dropdown

Dropdown

assets/js/theme/design-system/dropdown.js

+class Dropdown {
+    constructor (selector) {
+        this.element = document.querySelector(selector);
+        this.dropdownButton = this.element.querySelector('button');
+
+        this.state = {
+            isOpened: false
+        };
+
+        this.listen();
+    }
+
+    listen () {
+        this.dropdownButton.addEventListener('click', () => {
+            this.toggleDropdown();
+        });
+    }
+
+    toggleDropdown (open = !this.state.isOpened) {
+        console.log('lalala')
+        let classAction;
+        this.state.isOpened = open;
+        classAction = this.state.isOpened ? 'add' : 'remove';
+        this.dropdownButton.setAttribute('aria-expanded', this.state.isOpened);
+    }
+}
+
+export default new Dropdown('.diplomas-select');

assets/js/theme/index.js

 import './body.js';
 import './blocks/keyFigures';
 import './blocks/timeline';
+import './design-system/dropdown';
 import './nav/stickyNav';
 // import './nav/responsive';
 import './nav/mainMenu';

assets/sass/_theme/sections/diplomas.sass

@@ -27,6 +27,7 @@ ul.diplomas
     .dropdown-menu
         @include inset(100%, 0, auto, auto)
         background-color: black
+        display: none
         position: absolute
         @include media-breakpoint-down(md)
             // padding-left: $container-gutter-width
@@ -34,8 +35,8 @@ ul.diplomas
         &,
         a
             color: white
-            display: block
         a
+            display: block
             padding: $spacing0
             white-space: normal
             &:not(:first-child)
@@ -47,6 +48,23 @@ ul.diplomas
             &:focus
                 color: black
 
+    button[aria-expanded="true"] 
+        @include icon('caret-top', 'after')
+        + .dropdown-menu
+            display: block
+
+    
+    // TODO : style de l'icone
+    // button::after,
+    // button[aria-expanded="true"]::after
+    //     display: inline-block
+    //     font-family: Icon
+    //     font-size: .375rem
+    //     font-weight: 400
+    //     line-height: 1
+    //     margin-left: 0.3125rem
+    //     vertical-align: middle
+
 .essential
     @include grid(12, false, 0)
     flex-wrap: wrap
@@ -65,4 +83,4 @@ ul.diplomas
     dd
         grid-column: 5/13
         @include media-breakpoint-down(md)
-            padding-top: 0
+            padding-top: 0
\ No newline at end of file