Fix navbar highlight for Organized Content sections #182

a258wang · 2021-08-26T16:26:20-04:00

a258wang commented

2021-08-26 16:26:20 -04:00

Also fixes the navbar highlight for the different Advice sections.

Closes #181

Also fixes the navbar highlight for the different Advice sections. Closes #181

a258wang added 1 commit 2021-08-26 16:26:21 -04:00

continuous-integration/drone/push Build is passing Details

db9f5f1c5c Fix navbar highlight for pages with Organized Content

a3thakra reviewed 2021-08-27 14:49:31 -04:00

components/Navbar.tsx Outdated

													
				@ -201,7 +211,8 @@ function NavItem(props: NavItemProps) {

				  const isCurrentPage =

				    router.pathname === props.route ||

				    (props.submenu != null &&

				      router.pathname.startsWith(getMainRoute(props.route)));

a3thakra commented

2021-08-27 14:49:31 -04:00

What if we do:

const isCurrentPage =
    router.pathname === props.route ||
    (router.pathname !== "/" &&
      router.pathname.startsWith(getMainRoute(props.route)));

What if we do: ```ts const isCurrentPage = router.pathname === props.route || (router.pathname !== "/" && router.pathname.startsWith(getMainRoute(props.route))); ```

a258wang commented

2021-08-27 16:05:45 -04:00

That doesn't work because whenever we navigate to anything in the About submenu, all of the other entries in the submenu will also be highlighted blue. (Same for the Resources submenu.)

a3thakra marked this conversation as resolved

a258wang added 4 commits 2021-08-28 18:22:28 -04:00

25d3121b96 Change coop to co-op in advice pages

e2b8f87049 Fix about us page and clean up redirects

6e8811bf2a Add leaf-searching algorithm to highlight navbar entries

continuous-integration/drone/push Build is passing Details

723d799d87 Merge branch 'amy-navbar-highlight-fix' of https://git.csclub.uwaterloo.ca/www/www-new into amy-navbar-highlight-fix

a258wang commented

2021-08-28 18:24:23 -04:00

Side note: I ended up keeping the About Us page at /about because I was able to make it work, but let me know if we'd prefer to move it to /about/us. :)

Side note: I ended up keeping the About Us page at `/about` because I was able to make it work, but let me know if we'd prefer to move it to `/about/us`. :)

👍 1

a3thakra reviewed 2021-08-28 22:02:22 -04:00

components/Navbar.tsx Outdated

													
				@ -190,3 +205,4 @@

				  submenu?: {

				    name: string;

				    route: string;

				    hasSubsections?: boolean;

a3thakra commented

2021-08-28 22:02:22 -04:00

We don't need this anymore, correct?

a258wang commented

2021-08-28 22:49:24 -04:00

Oops yes sorry, I'll get rid of it! I had to do some mergey stuff and I must've forgotten to delete this line lol

a3thakra marked this conversation as resolved

a258wang added 2 commits 2021-08-28 22:56:08 -04:00

b37047361a Remove unnecessary code

continuous-integration/drone/push Build is passing Details

bf7a07ca7f Merge branch 'main' into amy-navbar-highlight-fix

a3thakra reviewed 2021-08-29 21:33:30 -04:00

components/Navbar.tsx Outdated

													
				@ -276,0 +295,4 @@

				  ancestors: { name: string; route: string }[];

				}[];

				function dfs(

a3thakra commented

2021-08-29 21:33:30 -04:00

I think this function should be called something like collectLeaves

I think this function should be called something like `collectLeaves`

a3thakra commented

2021-08-29 21:36:55 -04:00

Let's make the signature of this function similar to what reduce takes in. Then we could do

const leaves = menu.reduce(collectLeaves, [] as Leaves)

(or something like this)

Let's make the signature of this function similar to what reduce takes in. Then we could do ```ts const leaves = menu.reduce(collectLeaves, [] as Leaves) ``` (or something like this)

a3thakra reviewed 2021-08-29 21:40:21 -04:00

components/Navbar.tsx Outdated

													
				@ -276,0 +304,4 @@

				  }

				  let ret = [] as Leaves;

				  for (const subEntry of entry.submenu) {

				    ret = ret.concat(dfs(subEntry, [...ancestors, entry]));