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.

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

feat(elements): new component 'ino-nav-menu' #1148

Draft
wants to merge 37 commits into
base: master
Choose a base branch
from

Conversation

iandi09
Copy link
Collaborator

@iandi09 iandi09 commented Dec 22, 2023

Closes #1075

  • implemented a sticky navigation menu that dynamically lists the names of sections present on the current page
  • allows smooth scrolling of a section into the viewport by clicking the section name in the menu
  • section name gets highlighted when section is in viewport
  • integrated in landing page (guides - see screenshot below)

image

Additions

  • add Method reInitSections() for manual re-initiation of sections
  • fix bug: no sections can be found if ino-nav-menu lies further up in DOM then their corresponding sections
  • add sectionContainerID for better autodetection (makes it possible to have multiple ino-nav-menu on one page)
  • add Prop sectionID to ino-nav-menu-section so that consumers can set their own ids. If not set default to build ID From section name
  • add prop stories for ino-nav-menu-section
  • add prop stories for ino-nav-menu
  • edit stories so that the "stickiness" of ino-nav-menu can be seen
  • add Default values for intersectionObserverConfig and scrollOffset
  • add a switch to expand the stories height to see the smooth-scroll
  • add prop loading and a skeleton loader
  • moved skeleton-loading animation from ino-avatar to _animation.scss

@iandi09 iandi09 changed the title Elements #1075 ino nav menu feat(elements): new component 'ino-nav-menu' Dec 22, 2023
Copy link
Collaborator

@MariaLStefan MariaLStefan left a comment

Choose a reason for hiding this comment

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

I enjoyed this review very much, i like how you implemented this component and even added some testing! Great job 👍

But some Error occurs on the guides page... am I the only one with this?
Bildschirmfoto 2024-01-09 um 19 58 24

Comment on lines 226 to 227
href={`#${id}`}
onClick={(e) => this.handleAnchorClick(e, id)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we even need a href if we prevent the default action through handleAnchorClick? Or is it needed for accessibility reasons?

iandi09 and others added 21 commits February 23, 2024 17:22
- add stories for props `sectionName`, `sectionId` & `showTitle`
- use theme
- add word-break for sections
- remove nesting
- tweak paddings
- add max-height to every story to see stickyness of nav
- intersectionObserverConfig
- scrollOffset
…tion

- allows multiple instances of ino-nav-menu on one page
- add possible loading skeleton div (needs to be visually implemented)
- add possibility to use own section IDs
…further up in DOM & show functionality better

- add `sectionsRenderObserver` before initiating of `ino-nav-menu` section points
- add switch to shrink playground and show stickiness of `ino-nav-menu`
- add active-section change
- move skeleton-loading to animation
- ino-avatar: use new skeleton-loading mixin
MariaLStefan and others added 11 commits February 23, 2024 17:22
…er to init Sections

- add Event Emitter for sectionReady in ino-nav-section
- needs fix: activeSection cannot be emitted in autodetect right now
- needs fix: story for sections does not work, check setSectionsFromProps
# Conflicts:
#	packages/elements/src/components.d.ts
#	packages/landingpage/app/[lang]/getting-started/_components/layout.tsx
#	packages/landingpage/app/[lang]/getting-started/_components/menuSection.tsx
#	packages/landingpage/app/[lang]/getting-started/_components/navigationMenu.module.scss
#	packages/landingpage/app/[lang]/getting-started/_components/navigationMenu.tsx
#	packages/landingpage/app/[lang]/getting-started/angular/angular-guide.mdx
#	packages/landingpage/app/[lang]/getting-started/javascript/javascript-guide.mdx
#	packages/landingpage/app/[lang]/getting-started/react/react-guide.mdx
#	packages/landingpage/app/[lang]/getting-started/vue/vue-guide.mdx
#	packages/landingpage/utils/elementsWrapper.ts
@janivo janivo force-pushed the elements-#1075-ino-nav-menu branch from 23ce579 to bb90469 Compare March 26, 2024 14:41
@janivo janivo marked this pull request as draft April 5, 2024 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create component: ino-nav-menu
3 participants