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

feat: Create navigation bar #27

Merged
merged 41 commits into from
Jan 29, 2024
Merged

feat: Create navigation bar #27

merged 41 commits into from
Jan 29, 2024

Conversation

juanpb96
Copy link
Owner

Description

Include NavigationBar component and associated components as isolated components in the Storybook. Plus additional config.

Project: Issue link

Changes

  • Add folder structure for NavigationBar components
  • Include framer motion for animations
  • Include react router dom
  • Create MenuButton, Menu, and NavigationBar components
  • Add styles and active states
  • Add routing scaffolding

Evidence

  • Mobile

Open navigation menu on mobile

-Desktop

Navigation menu on desktop

@juanpb96
Create folder structure for NavigationBar
4c75882
@juanpb96
Install framer motion for animations
4da8da6
@juanpb96
Create MenuButton component, add animations and basic styles
d6bbe8e
@juanpb96
Install Storybook preview api
65532e7
@juanpb96
Remove Storybook addon-styling for Sass since its a dependency for we…
e152c13 
…bpack only
@juanpb96
Fix class name for styles and update component to avoid style collisions
3493288
@juanpb96
Add animation variants for MenuButton component
8d2361c
@juanpb96
Include variants and reduced motion support for middle rect
3a31d9f
@juanpb96
Create story file for MenuButton component
ed8ca45
@juanpb96
Create Menu component with navigation items, include story and styles
7166a63
@juanpb96
Install react-router-dom
538627c
@juanpb96
Include NavLinks, and implement active selection with motion component
04822d5
@juanpb96
Add withStoriesRouter decorator to test Menu behavior
19c9f45
@juanpb96
Add routing scaffolding
abf1a62
@juanpb96
Replace file extension
c97320a
@juanpb96
Add Menu on tablet styles, story and adjustments
48f98a1
@juanpb96
Add useScreenType hook
750fc69
@juanpb96
Add custom hook to set active navbar item index
6b00eab
@juanpb96
Update breakpoint to prevent collisions and export screen type
20deb05
@juanpb96
Add router outlet and reduced motion for the whole app
726e225
@juanpb96
Add styles for menu in desktop size
3acbf5b
@juanpb96
Add navbar layout
b65f50d
@juanpb96
Add default Menu story
dab0e9b
@juanpb96
Add animation variants according to viewport size
3c7d142
@juanpb96
Add withRouter decorator
ad6dcbb
@juanpb96
Prevent clicks on span tag to avoid side effects on animation
94f2763
@juanpb96
Render menu via lazy loading
31518de
@juanpb96
Add styles for hamburger button position
d3ca8f9
@juanpb96
Include animation for toggle animation on hamburger menu click
3a8a669
@juanpb96
Create a constants file for stories viewports
ff13025
@juanpb96 juanpb96 added this to the v1.0.0 milestone Jan 21, 2024
@juanpb96 juanpb96 linked an issue Jan 21, 2024 that may be closed by this pull request
Create Navigation Bar #23
Closed
9 tasks
@juanpb96
Copy link
Owner Author

Issue related to Storybook tests using default viewport as a fallback was addressed based on: storybookjs/test-runner#85

@juanpb96 juanpb96 merged commit 3b029cb into main Jan 29, 2024
2 checks passed
@juanpb96 juanpb96 deleted the feat/create-navigation-bar branch April 21, 2024 03:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v1.0.0
Development

Successfully merging this pull request may close these issues.

Create Navigation Bar
1 participant
@juanpb96