evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add primary color for active tab

Browse Source
This commit is contained in:
vchikalkin 2024-06-19 15:24:06 +03:00
parent 67749c1ed5
commit 34153fa21a
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/Components/Layout/Navigation.jsx
View File

@ -8,15 +8,17 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
height: 40px; height: 46px;
justify-content: space-around; justify-content: space-around;
position: fixed; position: fixed;
width: 100%; width: 100%;
border-top: 1px solid rgba(5, 5, 5, 0.06);
`; `;
const TabButton = styled.button` const TabButton = styled.button`
background: rgba(240, 240, 240); background: ${({ active }) => (active ? 'var(--color-primary)' : 'white')};
border-radius: 6px; color: ${({ active }) => (active ? 'white' : 'black')};
border-radius: 2px 2px 0 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
@ -24,12 +26,12 @@ const TabButton = styled.button`
`; `;
export function NavigationBar() { export function NavigationBar() {
const { setCurrentTab, tabsList } = useContext(NavigationContext); const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);
return ( return (
<Container> <Container>
{tabsList.map(({ key, title }) => ( {tabsList.map(({ key, title }) => (
<TabButton key={key} onClick={() => setCurrentTab(key)}> <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
{title} {title}
</TabButton> </TabButton>
))} ))}

2
apps/web/Components/Layout/index.jsx
View File

@ -10,7 +10,7 @@ const Main = styled.main`
margin: 8px 0; margin: 8px 0;
${max('laptop')} { ${max('laptop')} {
margin-bottom: 40px; // height of the navigation bar margin-bottom: calc(46px + 8px); // height of the navigation bar
} }
${min('desktop-xl')} { ${min('desktop-xl')} {