feat: add chats dropdown menu

static/script.js

@@ -117,3 +117,49 @@ function checkkey(e) {
     else if (keycode == 39) { next(); }
     else if (keycode == 27) { dropdown_hide(); }
 }
+
+
+function chatsDropdownMenu() {
+    return {
+        items: ["IRC", "Matrix", "Discord", "Telegram"],
+        currentIndex: 0,
+        isOpen: false,
+        intervalId: null,
+
+        init() {
+            console.debug("init");
+            this.startRotation();
+        },
+
+        startRotation() {
+            if (this.intervalId != null) {
+                console.debug("Already started");
+            } else {
+                this.intervalId = setInterval(() => {
+                    this.currentIndex = (this.currentIndex + 1) % this.items.length;
+                }, 3000);
+                console.debug("start");
+            }
+        },
+
+        stopRotation() {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+            console.debug("stop");
+        },
+
+        pause() {
+            this.stopRotation();
+            this.isOpen = true;
+        },
+        resume() {
+            this.startRotation();
+            this.isOpen = false;
+        },
+        get listItems() {
+            const current = this.items[this.currentIndex];
+            const others = this.items.filter((_, i) => i !== this.currentIndex);
+            return [current, ...others];
+        }
+    }
+}

static/style.scss

@@ -155,6 +155,66 @@ body {
     }
 }
 
+#chats-dropdown {
+    position: relative;
+    width: 250px;
+    cursor: pointer;
+
+    .wrapper {
+        position: relative;
+        height: 40px;
+        /* overflow: hidden; */
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        background: #fff;
+    }
+    .header,
+    .list {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        margin: 0;
+        padding: 8px 12px;
+        background: #fff;
+        transition: transform 0.25s ease, opacity 0.2s ease;
+        list-style: none;
+    }
+    .header {
+        top: 0;
+        transform: translateY(0);
+        opacity: 1;
+        z-index: 2;
+
+        &.hide {
+            transform: translateY(100%);
+            opacity: 0;
+        }
+    }
+    .list {
+        top: 0;
+        transform: translateY(-100%);
+        opacity: 0;
+        z-index: 1;
+        padding: 0;
+
+        &.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    .list li {
+        padding: 8px 12px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+        &:hover {
+            background-color: #e9e9e9;
+        }
+    }
+}
+
 /*  ARTICLE  */
 
 #article {

templates/tmpl/_header.htm

@@ -8,4 +8,5 @@
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
     <script src="{{ url_for('static', filename='script.min.js') }}"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>

templates/tmpl/_menu.htm

@@ -18,7 +18,28 @@
     <a href="https://board.kolibrios.org">{{ _('menu:forum') }}</a>
     <a href="https://wiki.kolibrios.org/wiki/Main_Page/{{ g.locale }}">{{ _('menu:wiki') }}</a>
     <a href="https://git.kolibrios.org">Git</a>
-    
+
+    <div x-data="chatsDropdownMenu()"
+         x-init="init"
+         @mouseenter="pause"
+         @mouseleave="resume"
+         id="chats-dropdown">
+
+        <div class="wrapper">
+            <div class="header"
+                 :class="{ 'hide': isOpen }"
+                 x-text="items[currentIndex]">
+            </div>
+
+            <ul class="list"
+                :class="{ 'show': isOpen }">
+                <template x-for="(item, index) in listItems" :key="index">
+                    <li x-text="item"></li>
+                </template>
+            </ul>
+        </div>
+    </div>
+
     <button onclick="dropdown_show(this)" id="lang-butt">
         <img src="{{ url_for('static', filename='img/flags/%s.png' % g.locale) }}" alt="{{ g.locale }}">
     </button>