Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nav and Side-Nav keep active Link on visit #362

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Nav and Side-Nav keep active Link on visit #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc7d22e
Nav and Side-Nav keep active Link
PanagiotisAnthoulis Mar 12, 2022
7416294
Merge branch 'main' into nav-keep-active-link
LowLifeArcade May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@ import React from 'react';
import { Routes } from '../models/routes';
import SideNavbar from './SideNavbar';
import { useContextTheme } from 'components/ThemeContext';
import { useRouter } from 'next/router';

export default function Navbar() {
const [showSideNav, setShowSideNav] = React.useState(false);

const router = useRouter();

const { toggleTheme, cardsBackgroundColor, theme } = useContextTheme();

const handleThemeChange = () => {
toggleTheme();
};

return (
<>
<SideNavbar setShow={setShowSideNav} show={showSideNav} />
Expand Down Expand Up @@ -67,31 +72,50 @@ export default function Navbar() {
<div className="flex-auto px-2 mx-2 hidden lg:flex">
<div className="items-stretch hidden lg:flex">
<Link href={Routes.Home} passHref>
<a className="p-3 hover:bg-gray-700 rounded " href="home">
<a
className={`p-3 hover:bg-gray-700 rounded ${
router.pathname == '/' && 'active'
}`}
href="home"
>
{'Home'}
</a>
</Link>
<Link href={Routes.InKind} passHref>
<a className="p-3 hover:bg-gray-700 rounded " href="inkind">
<a
className={`p-3 hover:bg-gray-700 rounded ${
router.pathname == Routes.InKind && 'active'
}`}
href="inkind"
>
{'In-Kind'}
</a>
</Link>
<Link href={Routes.Fund} passHref>
<a className="p-3 hover:bg-gray-700 rounded " href="fund">
<a
className={`p-3 hover:bg-gray-700 rounded ${
router.pathname == Routes.Fund && 'active'
}`}
href="fund"
>
{'Fund'}
</a>
</Link>
<Link href={Routes.GiveYourTime} passHref>
<a
className="p-3 hover:bg-gray-700 rounded "
className={`p-3 hover:bg-gray-700 rounded ${
router.pathname == Routes.GiveYourTime && 'active'
}`}
href="giveyourtime"
>
{'Give Your Time'}
</a>
</Link>
<Link href={Routes.PartnerWithUs} passHref>
<a
className="p-3 hover:bg-gray-700 rounded "
className={`p-3 hover:bg-gray-700 rounded ${
router.pathname == Routes.PartnerWithUs && 'active'
}`}
href="partnerwithus"
>
{'Partner With Us'}
Expand All @@ -101,7 +125,7 @@ export default function Navbar() {
</div>
<div className="flex-none hidden sm:flex lg:hidden xl:flex">
<Link href={Routes.Fund} passHref>
<a className="p-3 hover:bg-gray-700 rounded " href="fund">
<a className="p-3 hover:bg-gray-700 rounded" href="fund">
{'Help Families in Need'}
</a>
</Link>
Expand Down Expand Up @@ -132,6 +156,15 @@ export default function Navbar() {
display: flex;
justify-content: space-between;
}
.active {
border-color: rgba(50, 56, 64, 0.7);
border-width: 2px;
border-style: solid;
box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.7);
}
.active:hover {
background-color: rgb(54 62 75 / 1);
}
`}</style>
</>
);
Expand Down
63 changes: 46 additions & 17 deletions components/SideNavbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import Link from 'next/link';
import React from 'react';
import { Routes } from '../models/routes';
import { useRouter } from 'next/router';
import { useState } from 'react';

function SideNavbar({ show, setShow }) {
const hideMenu = () => setShow(false);

const [ActiveLinkRef, setActiveLinkRef] = useState();
const [HoverLinkRef, setHoverLinkRef] = useState();

const router = useRouter();

return (
<div
Expand All @@ -23,50 +26,66 @@ function SideNavbar({ show, setShow }) {
>
<Link href="/" passHref>
<a
className="side-nav-btn"
className={`side-nav-btn mt-4 ${
router.pathname == '/' && HoverLinkRef != 1 && 'active'
}`}
href="home"
onMouseEnter={() => setActiveLinkRef(1)}
onMouseOut={() => setActiveLinkRef()}
onMouseEnter={() => setHoverLinkRef(1)}
onMouseOut={() => setHoverLinkRef()}
>
{'Home'}
</a>
</Link>
<Link href={Routes.InKind} passHref>
<a
className="side-nav-btn mt-4"
className={`side-nav-btn mt-4 ${
router.pathname == Routes.InKind &&
HoverLinkRef != 2 &&
'active'
}`}
href="inkind"
onMouseEnter={() => setActiveLinkRef(2)}
onMouseOut={() => setActiveLinkRef()}
onMouseEnter={() => setHoverLinkRef(2)}
onMouseOut={() => setHoverLinkRef()}
>
{'In-Kind'}
</a>
</Link>
<Link href={Routes.Fund} passHref>
<a
className="side-nav-btn mt-4"
className={`side-nav-btn mt-4 ${
router.pathname == Routes.Fund && HoverLinkRef != 3 && 'active'
}`}
href="fund"
onMouseEnter={() => setActiveLinkRef(3)}
onMouseOut={() => setActiveLinkRef()}
onMouseEnter={() => setHoverLinkRef(3)}
onMouseOut={() => setHoverLinkRef()}
>
{'Fund'}
</a>
</Link>
<Link href={Routes.GiveYourTime} passHref>
<a
className="side-nav-btn mt-4"
className={`side-nav-btn mt-4 ${
router.pathname == Routes.GiveYourTime &&
HoverLinkRef != 4 &&
'active'
}`}
href="giveyourtime"
onMouseEnter={() => setActiveLinkRef(4)}
onMouseOut={() => setActiveLinkRef()}
onMouseEnter={() => setHoverLinkRef(4)}
onMouseOut={() => setHoverLinkRef()}
>
{'Give Your Time'}
</a>
</Link>
<Link href={Routes.PartnerWithUs} passHref>
<a
className="side-nav-btn mt-4"
className={`side-nav-btn mt-4 ${
router.pathname == Routes.PartnerWithUs &&
HoverLinkRef != 5 &&
'active'
}`}
href="partnerwithus"
onMouseEnter={() => setActiveLinkRef(5)}
onMouseOut={() => setActiveLinkRef()}
onMouseEnter={() => setHoverLinkRef(5)}
onMouseOut={() => setHoverLinkRef()}
>
{'Partner With Us'}
</a>
Expand All @@ -78,9 +97,19 @@ function SideNavbar({ show, setShow }) {
</div>
<style jsx>
{`
a:nth-child(${ActiveLinkRef}) {
a:nth-child(${HoverLinkRef}) {
transform: scale(1.1);
}
.active {
background-color: rgb(54 62 75 / 0.6);
border-color: rgb(50 56 64);
border-width: 3px;
border-style: solid;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.active:hover {
background-color: rgb(54 62 75 / 1);
}
`}
</style>
</div>
Expand Down
86 changes: 70 additions & 16 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1900,6 +1900,38 @@ cosmiconfig@^7.0.1:
path-type "^4.0.0"
yaml "^1.10.0"


create-ecdh@^4.0.0:
version "4.0.4"
resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz"
integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
dependencies:
bn.js "^4.1.0"
elliptic "^6.5.3"

create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz"
integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
dependencies:
cipher-base "^1.0.1"
inherits "^2.0.1"
md5.js "^1.3.4"
ripemd160 "^2.0.1"
sha.js "^2.4.0"

create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
version "1.1.7"
resolved "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz"
integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
dependencies:
cipher-base "^1.0.3"
create-hash "^1.1.0"
inherits "^2.0.1"
ripemd160 "^2.0.0"
safe-buffer "^5.0.1"
sha.js "^2.4.8"

cross-spawn@^7.0.2, cross-spawn@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
Expand Down Expand Up @@ -3483,13 +3515,13 @@ jest-environment-node@^27.5.1:
"@jest/fake-timers" "^27.5.1"
"@jest/types" "^27.5.1"
"@types/node" "*"
jest-mock "^27.5.1"
jest-util "^27.5.1"
jest-mock "^27.4.2"
jest-util "^27.4.2"

jest-get-type@^27.5.1:
version "27.5.1"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
jest-get-type@^27.4.0:
version "27.4.0"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==

jest-haste-map@^27.5.1:
version "27.5.1"
Expand Down Expand Up @@ -4306,6 +4338,13 @@ node-emoji@^1.11.0:
dependencies:
lodash "^4.17.21"


[email protected], node-fetch@^2.6.1:
version "2.6.1"
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz"
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==


node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
Expand Down Expand Up @@ -5558,6 +5597,7 @@ tr46@^2.1.0:
dependencies:
punycode "^2.1.1"


tr46@~0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
Expand All @@ -5567,6 +5607,7 @@ tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
version "3.14.0"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.0.tgz#4fcc48f9ccea8826c41b9ca093479de7f5018976"
integrity sha512-cg/1jAZoL57R39+wiw4u/SCC6Ic9Q5NqjBOb+9xISedOYurfog9ZNmKJSxAnb2m/5Bq4lE9lhUcau33Ml8DM0g==

dependencies:
"@types/json5" "^0.0.29"
json5 "^1.0.1"
Expand Down Expand Up @@ -5724,10 +5765,20 @@ warning@^3.0.0:
dependencies:
loose-envify "^1.0.0"

webidl-conversions@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=

[email protected]:
version "2.1.1"
resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz"
integrity sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==
dependencies:
glob-to-regexp "^0.4.1"
graceful-fs "^4.1.2"

webidl-conversions@^4.0.2:
version "4.0.2"
resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"
integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==


webidl-conversions@^5.0.0:
version "5.0.0"
Expand Down Expand Up @@ -5770,13 +5821,16 @@ whatwg-mimetype@^2.3.0:
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==

whatwg-url@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=

whatwg-url@^7.0.0:
version "7.1.0"
resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"
integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
dependencies:
tr46 "~0.0.3"
webidl-conversions "^3.0.0"
lodash.sortby "^4.7.0"
tr46 "^1.0.1"
webidl-conversions "^4.0.2"


whatwg-url@^8.0.0, whatwg-url@^8.5.0:
version "8.7.0"
Expand Down