[Feature] Add this beautiful hover effect about react-windows-ui

[virtualvivek]

Hi @Myzel394 ,
We have introduces 3 new components which uses the same effects as of this codepen https://codepen.io/21stCenturyJonas/pen/gQGXdd

Components

NavBarLinkFluent
ButtonFluent
LinkCompoundFluent

Fluent Effect Register

RegisterFluentEffect

Issues

1. When defining Fluent Components on different Routes the fluent positioning deviates on mouse hover
2. Typically this issue arises when using NavBarLinkFluent on the root and it deviates Fluent Components inside

Reproduce The environment

@Myzel394 can you check this in your system
You will run the demo after some changes:

1. In File index.js

render() {
  return (
    <>
    <Router basename="react-windows-ui">

      <TransitionToLeft />

      <SystemThemeFollower/>

      {/* Register the fluent effect before using NavBarLinkFluent */}
      <RegisterFluentEffect/>

      <NavBar 
        title="React Windows UI"
        titleShort={<i className="icons10-windows"></i>}
      //titleShort="R" render text or icons
      //mobileHasIcons={true}
        shadowOnScroll={true}>

        {/* <NavBarLinkFluent
          to="/"
          exact={true}
          text="Home"
          icon={<i className="icons10-home"></i>}
        /> */}
  {/*------------------------------------------------------------------------
    ----> UnComment This Component
  --------------------------------------------------------------------------*/}

</NavBar>

2. Run the demo on browser and clicking few times on NavBarFluent Component and go to Links Tab and clicking on LinkCompoundFluent

Please provide us the result if you suspect any issue.

[virtualvivek]

Since no activity from last few days we are closing this issue ,
@Myzel394 , if you suspect any issue by following above mention workflow you can reopen this issue anytime.