Skip to content

Commit dfa8329

Browse files
garrettlchowgarrettlchow
committed
finished styling navbar
1 parent a8e59dd commit dfa8329

File tree

4 files changed

+114
-159
lines changed

4 files changed

+114
-159
lines changed

‎src/app/components/StateRoute/StateRoute.tsx

Lines changed: 98 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ const StateRoute = (props: StateRouteProps) => {
4040
const hierarchy = propsHierarchy || tabsHierarchy;
4141
const viewIndex = propsViewIndex || tabsViewIndex;
4242

43-
4443
// lines 45 - 63 contains functionality to disable the accessibility features in Reactime.
4544
const dispatch = useDispatch();
4645
const [showTree, setShowTree] = useState(false);
@@ -64,95 +63,98 @@ const StateRoute = (props: StateRouteProps) => {
6463

6564
return (
6665
<div className='app-body'>
67-
<div className='navbar'>
68-
{/* all classnames below are functionally defined for styling purposes */}
69-
<NavLink
70-
to='/'
71-
className={(navData) =>
72-
navData.isActive ? 'is-active router-link map-tab map-tab1' : 'router-link map-tab map-tab1'
73-
}
74-
end
75-
>
76-
Map
77-
</NavLink>
78-
<NavLink
79-
className={(navData) =>
80-
navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
81-
}
82-
to='/performance'
83-
>
84-
Performance
85-
</NavLink>
86-
<NavLink
87-
className={(navData) =>
88-
navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
89-
}
90-
to='/history'
91-
>
92-
History
93-
</NavLink>
94-
<NavLink
95-
className={(navData) =>
96-
navData.isActive
97-
? 'is-active router-link web-metrics-tab'
98-
: 'router-link web-metrics-tab'
99-
}
100-
to='/webMetrics'
101-
>
102-
Web Metrics
103-
</NavLink>
104-
<NavLink
105-
className={(navData) =>
106-
navData.isActive ? 'is-active router-link tree-tab' : 'router-link tree-tab'
107-
}
108-
to='/tree'
109-
>
110-
Tree
111-
</NavLink>
112-
<NavLink
113-
className={(navData) =>
114-
navData.isActive
115-
? 'is-active router-link accessibility-tab'
116-
: 'router-link accessibility-tab'
117-
}
118-
to='/accessibility'
119-
>
120-
Accessibility
121-
</NavLink>
66+
<div className='main-navbar-container'>
67+
<div className='main-navbar'>
68+
<NavLink
69+
to='/'
70+
className={(navData) =>
71+
navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
72+
}
73+
end
74+
>
75+
Map
76+
</NavLink>
77+
<NavLink
78+
className={(navData) =>
79+
navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
80+
}
81+
to='/performance'
82+
>
83+
Performance
84+
</NavLink>
85+
<NavLink
86+
className={(navData) =>
87+
navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
88+
}
89+
to='/history'
90+
>
91+
History
92+
</NavLink>
93+
<NavLink
94+
className={(navData) =>
95+
navData.isActive
96+
? 'is-active router-link web-metrics-tab'
97+
: 'router-link web-metrics-tab'
98+
}
99+
to='/webMetrics'
100+
>
101+
Web Metrics
102+
</NavLink>
103+
<NavLink
104+
className={(navData) =>
105+
navData.isActive ? 'is-active router-link tree-tab' : 'router-link tree-tab'
106+
}
107+
to='/tree'
108+
>
109+
Tree
110+
</NavLink>
111+
<NavLink
112+
className={(navData) =>
113+
navData.isActive
114+
? 'is-active router-link accessibility-tab'
115+
: 'router-link accessibility-tab'
116+
}
117+
to='/accessibility'
118+
>
119+
Accessibility
120+
</NavLink>
121+
</div>
122122
</div>
123+
123124
<div className='app-content'>
124125
<Routes>
125126
<Route
126127
path='/accessibility'
127128
element={
128-
// showTree is initially set to a falsely value, therefore, lines 155 - 189 is executed first. Once showTree is set to truthy by clicking the enable button, lines 129 - 154 is executed
129-
// state is a key component here in order to update the accessibility tree
130129
showTree ? (
131130
<div>
132-
<input
133-
type='radio'
134-
value='enable'
135-
checked={selectedValue === 'enable'}
136-
onChange={() => {
137-
enableAxTreeButton();
138-
}}
139-
/>
140-
<label htmlFor='enable'>Enable</label>
141-
<input
142-
type='radio'
143-
value='disable'
144-
checked={selectedValue === 'disable'}
145-
onChange={() => {
146-
disableAxTree();
147-
}}
148-
/>
149-
<label htmlFor='disable'>Disable</label>
150-
{showTree && <AxContainer
131+
<input
132+
type='radio'
133+
value='enable'
134+
checked={selectedValue === 'enable'}
135+
onChange={() => {
136+
enableAxTreeButton();
137+
}}
138+
/>
139+
<label htmlFor='enable'>Enable</label>
140+
<input
141+
type='radio'
142+
value='disable'
143+
checked={selectedValue === 'disable'}
144+
onChange={() => {
145+
disableAxTree();
146+
}}
147+
/>
148+
<label htmlFor='disable'>Disable</label>
149+
{/* @ts-ignore */}
150+
{showTree && (
151+
<AxContainer
151152
axSnapshots={axSnapshots}
152153
snapshot={snapshot}
153154
snapshots={snapshots}
154155
currLocation={currLocation}
155-
/>}
156+
/>
157+
)}
156158
</div>
157159
) : (
158160
<div>
@@ -165,33 +167,29 @@ const StateRoute = (props: StateRouteProps) => {
165167
</p>
166168
)}
167169
<div>
168-
{
169-
<input
170-
type='radio'
171-
value='enable'
172-
checked={selectedValue === 'enable'}
173-
onChange={() => {
174-
enableAxTreeButton();
175-
}}
176-
/>
177-
}
170+
<input
171+
type='radio'
172+
value='enable'
173+
checked={selectedValue === 'enable'}
174+
onChange={() => {
175+
enableAxTreeButton();
176+
}}
177+
/>
178178
<label htmlFor='enable'>Enable</label>
179-
{
180-
<input
181-
type='radio'
182-
value='disable'
183-
checked={selectedValue === 'disable'}
184-
onChange={() => {
185-
disableAxTree();
186-
}}
187-
/>
188-
}
179+
<input
180+
type='radio'
181+
value='disable'
182+
checked={selectedValue === 'disable'}
183+
onChange={() => {
184+
disableAxTree();
185+
}}
186+
/>
189187
<label htmlFor='disable'>Disable</label>
190188
</div>
191189
</div>
192190
)
193191
}
194-
></Route>
192+
/>
195193
<Route
196194
path='/history'
197195
element={
@@ -202,8 +200,6 @@ const StateRoute = (props: StateRouteProps) => {
202200
width={width}
203201
height={height}
204202
hierarchy={hierarchy}
205-
// Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
206-
// dispatch={dispatch}
207203
sliderIndex={sliderIndex}
208204
viewIndex={viewIndex}
209205
currLocation={currLocation}
@@ -227,7 +223,6 @@ const StateRoute = (props: StateRouteProps) => {
227223
width={width}
228224
height={height}
229225
snapshots={snapshots}
230-
// note: is propdrilled within Performance Visx, but doesn't seem to be used
231226
changeSlider={changeSlider}
232227
changeView={changeView}
233228
hierarchy={hierarchy}
@@ -252,8 +247,7 @@ const StateRoute = (props: StateRouteProps) => {
252247
hierarchy ? (
253248
<ParentSize className='componentMapContainer'>
254249
{({ width, height }) => {
255-
// eslint-disable-next-line react/prop-types
256-
const maxHeight: number = 1200;
250+
const maxHeight = 1200;
257251
const h = Math.min(height, maxHeight);
258252
return (
259253
<ComponentMap
@@ -274,4 +268,3 @@ const StateRoute = (props: StateRouteProps) => {
274268
};
275269

276270
export default StateRoute;
277-

‎src/app/containers/StateContainer.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
2424
return (
2525
<>
2626
<div className='state-container'>
27-
<div className='main-navbar-container'>
28-
<div className='main-navbar'></div>
29-
</div>
27+
<div className='main-navbar-container main-navbar-container--structural'></div>
3028
<Routes>
3129
<Route
3230
path='/*'

‎src/app/styles/components/_buttons.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,6 @@
353353
display: flex;
354354
align-items: center;
355355
padding: 4px 16px;
356-
width: 100%;
357356
background: transparent;
358357
gap: 8px;
359358
}

‎src/app/styles/layout/_stateContainer.scss

Lines changed: 15 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,16 @@
77
fill: $state-background;
88
}
99

10-
.state-container {
11-
.main-router-link {
12-
//diff button
13-
font-size: 14px;
14-
height: 75%;
15-
width: 75px;
16-
display: flex;
17-
justify-content: center;
18-
align-items: center;
19-
text-decoration: none;
20-
color: $header-button-inactive-text;
21-
background: $header-button-inactive;
22-
border-radius: 5px;
23-
border: 1px solid rgba(184, 196, 194, 0.25);
24-
}
25-
26-
.main-router-link:hover {
27-
background: $header-button-hover;
28-
}
29-
30-
.main-router-link.is-active {
31-
background: $header-button-active;
32-
color: $header-button-active-text;
33-
margin: 3px;
34-
border-radius: 5px;
35-
border: 1px solid rgb(36, 37, 41);
36-
}
10+
.main-navbar-container--structural {
11+
height: 0;
12+
padding: 0;
13+
border: none;
14+
overflow: hidden;
15+
visibility: hidden;
16+
pointer-events: none;
17+
}
3718

19+
.state-container {
3820
.router-link {
3921
padding: 8px 16px;
4022
font-size: 14px;
@@ -63,36 +45,19 @@
6345
}
6446
}
6547

66-
.navbar {
67-
display: flex;
68-
background-color: white;
69-
border-bottom: 1px solid #e5e7eb;
70-
flex-direction: row;
71-
justify-content: center;
72-
align-items: center;
73-
height: 30px;
74-
position: fixed;
75-
top: 4px;
76-
left: 50%;
77-
transform: translateX(-50%);
78-
width: 65vw;
79-
z-index: 1;
80-
}
81-
8248
.main-navbar {
8349
display: flex;
8450
flex-direction: row;
85-
justify-content: flex-start;
51+
justify-content: space-between;
8652
align-items: center;
87-
height: 35px;
88-
margin: 6px;
53+
gap: 8px;
54+
width: 100%;
8955
}
9056

9157
.main-navbar-container {
92-
display: flex;
93-
flex-direction: row;
94-
justify-content: space-between;
95-
align-items: center;
58+
border-bottom: 1px solid #e5e7eb;
59+
background: white;
60+
padding: 0px 24px 4px;
9661
}
9762
}
9863

0 commit comments

Comments
 (0)