From 5b42ecda731cf26049179beb3e95f79340d71bf1 Mon Sep 17 00:00:00 2001
From: ux-git <ux-git@users.noreply.github.com>
Date: Thu, 16 Jul 2026 23:58:27 +0200
Subject: [PATCH] tweak(ui): quick settings hover animation

---
 src/layouts/navbar/index.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/layouts/navbar/index.tsx b/src/layouts/navbar/index.tsx
index 363efeac838..2d526b4ec2c 100644
--- a/src/layouts/navbar/index.tsx
+++ b/src/layouts/navbar/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   AppBar,
   Box,
@@ -60,6 +61,8 @@ const NavBar = ({ isSupported }: NavBarType) => {
   const { t } = useAppTranslation();
   const theme = useTheme();
 
+  const [settingsAnimating, setSettingsAnimating] = useState(false);
+
   const { isAuthenticated } = useFirebaseAuth();
 
   const {
@@ -504,13 +507,28 @@ const NavBar = ({ isSupported }: NavBarType) => {
                   </Box>
                   {navBarOptions.quickSettings ? (
                     <IconButton
-                      onClick={handleQuickSettings}
+                      onClick={(e) => {
+                        handleQuickSettings(e);
+                        setSettingsAnimating(true);
+                        setTimeout(() => setSettingsAnimating(false), 250);
+                      }}
                       aria-label={t('tr_quickSettings')}
                       sx={{
                         marginRight: '-8px',
                         transition: 'background-color 50ms ease-in-out',
                         '&:hover': {
                           backgroundColor: 'var(--accent-200)',
+                          '& svg': {
+                            transform: settingsAnimating
+                              ? 'rotate(0deg)'
+                              : 'rotate(60deg)',
+                          },
+                        },
+                        '& svg': {
+                          transition: 'transform 0.25s ease-out',
+                          ...(settingsAnimating && {
+                            transform: 'rotate(0deg)',
+                          }),
                         },
                       }}
                     >