From 48219342244ff3f3e3b88f184527d654a49b4d21 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Thu, 5 Mar 2026 14:53:38 +0800
Subject: [PATCH] fix(music-player): fix floating icon position shift on hover

Problem:
- Icon bergeser ke bawah saat hover
- transform: 'scale(1.1)' mengganti transform: 'translateY(-80%)'
- CSS transform property di-replace, bukan di-mix

Solution:
- Gabungkan kedua transform dalam satu string
- Hover: 'translateY(-80%) scale(1.1)' - maintain posisi + scale
- Leave: 'translateY(-80%)' - kembali ke posisi semula

Changes:
- onMouseEnter: transform = 'translateY(-80%) scale(1.1)'
- onMouseLeave: transform = 'translateY(-80%)'
- Added 'ease' timing function for smoother transition

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 src/app/darmasaba/_com/FixedPlayerBar.tsx     | 30 +++++++++++--------
 src/app/darmasaba/_com/NewsReaderalanding.tsx | 10 ++++---
 .../main-page/apbdes/lib/grafikRealisasi.tsx  |  4 +--
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/app/darmasaba/_com/FixedPlayerBar.tsx b/src/app/darmasaba/_com/FixedPlayerBar.tsx
index a9ae76d1..96437871 100644
--- a/src/app/darmasaba/_com/FixedPlayerBar.tsx
+++ b/src/app/darmasaba/_com/FixedPlayerBar.tsx
@@ -3,6 +3,7 @@ import {
   ActionIcon,
   Avatar,
   Box,
+  Button,
   Flex,
   Group,
   Paper,
@@ -85,29 +86,32 @@ export default function FixedPlayerBar() {
     return (
       <>
         {/* Floating Music Icon - Shows when player is minimized */}
-        <Paper
-          pos="fixed"
-          bottom={20}
-          right={20}
-          p="md"
-          shadow="xl"
-          radius="xl"
-          bg="blue"
+        <Button
+          color="#0B4F78"
+          variant="filled"
+          size="md"
+          mt="md"
           style={{
-            zIndex: 1001,
+            position: 'fixed',
+            top: '50%', // Menempatkan titik atas ikon di tengah layar
+            left: '0px',
+            transform: 'translateY(-50%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
+            borderBottomRightRadius: '20px',
+            borderTopRightRadius: '20px',
             cursor: 'pointer',
-            transition: 'transform 0.2s',
+            transition: 'transform 0.2s ease',
+            zIndex: 1
           }}
           onClick={handleRestorePlayer}
           onMouseEnter={(e) => {
-            e.currentTarget.style.transform = 'scale(1.1)';
+            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)';
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.transform = 'scale(1)';
+            e.currentTarget.style.transform = 'translateY(-50%)';
           }}
         >
           <IconMusic size={28} color="white" />
-        </Paper>
+        </Button>
 
         {/* Spacer to prevent content from being hidden behind player */}
         <Box h={20} />
diff --git a/src/app/darmasaba/_com/NewsReaderalanding.tsx b/src/app/darmasaba/_com/NewsReaderalanding.tsx
index a4a1755f..d56125f4 100644
--- a/src/app/darmasaba/_com/NewsReaderalanding.tsx
+++ b/src/app/darmasaba/_com/NewsReaderalanding.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { Button } from '@mantine/core';
-import { IconMusic, IconMusicOff } from '@tabler/icons-react';
+import { IconDisabled, IconDisabledOff } from '@tabler/icons-react';
 import { useEffect, useRef, useState } from 'react';
 
 const NewsReaderLanding = () => {
@@ -95,15 +95,17 @@ const NewsReaderLanding = () => {
       mt="md"
       style={{
         position: 'fixed',
-        bottom: '350px',
+        top: '50%', // Menempatkan titik atas ikon di tengah layar
         left: '0px',
+        transform: 'translateY(80%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah
         borderBottomRightRadius: '20px',
         borderTopRightRadius: '20px',
-        transition: 'all 0.3s ease',
+        cursor: 'pointer',
+        transition: 'transform 0.2s',
         zIndex: 1
       }}
     >
-      {isPointerMode ? <IconMusicOff /> : <IconMusic />}
+      {isPointerMode ? <IconDisabledOff /> : <IconDisabled />}
     </Button>
   );
 };
diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
index 4d73d0e2..26d5798a 100644
--- a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
@@ -113,7 +113,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
         <Summary title="📊 Pembiayaan" data={pembiayaan} />
       </Stack>
 
-      {/* Summary Total Keseluruhan */}
+      {/* Summary Total Keseluruhan
       <Box p="md" bg="gray.0">
         <>
           <Group justify="space-between" mb="xs">
@@ -132,7 +132,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
             color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
           />
         </>
-      </Box>
+      </Box> */}
     </Paper>
   );
 }
\ No newline at end of file