Add Bottom Navigation #64

Merged
snedadah merged 23 commits from b72zhou-nav-bottom into main 2 months ago
Collaborator
https://b72zhou-nav-bottom-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/
b72zhou added 6 commits 2 months ago
b72zhou added 1 commit 2 months ago
f802dbfd8e resolve lint
b72zhou added 1 commit 2 months ago
4b968ea89e Merge branch 'main' into b72zhou-nav-bottom
b72zhou requested review from j285he 2 months ago
b72zhou requested review from snedadah 2 months ago
b72zhou requested review from e26chiu 2 months ago
snedadah reviewed 2 months ago
transition: transform 0.25s ease-out;
}
.item:hover:after {
Owner

Nice animation!

Nice animation!
b72zhou marked this conversation as resolved
export function BottomNav(props: PageLinks) {
return (
<div className={styles.container}>
<Arrow isPointRight={true}></Arrow>
Owner

I think we should also move both arrows inside their respectives Links so that they are clickable.

Furthermore, I feel that the arrow and the text are a bit far away, is it possible to match the spacing on figma a bit better? Specefifically to have the arrow and the text be close to each other, and more out to the side.

(You may want to try adding align-self: flex-start and align-self: flex-end to the leftNavGroup) instead of justify-content: space-around; on the parent element

I think it will be easier once they are both in the same root element, something like:

    <Link href={props.leftPage} className={styles.leftNavGroup}>
        <a className={styles.item}>View Co-ops</a>
           <Link href={props.leftPage}>
         <Arrow isPointRight={false}></Arrow>
      </Link>

I think we should also move both arrows inside their respectives Links so that they are clickable. Furthermore, I feel that the arrow and the text are a bit far away, is it possible to match the spacing on figma a bit better? Specefifically to have the arrow and the text be close to each other, and more out to the side. (You may want to try adding align-self: flex-start and align-self: flex-end to the leftNavGroup) instead of justify-content: space-around; on the parent element I think it will be easier once they are both in the same root element, something like: ``` <Link href={props.leftPage} className={styles.leftNavGroup}> <a className={styles.item}>View Co-ops</a> <Link href={props.leftPage}> <Arrow isPointRight={false}></Arrow> </Link> ``` ![](https://i.postimg.cc/43WTG0LK/image.png)
Poster
Collaborator

@snedadah I adjusted it a bit, could you please take a look? :)

@snedadah I adjusted it a bit, could you please take a look? :)
b72zhou marked this conversation as resolved
/>
</div>
<h2></h2>
Owner

is this here by accident :) ?

is this here by accident :) ?
b72zhou marked this conversation as resolved
b72zhou added 1 commit 2 months ago
002b5ff18d adjust space
snedadah added 2 commits 2 months ago
snedadah added 1 commit 2 months ago
fe874cbd29
Added calc values
snedadah reviewed 2 months ago
</a>
</Link>
<Link href={props.leftPage}>
<a className={styles.item}>Demographics</a>
Owner

Could we please use a prop for this text instead of hardcoding it? (and the view co-ops text as well)

Could we please use a prop for this text instead of hardcoding it? (and the view co-ops text as well)
b72zhou marked this conversation as resolved
snedadah reviewed 2 months ago
<div className={styles.subBox + " " + styles.subBoxLeft}>
<Link href={props.leftPage}>
<a>
<Arrow isPointRight={true}></Arrow>
Owner

nit: you can just do
<Arrow isPointRight></Arrow>

nit: you can just do ` <Arrow isPointRight></Arrow>`
b72zhou marked this conversation as resolved
b72zhou added 1 commit 2 months ago
0b2aee86ee modify props
b72zhou added 4 commits 2 months ago
b72zhou added 1 commit 2 months ago
a66bb7f82c fix import
b72zhou added 1 commit 2 months ago
989eb9f7e2 fix sample page
snedadah added 1 commit 2 months ago
9d420f8668
Updated demo text
snedadah added 1 commit 2 months ago
0e40097b70
Removed not used style
snedadah added 1 commit 2 months ago
c5e9b7f159
Fixed centering of arrow
snedadah approved these changes 2 months ago
snedadah left a comment
Owner

Nice work! Once again, I love that animation!

Nice work! Once again, I love that animation!
snedadah added 1 commit 2 months ago
4c977ad65d
Fixed arrow naming
snedadah merged commit fc2bf48706 into main 2 months ago
snedadah deleted branch b72zhou-nav-bottom 2 months ago
snedadah referenced this issue from a commit 2 months ago

Reviewers

j285he was requested for review 2 months ago
e26chiu was requested for review 2 months ago
snedadah approved these changes 2 months ago
continuous-integration/drone/push Build is passing
The pull request has been merged as fc2bf48706.
Sign in to join this conversation.
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/cs-2022-class-profile#64
Loading…
There is no content yet.