Added a hook for the scrolling

resources/js/game/components/actions/partials/actions/actions.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from 'react';
+
+import { IconSection } from '../icon-section/icon-section';
+import MonsterSection from '../monster-section/monster-section';
+import { useManageMonsterStatSectionVisibility } from '../monster-stat-section/hooks/use-manage-monster-stat-section-visibility';
+import { MonsterStatSection } from '../monster-stat-section/monster-stat-section';
+import { useScrollIconMenu } from './hooks/use-scroll-icon-menu';
+
+import Card from 'ui/cards/card';
+
+const Actions = (): ReactNode => {
+  const { showMonsterStatsSection, showMonsterStats } =
+    useManageMonsterStatSectionVisibility();
+
+  const { scrollY, isMobile } = useScrollIconMenu();
+
+  return (
+    <Card>
+      <div className="w-full flex flex-col lg:flex-row">
+        <div className="relative">
+          {isMobile ? (
+            <div>
+              <IconSection />
+            </div>
+          ) : (
+            <div
+              style={{
+                position: 'absolute',
+                top: `${scrollY + 10}px`,
+                left: '10px',
+                transition: 'top 0.2s',
+              }}
+            >
+              <IconSection />
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-center lg:items-start w-full">
+          {showMonsterStatsSection ? (
+            <MonsterStatSection />
+          ) : (
+            <MonsterSection show_monster_stats={showMonsterStats} />
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default Actions;

resources/js/game/components/actions/partials/actions/hooks/definitions/use-scroll-icon-menu-definition.ts

@@ -0,0 +1,4 @@
+export default interface UseScrollIconMenuDefinition {
+  scrollY: number;
+  isMobile: boolean;
+}

resources/js/game/components/actions/partials/actions/hooks/types/use-scroll-icon-menu-state.ts

@@ -0,0 +1,4 @@
+export default interface UseScrollIconMenuState {
+  scrollY: number;
+  isMobile: boolean;
+}

resources/js/game/components/actions/partials/actions/hooks/use-scroll-icon-menu.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import UseScrollIconMenuDefinition from './definitions/use-scroll-icon-menu-definition';
+import UseScrollIconMenuState from './types/use-scroll-icon-menu-state';
+
+export const useScrollIconMenu = (): UseScrollIconMenuDefinition => {
+  const [scrollY, setScrollY] = useState<UseScrollIconMenuState['scrollY']>(0);
+  const [isMobile, setIsMobile] =
+    useState<UseScrollIconMenuState['isMobile']>(false);
+
+  const handleScroll = () => setScrollY(window.scrollY);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  return {
+    scrollY,
+    isMobile,
+  };
+};

resources/js/game/components/actions/partials/icon-section/components/motion-div.tsx

@@ -25,7 +25,7 @@ export const MotionDiv = (props: MotionDevProps): ReactNode => {
       transition={{ duration: 0.5 }}
       style={{
         position: 'absolute',
-        top: window.innerWidth <= 900 ? '0' : '-25px',
+        top: window.innerWidth <= 900 ? '4rem' : '-25px',
         left: motionLeftPositionHelper(),
         zIndex: 10,
       }}

resources/js/game/components/game-card.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import Actions from './actions/actions';
+import Actions from './actions/partials/actions/actions';
 
 export const GameCard = (): ReactNode => {
   return <Actions />;