working

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

+class Note {
+    constructor (note) {
+        this.note = note;
+        this.active = false;
+        this.call = this.note.querySelector('.note__call');
+        this.call.addEventListener('click', this.toggle.bind(this));
+    }
+    toggle () {
+        if (this.active) {
+            this.deactivate();
+        } else  {
+            this.activate();
+        }
+    }
+    activate () {
+        this.deactivateAllNotes();
+        this.active = true;
+        this.note.classList.add('note--active');
+        this.definePosition();
+    }
+    deactivate () {
+        this.active = false;
+        this.note.classList.remove('note--active');
+    }
+    deactivateAllNotes () {
+        window.notes.forEach(note => {
+            note.deactivate();
+        })
+    }
+    definePosition () {
+        let isOnTheLeftSide = this.note.offsetLeft < (window.innerWidth / 2)
+        if (isOnTheLeftSide) {
+            this.note.classList.add('note--left');
+            this.note.classList.remove('note--right');
+        } else {
+            this.note.classList.add('note--right');
+            this.note.classList.remove('note--left');
+        }
+    }
+}
+
+(function () {
+    window.notes = [];
+    const notes = document.querySelectorAll(".note");
+    notes.forEach(note => {
+        window.notes.push(new Note(note));
+    })
+})();
\ No newline at end of file

assets/js/theme/index.js

@@ -4,6 +4,7 @@ import './design-system/dropdowns';
 import './design-system/font';
 import './design-system/mainMenu';
 import './design-system/modal';
+import './design-system/notes';
 import './design-system/search';
 import './design-system/toc';
 import './blocks/keyFigures';

assets/sass/_theme/design-system/notes.sass

+.note
+    position: relative
+    margin-left: pxToRem($space-unit)
+    &__call
+        background: $color-background-alt
+        border-radius: 4px
+        cursor: pointer
+        display: inline-block
+        line-height: 100%
+        min-width: $minimum-accessible-size
+        padding-left: $spacing-2
+        padding-right: $spacing-2
+        padding-bottom: 0
+        text-align: center
+        @include meta
+    &__content
+        background: $color-text
+        color: $color-background
+        display: none
+        max-width: 100vw
+        padding: $spacing-3
+        position: absolute
+        width: 450px
+        z-index: 999
+        @include small
+    &--active
+        .note__call
+            background: $color-text
+            color: $color-background
+            border-bottom-left-radius: 0
+            border-bottom-right-radius: 0
+        .note__content
+            display: block
+        @include media-breakpoint-up(desktop)
+            &__content
+                border-radius: 4px
+                top: pxToRem(25)
+            &--left
+                .note__content
+                    left: 0
+                    border-top-left-radius: 0
+            &--right
+                .note__content
+                    right: 0
+                    border-top-right-radius: 0
+        @include media-breakpoint-down(desktop)
+            position: inherit
+            .note__content
+                left: 0
+                right: 0
+                margin-top: pxToRem(-$space-unit)
\ No newline at end of file

assets/sass/_theme/hugo-osuny.sass

@@ -31,6 +31,7 @@
 @import design-system/image
 @import design-system/logo
 @import design-system/nav
+@import design-system/notes
 @import design-system/pagination
 @import design-system/search
 @import design-system/table