Add header, footer and magnification properties to Dock

[davidbejarcaceres]

I'm submitting a ...

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
I have created a demo in CodeSandbox:

https://codesandbox.io/s/primereact-test-forked-wqr1f?file=/src/DockDemo.js

Current behavior
Now there is no option to move the Dock if we have content below the Dock, so can´t click elements below

Expected behavior
A button in the Dock, after click the button, the Dock should change position.

Minimal reproduction of the problem with instructions
Try add the Dock to a Page, if you have elements behind/under the Dock, you wont be able to interact with them, only moving the Dock will allow it.

Please tell us about your environment:
React 16.+
Chrome: 95.***

• React version:
  React 16.+

• PrimeReact version:
  6.5

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Javascript

[melloware]

Why not submit this as a PR?

[mertsincan]

Hi,

You can use;

<Dock position={currentPosition} header={<button onClick={() => setCurrentPosition(...)}>Test</button>} magnification={false} .../>