Skip to content

Commit 4f925df

Browse files
taneliangtaneliang
committed
WIP move navtabs into navbar
1 parent e4ef805 commit 4f925df

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
&.no-scroll {
@@ -38,30 +35,20 @@ a {
3835
flex: 1 auto;
3936
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
4037

41-
@include media-breakpoint-down(sm) {
42-
.main-content {
43-
padding-top: 1rem;
44-
}
38+
.main-content {
39+
padding-top: 1rem;
4540
}
4641

4742
@include media-breakpoint-up(md) {
4843
> nav {
4944
width: calc(#{$side-nav-width-md} + #{($grid-gutter-width / 2)});
5045
}
51-
52-
.main-content {
53-
padding-left: $side-nav-width-md;
54-
}
5546
}
5647

5748
@include media-breakpoint-up(xl) {
5849
> nav {
5950
width: $side-nav-width-lg;
6051
}
61-
62-
.main-content {
63-
padding-left: $side-nav-width-lg;
64-
}
6552
}
6653
}
6754

‎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
@@ -56,11 +59,13 @@
5659

5760
.link {
5861
position: relative;
59-
flex: 1 0 auto;
62+
flex-shrink: 0;
63+
flex-basis: auto;
6064
line-height: 1.6;
6165
text-align: center;
6266
color: var(--gray-light);
6367
transition: color 0.15s;
68+
min-width: 6em;
6469

6570
&.linkActive {
6671
color: theme-color(primary);
@@ -74,21 +79,25 @@
7479
display: flex;
7580
justify-content: center;
7681
align-items: center;
82+
flex-grow: 1;
83+
min-width: unset;
7784

7885
svg {
7986
margin-bottom: 0.1rem;
8087
}
8188
}
8289

83-
@include media-breakpoint-up(md) {
84-
padding: 0.8rem 0.5rem;
85-
}
90+
// @include media-breakpoint-up(md) {
91+
// padding: 0.8rem 0.5rem;
92+
// }
8693

8794
@include media-breakpoint-up(xl) {
8895
display: flex;
8996
align-items: center;
90-
padding: 0.8rem 0 0.8rem 2rem;
97+
justify-items: center;
98+
// padding: 0.8rem 0 0.8rem 2rem;
9199
text-align: left;
100+
min-width: 10em;
92101
}
93102
}
94103

‎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)