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

Added hover animations for nav icons #11075

Merged
merged 22 commits into from
Oct 3, 2023
Merged

Added hover animations for nav icons #11075

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
dab763a
Added hover animations for nav icons
rohan9024 Jul 28, 2023
176aa5f
Removed rotation on translation icon
rohan9024 Aug 1, 2023
37e05c7
Rotated the globe icon to 10 degrees and added the languages text back
rohan9024 Aug 11, 2023
67a3cd6
Tried fixing the merge conflicts in yarn lock file related to lodash.…
rohan9024 Aug 11, 2023
a41da63
Tried another way of fixing the conflict
rohan9024 Aug 12, 2023
e6c49f0
Made the requested changes in previous PR
rohan9024 Aug 26, 2023
a199ecf
Update src/components/Nav/index.tsx
rohan9024 Sep 19, 2023
0c7d993
Update src/components/Nav/index.tsx
rohan9024 Sep 19, 2023
59b5d0a
Apply suggestions from code review
rohan9024 Sep 19, 2023
4f26736
Update src/components/Nav/index.tsx
rohan9024 Sep 19, 2023
edcd953
Update src/components/Nav/index.tsx
rohan9024 Sep 19, 2023
f9eeaa8
Update src/components/Nav/index.tsx
rohan9024 Sep 19, 2023
bbb6094
Made changes according to the suggestions received.
rohan9024 Sep 19, 2023
454130f
Merge branch 'dev' of https://github.com/rohan9024/ethereum-org-websi…
rohan9024 Sep 19, 2023
08ba7bc
Removed the nested buttonlink
rohan9024 Sep 21, 2023
0d6fc25
Update src/components/Nav/index.tsx
rohan9024 Sep 22, 2023
dee0a07
Reverted back the yarn.lock changes, removed some unnecessary comments
rohan9024 Sep 22, 2023
d65bb11
Reverted back the yarn.lock changes, removed some unnecessary comments
rohan9024 Sep 22, 2023
9311542
Removed additional transitions on languages icon
rohan9024 Sep 22, 2023
a2be603
Merge branch 'ethereum:dev' into dev
rohan9024 Sep 30, 2023
cbe201b
cleanup code and add rotate on icon for language
corwintines Oct 3, 2023
51921ae
undo yarn.lock changes
corwintines Oct 3, 2023
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
30 changes: 27 additions & 3 deletions src/components/Nav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC, useRef } from "react"
import React, { FC, useRef, useState } from "react"
import { Icon, Flex, Box, HStack, useDisclosure } from "@chakra-ui/react"
import { MdWbSunny, MdBrightness2, MdLanguage } from "react-icons/md"

Expand Down Expand Up @@ -31,6 +31,7 @@ const Nav: FC<IProps> = ({ path }) => {
const searchModalDisclosure = useDisclosure()

const navWrapperRef = useRef(null)
const [languagesHover, setLanguagesHover] = useState(false)

rohan9024 marked this conversation as resolved.
Show resolved Hide resolved
return (
<Box position="sticky" top={0} zIndex={100} width="full">
Expand Down Expand Up @@ -83,6 +84,7 @@ const Nav: FC<IProps> = ({ path }) => {
/>
<HStack spacing={2} hideBelow="lg">
<IconButton
transition="transform 0.5s, color 0.2s"
icon={isDarkTheme ? <MdWbSunny /> : <MdBrightness2 />}
aria-label={
isDarkTheme
Expand All @@ -92,16 +94,38 @@ const Nav: FC<IProps> = ({ path }) => {
variant="ghost"
isSecondary
px={1.5}
_hover={{
transform: "rotate(30deg)", // Rotate the icon to 30 degrees on hover
color: "blue", // Change color to blue on hover
rohan9024 marked this conversation as resolved.
Show resolved Hide resolved
}}
rohan9024 marked this conversation as resolved.
Show resolved Hide resolved
onClick={toggleColorMode}
></IconButton>

<ButtonLink
onMouseOver={() => setLanguagesHover(true)}
onMouseOut={() => setLanguagesHover(false)}
to={`/languages/${fromPageParameter}`}
leftIcon={<Icon as={MdLanguage} />}
variant="ghost"
isSecondary
px={1.5}
_hover={{
color: "primary.hover", // Change color to blue on hover
}}
>
{t("languages")} {i18n.language.toUpperCase()}
<Box mr={2} mt={2}>
{" "}
{/* Add spacing between the text and the icon */}
<Icon
rohan9024 marked this conversation as resolved.
Show resolved Hide resolved
as={MdLanguage}
style={{
transition: "transform 0.3s ease-in-out, color 0.2s", // Apply the transition to the icon
transform: languagesHover
? "rotate(30deg)"
: "rotate(0deg)", // Rotate the icon to 30 degrees on hover
}}
Copy link
Contributor

@TylerAPfledderer TylerAPfledderer Sep 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a couple of pretty cool things to do here. Both transition and transform are style props, so they should not be under the style prop.

Secondly, we can put transform under the hover pseudo and not waste energy on useState. This is a two step process.

  1. Add data-group to ButtonLink
  2. In the Icon use the _groupHover prop which will target data-group with a descendant selector. so when hovering ButtonLink the styles under this prop will trigger. Then no need for this ternary!

So in short...

<ButtonLink
  // -- Other props -- //
  data-group
  leftIcon={
    <Icon
      as={MdLanguage}
      transition="transform 0.3s ease-in-out, color 0.2s"
      // _groupHover renders "[data-group]:hover &"
      _groupHover={{
        transform: "rotate(30deg)"
      }}
    />
  }
/>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rohan9024 marking this as unresolved.

Currently we have the _groupHover but not the data-group set in the parent ButtonLink.

/>
</Box>
<span>Languages {i18n.language.toUpperCase()}</span>
</ButtonLink>
</HStack>
</Flex>
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Open in desktop
rohan9024 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -5099,9 +5099,9 @@
"@types/lodash" "*"

"@types/lodash@*", "@types/lodash@^4.14.167", "@types/lodash@^4.14.92":
version "4.14.196"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.196.tgz#a7c3d6fc52d8d71328b764e28e080b4169ec7a95"
integrity sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==
version "4.14.195"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==

"@types/luxon@^2.3.2":
version "2.4.0"
Expand Down
Loading