Skip to content

Commit 9abcacd

Browse files
ccbc-service-accountccbc-service-account
authored
Merge pull request #4388 from bcgov/NDT-1074-Make-Navigation-Buttons-consistent-Across-Projects
Ndt 1074 make navigation buttons consistent across projects
2 parents ff73fa9 + c52ca17 commit 9abcacd

File tree

9 files changed

+223
-54
lines changed

9 files changed

+223
-54
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
# [1.290.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.289.1...v1.290.0) (2026-01-27)
2+
3+
### Features
4+
5+
- add map to cbc page, min width aside ([e554525](https://github.com/bcgov/CONN-CCBC-portal/commit/e55452547c56cc9fbaee14bead4132ed0e8bcdf3))
6+
- add titles to cbc pages, extend header ([5fb2633](https://github.com/bcgov/CONN-CCBC-portal/commit/5fb26339573b41a2663feaf1bb58dcce1bec9cd5))
7+
18
## [1.289.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.289.0...v1.289.1) (2026-01-27)
29

310
# [1.289.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.288.2...v1.289.0) (2026-01-26)

‎app/components/Analyst/CBC/CbcAnalystLayout.tsx‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,40 @@ const StyledContainer = styled.div`
1313

1414
const StyledFlex = styled.div`
1515
display: flex;
16+
width: 100%;
1617
`;
1718

1819
const StyledFormDiv = styled(FormDiv)`
19-
max-width: 100%;
20+
margin: 0 auto;
21+
transition:
22+
max-width 0.2s,
23+
margin 0.2s,
24+
padding 0.2s;
25+
26+
h2 {
27+
width: 100%;
28+
display: block;
29+
clear: both;
30+
}
31+
32+
@media (max-width: 1200px) {
33+
max-width: 700px;
34+
}
35+
@media (max-width: 1024px) {
36+
max-width: calc(100vw - 56px);
37+
margin-left: 56px;
38+
margin-right: 0;
39+
padding: 0 8px;
40+
}
41+
@media (max-width: 976px) {
42+
max-width: 600px;
43+
margin-left: 10px;
44+
margin-right: 0;
45+
padding: 0 4px;
46+
}
47+
@media (max-width: 600px) {
48+
padding: 0 2px;
49+
}
2050
`;
2151

2252
const StyledOuterContainer = styled.div`
@@ -30,12 +60,18 @@ interface Props {
3060
children: JSX.Element[] | JSX.Element;
3161
query: any;
3262
isFormEditable?: boolean;
63+
mapData?: any;
64+
isMapExpanded?: boolean;
65+
setIsMapExpanded?: (isMapExpanded: boolean) => void;
3366
}
3467

3568
const CbcAnalystLayout: React.FC<Props> = ({
3669
children,
3770
query,
3871
isFormEditable = false,
72+
mapData = null,
73+
isMapExpanded = null,
74+
setIsMapExpanded = null,
3975
}) => {
4076
const queryFragment = useFragment(
4177
graphql`
@@ -52,7 +88,12 @@ const CbcAnalystLayout: React.FC<Props> = ({
5288
<StyledContainer>
5389
<CbcHeader query={queryFragment} isFormEditable={isFormEditable} />
5490
<StyledFlex>
55-
<NavigationSidebar query={queryFragment} />
91+
<NavigationSidebar
92+
mapData={mapData}
93+
isMapExpanded={isMapExpanded}
94+
setIsMapExpanded={setIsMapExpanded}
95+
query={queryFragment}
96+
/>
5697
<StyledFormDiv>{children}</StyledFormDiv>
5798
</StyledFlex>
5899
</StyledContainer>

‎app/components/Analyst/CBC/CbcHeader.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ const StyledCallout = styled.div`
1616
padding-bottom: 0;
1717
border-left: 4px solid ${(props) => props.theme.color.links};
1818
width: 100%;
19+
min-height: 191px;
20+
@media (max-width: 900px) {
21+
flex-direction: column;
22+
gap: 16px;
23+
}
1924
`;
2025

2126
const StyledH1 = styled.h1`
@@ -30,11 +35,50 @@ const StyledH2 = styled.h2`
3035

3136
const StyledProjectInfo = styled.div`
3237
width: 100%;
38+
@media (max-width: 1200px) {
39+
word-break: break-word;
40+
overflow-wrap: break-word;
41+
margin-left: 60px;
42+
}
43+
@media (max-width: 975px) {
44+
word-break: break-word;
45+
overflow-wrap: break-word;
46+
margin-left: 150px;
47+
}
48+
@media (max-width: 900px) {
49+
display: flex;
50+
flex-direction: column;
51+
align-items: center;
52+
text-align: center;
53+
word-break: break-word;
54+
overflow-wrap: break-word;
55+
width: 80vw;
56+
max-width: 200vw;
57+
box-sizing: border-box;
58+
padding-left: 16px;
59+
padding-right: 16px;
60+
position: relative;
61+
left: 50%;
62+
right: 30%;
63+
transform: translateX(-50%);
64+
margin-left: 0;
65+
}
3366
`;
3467

3568
const StyledDiv = styled.div`
3669
display: grid;
3770
height: fit-content;
71+
min-height: 152px;
72+
@media (max-width: 975px) {
73+
margin-right: 160px;
74+
}
75+
@media (max-width: 900px) {
76+
width: 80vw;
77+
left: 50%;
78+
margin-left: auto;
79+
margin-right: auto;
80+
min-height: unset;
81+
}
3882
`;
3983

4084
const StyledLabel = styled.label`

‎app/components/Analyst/CBC/NavigationSidebar.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import styled from 'styled-components';
21
import { useRouter } from 'next/router';
32
import { useEffect } from 'react';
43
import {
@@ -9,22 +8,20 @@ import {
98
import useStickyHeader from 'lib/helpers/useStickyHeader';
109
import NavItem from '../NavItem';
1110
import ProjectNavigationSidebar from '../ProjectNavigationSidebar';
11+
import SideMap from '../SideMap';
12+
import {
13+
StyledAside,
14+
StyledNav,
15+
StyledUpperSection,
16+
StyledLowerSection,
17+
} from '../NavigationSidebar.styles';
1218

13-
const StyledAside = styled.aside`
14-
min-height: 100%;
15-
`;
16-
17-
const StyledNav = styled.nav<{ $offset: number }>`
18-
position: sticky;
19-
top: ${({ $offset }) => `${$offset + 140}px`};
20-
`;
21-
22-
const StyledUpperSection = styled.section`
23-
border-bottom: 1px solid #d6d6d6;
24-
color: ${(props) => props.theme.color.navigationBlue};
25-
`;
26-
27-
const NavigationSidebar = ({ query = null }) => {
19+
const NavigationSidebar = ({
20+
mapData = null,
21+
isMapExpanded = null,
22+
setIsMapExpanded = null,
23+
query = null,
24+
}) => {
2825
const router = useRouter();
2926
const { extraOffset } = useStickyHeader();
3027
const { asPath } = router;
@@ -40,18 +37,17 @@ const NavigationSidebar = ({ query = null }) => {
4037
return (
4138
<StyledAside>
4239
<StyledNav $offset={extraOffset}>
40+
<StyledUpperSection>
4341
{/* Project Navigation Components - always show when query is available */}
4442
{query && <ProjectNavigationSidebar query={query} />}
45-
46-
<StyledUpperSection>
4743
<NavItem
4844
currentPath={asPath}
4945
href="/analyst/dashboard"
5046
icon={faChevronLeft}
5147
label="Dashboard"
5248
/>
5349
</StyledUpperSection>
54-
<section>
50+
<StyledLowerSection>
5551
<NavItem
5652
currentPath={asPath}
5753
href={`/analyst/cbc/${cbcId}`}
@@ -64,7 +60,14 @@ const NavigationSidebar = ({ query = null }) => {
6460
icon={faClockRotateLeft}
6561
label="History"
6662
/>
67-
</section>
63+
</StyledLowerSection>
64+
{mapData && (
65+
<SideMap
66+
mapData={mapData}
67+
isMapExpanded={isMapExpanded}
68+
setIsMapExpanded={setIsMapExpanded}
69+
/>
70+
)}
6871
</StyledNav>
6972
</StyledAside>
7073
);

‎app/components/Analyst/NavigationSidebar.styles.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from 'styled-components';
2+
3+
export const StyledAside = styled.aside`
4+
min-height: 100%;
5+
min-width: 300px;
6+
@media (max-width: 1250px) {
7+
margin-left: 60px;
8+
}
9+
@media (max-width: 975px) {
10+
margin-left: 180px;
11+
}
12+
`;
13+
14+
export const StyledNav = styled.nav<{ $offset: number }>`
15+
position: sticky;
16+
top: ${({ $offset }) => `${$offset + 140}px`};
17+
`;
18+
19+
export const StyledUpperSection = styled.section`
20+
border-bottom: 1px solid #d6d6d6;
21+
color: ${(props) => props.theme.color.navigationBlue};
22+
padding-top: 45px;
23+
`;
24+
25+
export const StyledLowerSection = styled.section`
26+
margin-top: 1em;
27+
`;
28+

‎app/components/Analyst/NavigationSidebar.tsx‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import styled from 'styled-components';
21
import { useRouter } from 'next/router';
32
import cookie from 'js-cookie';
43
import {
@@ -15,31 +14,12 @@ import useStickyHeader from 'lib/helpers/useStickyHeader';
1514
import NavItem from './NavItem';
1615
import SideMap from './SideMap';
1716
import ProjectNavigationSidebar from './ProjectNavigationSidebar';
18-
19-
const StyledAside = styled.aside`
20-
min-height: 100%;
21-
@media (max-width: 1250px) {
22-
margin-left: 60px;
23-
}
24-
@media (max-width: 975px) {
25-
margin-left: 180px;
26-
}
27-
`;
28-
29-
const StyledNav = styled.nav<{ $offset: number }>`
30-
position: sticky;
31-
top: ${({ $offset }) => `${$offset + 140}px`};
32-
`;
33-
34-
const StyledUpperSection = styled.section`
35-
border-bottom: 1px solid #d6d6d6;
36-
color: ${(props) => props.theme.color.navigationBlue};
37-
padding-top: 45px;
38-
`;
39-
40-
const StyledLowerSection = styled.section`
41-
margin-top: 1em;
42-
`;
17+
import {
18+
StyledAside,
19+
StyledNav,
20+
StyledUpperSection,
21+
StyledLowerSection,
22+
} from './NavigationSidebar.styles';
4323

4424
const NavigationSidebar = ({
4525
mapData = null,

0 commit comments

Comments
 (0)