diff --git a/src/entities/home/lib/use-favorite-info.ts b/src/entities/home/lib/use-favorite-info.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/entities/home/ui/favorite-wrapper.tsx b/src/entities/home/ui/favorite-wrapper.tsx index da84818..85b3402 100644 --- a/src/entities/home/ui/favorite-wrapper.tsx +++ b/src/entities/home/ui/favorite-wrapper.tsx @@ -84,7 +84,7 @@ export const FavoriteWrapper = ({ }; const makeAddFavoriteItem = () => { let rs = []; - if(!editMode){ + if(!editMode && usingType === 'menu'){ rs.push(
{ - useSetMenuOn(true); - useSetFavoriteEdit(true); - return ( - <> - ); -}; \ No newline at end of file diff --git a/src/entities/menu/model/types.ts b/src/entities/menu/model/types.ts index 9b5258e..7461e70 100644 --- a/src/entities/menu/model/types.ts +++ b/src/entities/menu/model/types.ts @@ -8,12 +8,4 @@ export interface MenuItem { path?: string; subMenu?: Array }; -export interface MenuCategoryProps { - menuId?: string; - menuIcon?: string; - menuName?: string; - subMenu?: Array; - setMenuOn?: (menuOn: boolean) => void; - editMode?: boolean; - setChangeMenuId: (menuId?: string) => void; -}; + diff --git a/src/entities/menu/ui/menu-category.tsx b/src/entities/menu/ui/menu-category.tsx index 87c9523..888ba8d 100644 --- a/src/entities/menu/ui/menu-category.tsx +++ b/src/entities/menu/ui/menu-category.tsx @@ -1,11 +1,23 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { MenuCategoryProps } from '../model/types'; import { useStore } from '@/shared/model/store'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { UserFavorite } from '@/entities/user/model/types'; -import { useEffect, useState } from 'react'; +import { RefObject, useEffect, useState } from 'react'; import { useLocation } from 'react-router'; import { PATHS } from '@/shared/constants/paths'; +import { MenuItem } from '../model/types'; + +export interface MenuCategoryProps { + menuId?: string; + menuIcon?: string; + menuName?: string; + subMenu?: Array; + setMenuOn?: (menuOn: boolean) => void; + editMode?: boolean; + setChangeMenuId: (menuId?: string) => void; + buttonRefs: RefObject>; + itemIndex: number; +}; export const MenuCategory = ({ menuId, @@ -14,7 +26,9 @@ export const MenuCategory = ({ subMenu, setMenuOn, editMode, - setChangeMenuId + setChangeMenuId, + buttonRefs, + itemIndex }: MenuCategoryProps) => { const { navigate } = useNavigate(); const location = useLocation(); @@ -123,7 +137,10 @@ export const MenuCategory = ({ return ( <> -
+
{ buttonRefs.current[itemIndex] = element } } + >
{ menuName } diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx index 24e609f..8844472 100644 --- a/src/pages/home/home-page.tsx +++ b/src/pages/home/home-page.tsx @@ -15,7 +15,6 @@ import { useSetFooterMode, useSetFooterCurrentPage } from '@/widgets/sub-layout/use-sub-layout'; -import { HiddenPage } from '@/entities/home/ui/hidden-page'; export let homeReloadKey = 1; export const setHomeReloadKey = () => { @@ -40,8 +39,7 @@ export const HomePage = () => { const [bottomBannerOn, setBottomBannerOn] = useState(false); const [authRegisterOn, setAuthRegisterOn] = useState(false); const [loginSuccess, setLoginSuccess] = useState(true); - const [homeEditMode, setHomeEditMode] = useState(false); - + const checkBottomBannerOpen = () => { if(!!bannerToday){ bannerToday = bannerToday.toString(); @@ -92,8 +90,6 @@ export const HomePage = () => { <> @@ -112,9 +108,6 @@ export const HomePage = () => { authRegisterOn={ authRegisterOn } > } - { (!!homeEditMode) && - - } ); }; diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index dbea87d..3ff676c 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -123,6 +123,7 @@ main { top: calc(env(safe-area-inset-top)); margin-top: 0; width: 100%; + overflow-y: auto; } .menu-category{ position: relative; diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index 415e0a3..426be1b 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -9,6 +9,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItem import { useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router'; import { setHomeReloadKey } from '@/pages/home/home-page'; +import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU'; export interface MenuProps { menuOn: boolean; @@ -20,6 +21,7 @@ export const Menu = ({ setMenuOn, favoriteEdit }: MenuProps) => { + const userMids = useStore.getState().UserStore.userMids; const location = useLocation(); const { navigate } = useNavigate(); const userInfo = useStore((state) => state.UserStore.userInfo); @@ -27,17 +29,26 @@ export const Menu = ({ const [shortBtns, setShortBtns] = useState>>([]); const [editMode, setEditMode] = useState(false); const [changeMenuId, setChangeMenuId] = useState(); + const [shortBtnIdx, setShortBtnIdx] = useState(0); + const [shortBoxOnScroll, setShortBoxOnScroll] = useState(false); + const [menuListOnScroll, setMenuListOnScroll] = useState(false); const buttonRefs = useRef>([]); const scrollRef = useRef(null); + const shortBtnScrollRef = useRef(null); const onClickToNavigate = (path: string) => { onClickToMenuClose(); navigate(path); }; const onClickToMenuNavigate = (menuId: string, index: number) => { - //let rect = buttonRefs.current[index]?.getBoundingClientRect(); - //console.log(rect?.top) + let tops = [0, 255, 410, 565, 720, 875, 1030, 1500]; + + scrollRef.current?.scrollTo({ + top: tops[index], + left: 0, + behavior: 'smooth' + }); /* buttonRefs.current[index]?.scrollIntoView({ behavior: 'smooth' @@ -69,6 +80,8 @@ export const Menu = ({ setMenuOn={ setMenuOn } editMode={ editMode } setChangeMenuId= { setChangeMenuId } + buttonRefs={ buttonRefs } + itemIndex={ i } /> ); } @@ -86,6 +99,97 @@ export const Menu = ({ } setShortBtns(shortList); }; + + const shortBtnScroll = (e: any) => { + + let x = shortBtnScrollRef.current?.scrollLeft; + let top = 0; + if(x){ + if(x < 85){ + top = 0; + setShortBtnIdx(0); + } + else if(x < 170){ + top = 255; + setShortBtnIdx(1); + } + else if(x < 275){ + top = 410; + setShortBtnIdx(2); + } + else if(x < 360){ + top = 565; + setShortBtnIdx(3); + } + else if(x < 450){ + top = 720; + setShortBtnIdx(4); + } + else{ + top = 875; + setShortBtnIdx(5); + } + } + if(shortBoxOnScroll){ + scrollRef.current?.scrollTo({ + top: top, + left: 0, + behavior: 'smooth' + }); + } + }; + + const menuListScroll = () => { + if(menuListOnScroll){ + let y = scrollRef.current?.scrollTop; + let left = 0; + if(y){ + if(y < 255){ + left = 0; + } + else if(y < 410){ + left = 85; + } + else if(y < 565){ + left = 170; + } + else if(y < 720){ + left = 275; + } + else if(y < 875){ + left = 360; + } + else if(y < 1030){ + left = 450; + } + else{ + left = 450; + } + } + shortBtnScrollRef.current?.scrollTo({ + top: 0, + left: left, + behavior: 'smooth' + }); + } + /* + + */ + }; + const shortBoxTouchStart = () => { + setShortBoxOnScroll(true); + setMenuListOnScroll(false); + }; + const shortBoxTouchEnd = () => { + + }; + const menuListTouchStart = () => { + setShortBoxOnScroll(false); + setMenuListOnScroll(true); + }; + const menuListTouchEnd = () => { + + }; useEffect(() => { shortBtnsSetting(); @@ -110,7 +214,7 @@ export const Menu = ({
- { 'nictest00m' } + { userMids[0] } (madzoneviper)
@@ -150,12 +254,18 @@ export const Menu = ({
-
+
{ shortBtns.map((value, index) => ( onClickToMenuNavigate(value.menuId, value.index) } >{ value.menuName } )) @@ -166,6 +276,9 @@ export const Menu = ({
{ getMenuCategory() }