From 9a0b11fabd292501a18044ed8db7d2907e75b6ea Mon Sep 17 00:00:00 2001
From: hasan-sh <hasansh343@gmail.com>
Date: Fri, 10 Nov 2023 19:03:51 +0100
Subject: [PATCH] toggle between up/downwards arrow #4718

---
 templates/incl/menubar.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/templates/incl/menubar.html b/templates/incl/menubar.html
index acb588c982f..af14aad2a52 100644
--- a/templates/incl/menubar.html
+++ b/templates/incl/menubar.html
@@ -46,10 +46,17 @@
             <div class="flex flex-row gap-2 items-center">
                 <i class="fas fa-fw fa-globe"></i>
                 <span class="hidden lg:flex">{{ current_language().sym }}</span>
-                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                <svg id="language-arrow" class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
             </div>
           </a>
-          <div class="dropdown-menu dropdown-blue" id="language-dropdown" style="display: none;">
+          <div class="dropdown-menu dropdown-blue" id="language-dropdown" style="display: none;"
+                _="on mutation of @style
+                    set arrow to #language-arrow
+                    if *display == 'none'
+                        remove .rotate-180 from arrow
+                    else if not arrow.classList.contains('rotate-180')
+                        add .rotate-180 to arrow
+                    end">
               <div class="mb-4">
                   <input id="search_language" placeholder="{{_('search')}}" class="border text-black border-gray-500 rounded h-8 px-2 w-full">
               </div>