Skip to content

Commit e087238

Browse files
MeowmerryMeowmerry
committed
Tabs don't show up on voyages page around certain break points
1 parent 5c71cec commit e087238

File tree

3 files changed

+287
-156
lines changed

3 files changed

+287
-156
lines changed

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

Lines changed: 153 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Button } from 'antd';
1+
import { Button, Dropdown, Menu } from 'antd';
2+
import { DownOutlined } from '@ant-design/icons';
23
import { useDispatch, useSelector } from 'react-redux';
34
import { useNavigate } from 'react-router-dom';
5+
import { useState } from 'react';
46

57
import { setPathNameVoyages } from '@/redux/getDataPathNameSlice';
68
import { setFilterObject, setIsFilter } from '@/redux/getFilterSlice';
@@ -27,6 +29,8 @@ import {
2729
const CollectionTabVoyages = () => {
2830
const dispatch: AppDispatch = useDispatch();
2931
const navigate = useNavigate();
32+
const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 992);
33+
3034
const { styleName, blocks } = useSelector(
3135
(state: RootState) => state.getDataSetCollection,
3236
);
@@ -38,6 +42,15 @@ const CollectionTabVoyages = () => {
3842
(state: RootState) => state.getScrollPage as CurrentPageInitialState,
3943
);
4044

45+
// Handle window resize
46+
useState(() => {
47+
const handleResize = () => {
48+
setIsDesktop(window.innerWidth >= 992);
49+
};
50+
window.addEventListener('resize', handleResize);
51+
return () => window.removeEventListener('resize', handleResize);
52+
});
53+
4154
const handlePageNavigation = (page: number, blockName: string) => {
4255
dispatch(setCurrentPage(page));
4356
if (page === 1) {
@@ -99,92 +112,149 @@ const CollectionTabVoyages = () => {
99112
localStorage.setItem('filterObject', filterObjectString);
100113
};
101114

102-
return (
103-
<div
104-
className="navbar-wrapper"
105-
style={{ display: window.innerWidth < 768 ? 'none' : 'block' }}
106-
>
107-
<nav className="nav-button">
108-
{blocks.map((items: BlockCollectionProps, index: number) => {
109-
const { label: block } = items;
110-
const blockName = (block as LabelFilterMeneList)[languageValue];
111-
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
112-
const buttonIndex = index + 1;
113-
const isActive =
114-
currentVoyageBlockName ===
115-
checkBlockCollectionNameForVoyages(
116-
newBlockName.toLocaleLowerCase(),
115+
// Get current active block name for dropdown label
116+
const getCurrentBlockName = () => {
117+
const currentBlock = blocks[currentPage - 1];
118+
if (currentBlock) {
119+
const { label: block } = currentBlock;
120+
return (block as LabelFilterMeneList)[languageValue];
121+
}
122+
return 'Select Page';
123+
};
124+
125+
// Create menu items for dropdown
126+
const menuItems = blocks.map((items: BlockCollectionProps, index: number) => {
127+
const { label: block } = items;
128+
const blockName = (block as LabelFilterMeneList)[languageValue];
129+
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
130+
const buttonIndex = index + 1;
131+
const isActive =
132+
currentVoyageBlockName ===
133+
checkBlockCollectionNameForVoyages(newBlockName.toLocaleLowerCase());
134+
135+
return {
136+
key: `${newBlockName}-${buttonIndex}`,
137+
label: blockName,
138+
onClick: () => handlePageNavigation(buttonIndex, newBlockName),
139+
style: {
140+
backgroundColor: isActive ? getColorBackground(styleName) : 'transparent',
141+
color: isActive ? 'white' : getColorTextCollection(styleName),
142+
fontWeight: isActive ? 'bold' : 600,
143+
},
144+
};
145+
});
146+
147+
const menu = <Menu items={menuItems} />;
148+
149+
// Desktop version - vertical buttons
150+
if (isDesktop) {
151+
return (
152+
<div className="navbar-wrapper">
153+
<nav className="nav-button">
154+
{blocks.map((items: BlockCollectionProps, index: number) => {
155+
const { label: block } = items;
156+
const blockName = (block as LabelFilterMeneList)[languageValue];
157+
const newBlockName = blockName.toLowerCase().replace(/\s/g, '');
158+
const buttonIndex = index + 1;
159+
const isActive =
160+
currentVoyageBlockName ===
161+
checkBlockCollectionNameForVoyages(
162+
newBlockName.toLocaleLowerCase(),
163+
);
164+
const isCurrentPage = currentPage === buttonIndex;
165+
166+
const baseButtonStyle = {
167+
margin: '5px',
168+
cursor: 'pointer',
169+
textTransform: 'unset' as const,
170+
backgroundColor: getColorBackground(styleName),
171+
boxShadow: isActive ? getColorBoxShadow(styleName) : 'none',
172+
color: isActive ? 'white' : getColorTextCollection(styleName),
173+
fontWeight: isActive ? 'bold' : 600,
174+
fontSize: '0.80rem',
175+
border: isCurrentPage
176+
? `2px solid ${getColorBackground(styleName)}`
177+
: '1px solid transparent',
178+
};
179+
180+
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
181+
const target = e.currentTarget;
182+
target.style.backgroundColor = getColorHoverBackgroundCollection(
183+
styleName!,
184+
);
185+
target.style.color = getColorBTNVoyageDatasetBackground(styleName);
186+
};
187+
188+
const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
189+
const target = e.currentTarget;
190+
target.style.backgroundColor = getColorBackground(styleName);
191+
target.style.color = isActive
192+
? 'white'
193+
: getColorTextCollection(styleName);
194+
};
195+
196+
const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
197+
const target = e.currentTarget;
198+
target.style.backgroundColor = getColorHoverBackgroundCollection(
199+
styleName!,
200+
);
201+
target.style.color = getColorBTNVoyageDatasetBackground(styleName);
202+
target.style.outline = 'none';
203+
};
204+
205+
const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
206+
const target = e.currentTarget;
207+
target.style.backgroundColor = getColorBackground(styleName);
208+
target.style.color = isActive
209+
? 'white'
210+
: getColorTextCollection(styleName);
211+
};
212+
213+
return (
214+
<Button
215+
key={`${newBlockName}-${buttonIndex}`}
216+
onClick={() => handlePageNavigation(buttonIndex, newBlockName)}
217+
className="nav-button-page"
218+
type={isCurrentPage ? 'primary' : 'default'}
219+
style={baseButtonStyle}
220+
onMouseEnter={handleMouseEnter}
221+
onMouseLeave={handleMouseLeave}
222+
onFocus={handleFocus}
223+
onBlur={handleBlur}
224+
>
225+
<div style={{ textAlign: 'center' }}>{blockName}</div>
226+
</Button>
117227
);
118-
const isCurrentPage = currentPage === buttonIndex;
228+
})}
229+
</nav>
230+
</div>
231+
);
232+
}
119233

120-
// Base button styles
121-
const baseButtonStyle = {
122-
margin: '5px',
123-
cursor: 'pointer',
124-
textTransform: 'unset' as const,
234+
// Mobile version - dropdown menu
235+
return (
236+
<div className="navbar-wrapper-mobile">
237+
<Dropdown
238+
overlay={menu}
239+
trigger={['click']}
240+
placement="bottomRight"
241+
getPopupContainer={(trigger) => trigger.parentElement || document.body}
242+
overlayStyle={{ zIndex: 10001 }}
243+
>
244+
<Button
245+
className="nav-dropdown-button"
246+
style={{
125247
backgroundColor: getColorBackground(styleName),
126-
boxShadow: isActive ? getColorBoxShadow(styleName) : 'none',
127-
color: isActive ? 'white' : getColorTextCollection(styleName),
128-
fontWeight: isActive ? 'bold' : 600,
129-
fontSize: '0.80rem',
130-
border: isCurrentPage
131-
? `2px solid ${getColorBackground(styleName)}`
132-
: '1px solid transparent',
133-
};
134-
135-
// Event handlers for hover effects
136-
const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
137-
const target = e.currentTarget;
138-
target.style.backgroundColor = getColorHoverBackgroundCollection(
139-
styleName!,
140-
);
141-
target.style.color = getColorBTNVoyageDatasetBackground(styleName);
142-
};
143-
144-
const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
145-
const target = e.currentTarget;
146-
target.style.backgroundColor = getColorBackground(styleName);
147-
target.style.color = isActive
148-
? 'white'
149-
: getColorTextCollection(styleName);
150-
};
151-
152-
const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
153-
const target = e.currentTarget;
154-
target.style.backgroundColor = getColorHoverBackgroundCollection(
155-
styleName!,
156-
);
157-
target.style.color = getColorBTNVoyageDatasetBackground(styleName);
158-
target.style.outline = 'none';
159-
};
160-
161-
const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
162-
const target = e.currentTarget;
163-
target.style.backgroundColor = getColorBackground(styleName);
164-
target.style.color = isActive
165-
? 'white'
166-
: getColorTextCollection(styleName);
167-
};
168-
169-
return (
170-
<Button
171-
key={`${newBlockName}-${buttonIndex}`}
172-
onClick={() => handlePageNavigation(buttonIndex, newBlockName)}
173-
className="nav-button-page"
174-
type={isCurrentPage ? 'primary' : 'default'}
175-
style={baseButtonStyle}
176-
onMouseEnter={handleMouseEnter}
177-
onMouseLeave={handleMouseLeave}
178-
onFocus={handleFocus}
179-
onBlur={handleBlur}
180-
>
181-
<div style={{ textAlign: 'center' }}>{blockName}</div>
182-
</Button>
183-
);
184-
})}
185-
</nav>
248+
color: 'white',
249+
fontWeight: 600,
250+
border: 'none',
251+
}}
252+
>
253+
{getCurrentBlockName()} <DownOutlined />
254+
</Button>
255+
</Dropdown>
186256
</div>
187257
);
188258
};
189259

190-
export default CollectionTabVoyages;
260+
export default CollectionTabVoyages;

0 commit comments

Comments
 (0)