Skip to content

Commit 59a5626

Browse files
MeowmerryMeowmerry
committed
Responsive design error (tabs) | Re design new UI
1 parent e087238 commit 59a5626

File tree

13 files changed

+356
-200
lines changed

13 files changed

+356
-200
lines changed

‎src/components/NavigationComponents/CollectionTab/CollectionTabEnslaved.tsx‎

Lines changed: 168 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useEffect } from 'react';
2-
3-
import { Button } from 'antd';
1+
import { useEffect, useState } from 'react';
2+
import { Button, Dropdown, Menu } from 'antd';
3+
import { DownOutlined } from '@ant-design/icons';
44
import { useDispatch, useSelector } from 'react-redux';
55
import { useNavigate } from 'react-router-dom';
66

@@ -34,6 +34,8 @@ import {
3434
const CollectionTabEnslaved = () => {
3535
const navigate = useNavigate();
3636
const dispatch: AppDispatch = useDispatch();
37+
const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 992);
38+
3739
const { blocksPeople } = useSelector(
3840
(state: RootState) => state.getPeopleEnlavedDataSetCollection,
3941
);
@@ -57,6 +59,14 @@ const CollectionTabEnslaved = () => {
5759
}
5860
}, [styleName, currentBlockName, dispatch]);
5961

62+
useEffect(() => {
63+
const handleResize = () => {
64+
setIsDesktop(window.innerWidth >= 992);
65+
};
66+
window.addEventListener('resize', handleResize);
67+
return () => window.removeEventListener('resize', handleResize);
68+
}, []);
69+
6070
const handlePageNavigation = (page: number, blockName: string) => {
6171
if (page === 1) {
6272
dispatch(setIsFilter(false));
@@ -80,99 +90,164 @@ const CollectionTabEnslaved = () => {
8090
dispatch(setFilterObject(filtersObj));
8191
};
8292

83-
return (
84-
<div
85-
className="navbar-wrapper"
86-
style={{ display: window.innerWidth < 768 ? 'none' : 'block' }}
87-
>
88-
<nav className="nav-button-enslaved">
89-
{blocksPeople.map((items: BlockCollectionProps, index: number) => {
90-
const { label: block } = items;
91-
const blockName = (block as LabelFilterMeneList)[languageValue];
92-
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
93-
const buttonIndex = index + 1;
94-
const isActive =
95-
currentPageBlockName ===
96-
checkBlockCollectionNameForEnslaved(
97-
newBlockName.toLocaleLowerCase(),
98-
);
99-
const isCurrentPage = currentEnslavedPage === buttonIndex;
100-
101-
// Base button styles
102-
const baseButtonStyle = {
103-
width: '75px',
104-
margin: '5px',
105-
cursor: 'pointer',
106-
textTransform: 'unset' as const,
107-
backgroundColor: getColorBTNBackgroundEnslaved(styleName!),
108-
boxShadow: isActive
109-
? getColorBoxShadowEnslaved(styleName!)
110-
: 'none',
111-
color: isActive ? 'white' : getColorTextCollection(styleName!),
112-
fontWeight: isActive ? 'bold' : 600,
113-
fontSize: '0.80rem',
114-
border: isCurrentPage
115-
? `2px solid ${getColorBTNBackgroundEnslaved(styleName!)}`
116-
: '1px solid transparent',
117-
};
118-
119-
// Event handlers for hover effects
120-
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
121-
const target = e.currentTarget;
122-
target.style.backgroundColor = getColorHoverBackgroundCollection(
123-
styleName!,
124-
);
125-
target.style.color = getColorBTNVoyageDatasetBackground(styleName!);
126-
};
93+
// Get current active block name for dropdown label
94+
const getCurrentBlockName = () => {
95+
const currentBlock = blocksPeople[currentEnslavedPage - 1];
96+
if (currentBlock) {
97+
const { label: block } = currentBlock;
98+
return (block as LabelFilterMeneList)[languageValue];
99+
}
100+
return 'Select Page';
101+
};
127102

128-
const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
129-
const target = e.currentTarget;
130-
target.style.backgroundColor = getColorBTNBackgroundEnslaved(
131-
styleName!,
132-
);
133-
target.style.color = isActive
134-
? 'white'
135-
: getColorTextCollection(styleName!);
136-
};
137-
138-
const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
139-
const target = e.currentTarget;
140-
target.style.backgroundColor = getColorHoverBackgroundCollection(
141-
styleName!,
142-
);
143-
target.style.color = getColorBTNVoyageDatasetBackground(styleName!);
144-
target.style.outline = 'none';
145-
};
146-
147-
const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
148-
const target = e.currentTarget;
149-
target.style.backgroundColor = getColorBTNBackgroundEnslaved(
150-
styleName!,
103+
// Create menu items for dropdown
104+
const menuItems = blocksPeople.map(
105+
(items: BlockCollectionProps, index: number) => {
106+
const { label: block } = items;
107+
const blockName = (block as LabelFilterMeneList)[languageValue];
108+
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
109+
const buttonIndex = index + 1;
110+
const isActive =
111+
currentPageBlockName ===
112+
checkBlockCollectionNameForEnslaved(newBlockName.toLocaleLowerCase());
113+
114+
return {
115+
key: `${newBlockName}-${buttonIndex}`,
116+
label: blockName,
117+
onClick: () => handlePageNavigation(buttonIndex, newBlockName),
118+
style: {
119+
backgroundColor: isActive
120+
? getColorBTNBackgroundEnslaved(styleName!)
121+
: 'transparent',
122+
color: isActive ? 'white' : getColorTextCollection(styleName!),
123+
fontWeight: isActive ? 'bold' : 600,
124+
},
125+
};
126+
},
127+
);
128+
129+
const menu = <Menu items={menuItems} />;
130+
131+
// Desktop version - vertical buttons
132+
if (isDesktop) {
133+
return (
134+
<div className="navbar-wrapper">
135+
<nav className="nav-button-enslaved">
136+
{blocksPeople.map((items: BlockCollectionProps, index: number) => {
137+
const { label: block } = items;
138+
const blockName = (block as LabelFilterMeneList)[languageValue];
139+
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
140+
const buttonIndex = index + 1;
141+
const isActive =
142+
currentPageBlockName ===
143+
checkBlockCollectionNameForEnslaved(
144+
newBlockName.toLocaleLowerCase(),
145+
);
146+
const isCurrentPage = currentEnslavedPage === buttonIndex;
147+
148+
const baseButtonStyle = {
149+
width: '75px',
150+
margin: '5px',
151+
cursor: 'pointer',
152+
textTransform: 'unset' as const,
153+
backgroundColor: getColorBTNBackgroundEnslaved(styleName!),
154+
boxShadow: isActive
155+
? getColorBoxShadowEnslaved(styleName!)
156+
: 'none',
157+
color: isActive ? 'white' : getColorTextCollection(styleName!),
158+
fontWeight: isActive ? 'bold' : 600,
159+
fontSize: '0.80rem',
160+
border: isCurrentPage
161+
? `2px solid ${getColorBTNBackgroundEnslaved(styleName!)}`
162+
: '1px solid transparent',
163+
};
164+
165+
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
166+
const target = e.currentTarget;
167+
target.style.backgroundColor = getColorHoverBackgroundCollection(
168+
styleName!,
169+
);
170+
target.style.color = getColorBTNVoyageDatasetBackground(
171+
styleName!,
172+
);
173+
};
174+
175+
const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
176+
const target = e.currentTarget;
177+
target.style.backgroundColor = getColorBTNBackgroundEnslaved(
178+
styleName!,
179+
);
180+
target.style.color = isActive
181+
? 'white'
182+
: getColorTextCollection(styleName!);
183+
};
184+
185+
const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
186+
const target = e.currentTarget;
187+
target.style.backgroundColor = getColorHoverBackgroundCollection(
188+
styleName!,
189+
);
190+
target.style.color = getColorBTNVoyageDatasetBackground(
191+
styleName!,
192+
);
193+
target.style.outline = 'none';
194+
};
195+
196+
const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
197+
const target = e.currentTarget;
198+
target.style.backgroundColor = getColorBTNBackgroundEnslaved(
199+
styleName!,
200+
);
201+
target.style.color = isActive
202+
? 'white'
203+
: getColorTextCollection(styleName!);
204+
};
205+
206+
return (
207+
<Button
208+
key={`${newBlockName}-${buttonIndex}`}
209+
onClick={() => handlePageNavigation(buttonIndex, newBlockName)}
210+
className="nav-button-page"
211+
type={isCurrentPage ? 'primary' : 'default'}
212+
style={baseButtonStyle}
213+
onMouseEnter={handleMouseEnter}
214+
onMouseLeave={handleMouseLeave}
215+
onFocus={handleFocus}
216+
onBlur={handleBlur}
217+
>
218+
{blockName}
219+
</Button>
151220
);
152-
target.style.color = isActive
153-
? 'white'
154-
: getColorTextCollection(styleName!);
155-
};
156-
157-
return (
158-
<Button
159-
key={`${newBlockName}-${buttonIndex}`}
160-
onClick={() => handlePageNavigation(buttonIndex, newBlockName)}
161-
className="nav-button-page"
162-
type={isCurrentPage ? 'primary' : 'default'}
163-
style={baseButtonStyle}
164-
onMouseEnter={handleMouseEnter}
165-
onMouseLeave={handleMouseLeave}
166-
onFocus={handleFocus}
167-
onBlur={handleBlur}
168-
>
169-
{blockName}
170-
</Button>
171-
);
172-
})}
173-
</nav>
221+
})}
222+
</nav>
223+
</div>
224+
);
225+
}
226+
227+
// Mobile version - dropdown menu
228+
return (
229+
<div className="navbar-wrapper-mobile-enslaved">
230+
<Dropdown
231+
overlay={menu}
232+
trigger={['click']}
233+
placement="bottomRight"
234+
getPopupContainer={(trigger) => trigger.parentElement || document.body}
235+
overlayStyle={{ zIndex: 10001 }}
236+
>
237+
<Button
238+
className="nav-dropdown-button-enslaved"
239+
style={{
240+
backgroundColor: getColorBTNBackgroundEnslaved(styleName!),
241+
color: 'white',
242+
fontWeight: 600,
243+
border: 'none',
244+
}}
245+
>
246+
{getCurrentBlockName()} <DownOutlined />
247+
</Button>
248+
</Dropdown>
174249
</div>
175250
);
176251
};
177252

178-
export default CollectionTabEnslaved;
253+
export default CollectionTabEnslaved;

‎src/components/NavigationComponents/Header/CustomHeaderTable.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,12 @@ const CustomHeaderTable = (props: MyCustomHeaderProps) => {
8989
| React.TouchEvent<HTMLButtonElement>,
9090
) => {
9191
props.setSort(order, event.shiftKey);
92-
console.log({ order });
9392

9493
// ✅ Use order_by fields from context (set by generateColumnDef)
9594
const sortingFields = props.column.colDef?.context?.fieldToSort || [];
9695

9796
if (sortingFields.length > 0) {
9897
const orderBy = createSortOrder(order, sortingFields);
99-
console.log({ orderBy });
10098
dispatch(setSortColumn(orderBy));
10199
}
102100
},

0 commit comments

Comments
 (0)