Skip to content

Commit 89cf04f

Browse files
taneliangtaneliang
committed
WIP move navtabs into navbar
1 parent 95f7b3e commit 89cf04f

File tree

6 files changed

+113
-82
lines changed

6 files changed

+113
-82
lines changed

‎website/src/styles/layout/site.scss‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,11 @@ body,
77
// Ensures the page always fill the height of the page. Combined with the
88
// flexbox on .app-container, this allows the footer to be aligned to the
99
// page bottom when there's insufficient page content
10-
height: 100%;
10+
min-height: 100vh;
1111
}
1212

1313
body {
14-
padding-top: 4rem;
15-
1614
@include media-breakpoint-down(sm) {
17-
padding-top: $navbar-height;
1815
font-size: 1rem * $sm-font-size-ratio;
1916
}
2017
}
@@ -35,30 +32,20 @@ a {
3532
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
3633
env(safe-area-inset-left);
3734

38-
@include media-breakpoint-down(sm) {
39-
.main-content {
40-
padding-top: 1rem;
41-
}
35+
.main-content {
36+
padding-top: 1rem;
4237
}
4338

4439
@include media-breakpoint-up(md) {
4540
> nav {
4641
width: calc(#{$side-nav-width-md} + #{($grid-gutter-width / 2)});
4742
}
48-
49-
.main-content {
50-
padding-left: $side-nav-width-md;
51-
}
5243
}
5344

5445
@include media-breakpoint-up(xl) {
5546
> nav {
5647
width: $side-nav-width-lg;
5748
}
58-
59-
.main-content {
60-
padding-left: $side-nav-width-lg;
61-
}
6249
}
6350
}
6451

‎website/src/views/AppShell.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ import LoadingSpinner from './components/LoadingSpinner';
3434
import FeedbackModal from './components/FeedbackModal';
3535
import KeyboardShortcuts from './components/KeyboardShortcuts';
3636

37-
import styles from './AppShell.scss';
37+
import useMediaQuery from './hooks/useMediaQuery';
38+
import { breakpointDown } from 'utils/css';
39+
import Navbar from './layout/Navbar';
3840

3941
/**
4042
* Fetch module list on mount.
@@ -120,6 +122,8 @@ const AppShell: FC = ({ children }) => {
120122

121123
const theme = useSelector((state: State) => state.theme.id);
122124

125+
const twoRowNav = useMediaQuery(breakpointDown('sm'));
126+
123127
if (!isModuleListReady && moduleListError) {
124128
return <ApiError dataName="module information" retry={refetchModuleListAndTimetableModules} />;
125129
}
@@ -136,23 +140,9 @@ const AppShell: FC = ({ children }) => {
136140
/>
137141
</Helmet>
138142

139-
<nav className={styles.navbar}>
140-
<NavLink className={styles.brand} to="/" title="Home">
141-
<Logo className={styles.brandLogo} title="NUSMods" />
142-
</NavLink>
143-
144-
<div className={styles.navRight}>
145-
<ErrorBoundary>
146-
<GlobalSearchContainer />
147-
</ErrorBoundary>
148-
149-
<div className={styles.weekText}>{weekText}</div>
150-
</div>
151-
</nav>
143+
<Navbar />
152144

153145
<div className="main-container">
154-
<Navtabs />
155-
156146
<main className="main-content">
157147
{isModuleListReady ? (
158148
<ErrorBoundary errorPage={() => <ErrorPage showReportDialog />}>

‎website/src/views/AppShell.scss‎ renamed to ‎website/src/views/layout/Navbar.scss‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,27 @@ $vert-padding: 0.5rem;
55
// See: https://github.com/nusmodifications/nusmods/pull/1567
66
$logo-vert-padding: 0.875rem;
77

8-
.navbar {
9-
position: fixed;
8+
.navbarWrapper {
9+
position: sticky;
1010
top: 0;
11-
right: 0;
12-
left: 0;
1311
z-index: $navbar-z-index;
12+
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
13+
background: var(--gray-lightest);
14+
display: flex;
15+
flex-flow: column;
16+
align-items: center;
17+
}
18+
19+
.topBar {
1420
display: flex;
1521
justify-content: space-between;
1622
height: $navbar-height;
17-
padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
18-
background: var(--gray-lightest);
23+
width: 100%;
24+
}
25+
26+
.bottomBar {
27+
position: fixed;
28+
top: 0;
1929
}
2030

2131
.brand {
@@ -30,6 +40,15 @@ $logo-vert-padding: 0.875rem;
3040
width: 100%;
3141
}
3242

43+
.navLeft {
44+
display: flex;
45+
}
46+
47+
.navCenter {
48+
position: relative;
49+
top: $navbar-height;
50+
}
51+
3352
.navRight {
3453
display: flex;
3554
align-items: center;
@@ -54,11 +73,21 @@ $logo-vert-padding: 0.875rem;
5473
}
5574
}
5675

57-
@include media-breakpoint-down(xs) {
58-
.navRight {
59-
display: none;
76+
@include media-breakpoint-down(sm) {
77+
.navbarWrapper {
78+
top: -$navbar-height;
79+
}
80+
81+
.bottomBar {
82+
// Allow bar to sit below topBar
83+
position: initial;
84+
top: unset;
85+
86+
width: 100%;
6087
}
88+
}
6189

90+
@include media-breakpoint-down(xs) {
6291
.brand {
6392
flex: 1;
6493
padding: $logo-vert-padding 0;

‎website/src/views/layout/Navbar.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* eslint-disable arrow-body-style */
2+
import { FC } from 'react';
3+
import { NavLink } from 'react-router-dom';
4+
import weekText from 'utils/weekText';
5+
import ErrorBoundary from 'views/errors/ErrorBoundary';
6+
import Logo from 'img/nusmods-logo.svg';
7+
8+
import GlobalSearchContainer from './GlobalSearchContainer';
9+
10+
import styles from './Navbar.scss';
11+
import Navtabs from './Navtabs';
12+
13+
const Navbar: FC = ({ children }) => {
14+
return (
15+
<div className={styles.navbarWrapper}>
16+
{/* Bottom bar must be above the top bar in HTML, so that top bar can be interacted with. */}
17+
<nav className={styles.topBar}>
18+
<div className={styles.navLeft}>
19+
<NavLink className={styles.brand} to="/" title="Home">
20+
<Logo className={styles.brandLogo} title="NUSMods" />
21+
</NavLink>
22+
<ErrorBoundary>
23+
<GlobalSearchContainer />
24+
</ErrorBoundary>
25+
</div>
26+
<div className={styles.navRight}>
27+
<button>lol</button>
28+
</div>
29+
</nav>
30+
<div className={styles.bottomBar}>
31+
<Navtabs />
32+
</div>
33+
</div>
34+
);
35+
};
36+
// <div className={styles.weekText}>{weekText}</div>
37+
38+
export default Navbar;

‎website/src/views/layout/Navtabs.scss‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,36 @@
33
/*
44
For breakpoint-md (tablets), show the links as compact buttons with labels below icons.
55
For breakpoint-lg (desktop), show the links as traditional link with icon to the left.
6+
TODO: UPDATE COMMENT
67
*/
78
.nav {
8-
position: fixed;
9-
top: $navbar-height;
10-
right: 0;
11-
left: 0;
9+
// position: fixed;
10+
// top: $navbar-height;
1211
z-index: $navtabs-z-index;
1312
// See site.scss for width on md and lg sizes
1413
display: flex;
15-
justify-content: space-around;
14+
// justify-content: space-around;
15+
justify-content: center;
1616
align-items: stretch;
1717
height: $navtab-height;
18+
margin: 0 auto;
1819

19-
@include media-breakpoint-up(md) {
20-
flex-direction: column;
21-
justify-content: flex-start;
22-
margin-top: 0.5rem;
23-
box-shadow: none;
24-
}
20+
// @include media-breakpoint-up(md) {
21+
// flex-direction: column;
22+
// justify-content: flex-start;
23+
// margin-top: 0.5rem;
24+
// box-shadow: none;
25+
// }
2526

26-
@include media-breakpoint-up(xl) {
27-
margin-top: 1rem;
28-
}
27+
// @include media-breakpoint-up(xl) {
28+
// margin-top: 1rem;
29+
// }
2930

3031
@include media-breakpoint-down(sm) {
3132
position: sticky;
3233
top: 0;
34+
right: 0;
35+
left: 0;
3336
background-color: var(--body-bg);
3437

3538
// Fake shadow - can't use box shadow because they will appear on top of the
@@ -49,11 +52,13 @@
4952

5053
.link {
5154
position: relative;
52-
flex: 1 0 auto;
55+
flex-shrink: 0;
56+
flex-basis: auto;
5357
line-height: 1.6;
5458
text-align: center;
5559
color: var(--gray-light);
5660
transition: color 0.15s;
61+
min-width: 6em;
5762

5863
&.linkActive {
5964
color: theme-color(primary);
@@ -67,21 +72,25 @@
6772
display: flex;
6873
justify-content: center;
6974
align-items: center;
75+
flex-grow: 1;
76+
min-width: unset;
7077

7178
svg {
7279
margin-bottom: 0.1rem;
7380
}
7481
}
7582

76-
@include media-breakpoint-up(md) {
77-
padding: 0.8rem 0.5rem;
78-
}
83+
// @include media-breakpoint-up(md) {
84+
// padding: 0.8rem 0.5rem;
85+
// }
7986

8087
@include media-breakpoint-up(xl) {
8188
display: flex;
8289
align-items: center;
83-
padding: 0.8rem 0 0.8rem 2rem;
90+
justify-items: center;
91+
// padding: 0.8rem 0 0.8rem 2rem;
8492
text-align: left;
93+
min-width: 10em;
8594
}
8695
}
8796

‎website/src/views/layout/Navtabs.tsx‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,6 @@ const Navtabs: FC = () => {
5555
<span className={styles.title}>Planner</span>
5656
</NavLink>
5757
)}
58-
<NavLink {...tabProps} to="/settings">
59-
<Settings />
60-
<span className={styles.title}>Settings</span>
61-
</NavLink>
62-
<NavLink
63-
{...tabProps}
64-
className={classnames(tabProps.className, styles.hiddenOnMobile)}
65-
onMouseOver={preloadContribute}
66-
onFocus={preloadContribute}
67-
to="/contribute"
68-
>
69-
<Star />
70-
<span className={styles.title}>Contribute</span>
71-
</NavLink>
72-
<div className={styles.divider} />
73-
<ExternalLink
74-
className={classnames(tabProps.className, styles.hiddenOnMobile)}
75-
href="https://nuswhispers.com"
76-
>
77-
<Heart />
78-
<span className={styles.title}>Whispers</span>
79-
</ExternalLink>
8058
</nav>
8159
);
8260
};

0 commit comments

Comments
 (0)