Adding QR code with link to current page in the header drop-down.

Author: krulis-martin

package.json

@@ -79,6 +79,7 @@
     "react-immutable-proptypes": "^2.2.0",
     "react-intl": "6.8.9",
     "react-motion": "^0.5.2",
+    "react-qr-code": "^2.0.15",
     "react-redux": "^9.2.0",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",

src/components/layout/Header/Header.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import HeaderNotificationsContainer from '../../../containers/HeaderNotificationsContainer';
 import HeaderSystemMessagesContainer from '../../../containers/HeaderSystemMessagesContainer';
 import HeaderLanguageSwitching from '../HeaderLanguageSwitching';
+import HeaderQRCodeDropdown from '../HeaderQRCodeDropdown';
 import MemberGroupsDropdown from '../../Groups/MemberGroupsDropdown';
 import ClientOnly from '../../helpers/ClientOnly';
 import FetchManyResourceRenderer from '../../helpers/FetchManyResourceRenderer';
@@ -65,6 +66,7 @@ class Header extends Component {
           </ClientOnly>
 
           <ul className="navbar-nav ms-auto">
+            <HeaderQRCodeDropdown />
             {isLoggedIn && <HeaderSystemMessagesContainer locale={currentLang} />}
             <HeaderNotificationsContainer />
             <HeaderLanguageSwitching availableLangs={availableLangs} currentLang={currentLang} setLang={setLang} />

src/components/layout/HeaderQRCodeDropdown/HeaderQRCodeDropdown.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Dropdown } from 'react-bootstrap';
+import QRCode from 'react-qr-code';
+
+import Icon from '../../icons';
+
+const preventClickPropagation = ev => ev.stopPropagation();
+
+const HeaderQRCodeDropdown = () => (
+  <Dropdown as="li" align="end" navbar className="nav-item" data-bs-theme="light">
+    <Dropdown.Toggle as="a" id="dropdown-qr-code-link" bsPrefix="nav-link">
+      <Icon icon="qrcode" />
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu rootCloseEvent="mousedown" onMouseDown={preventClickPropagation}>
+      <Dropdown.Header>
+        <FormattedMessage id="app.QRCodeDropdown.title" defaultMessage="QR code link to current page" />
+      </Dropdown.Header>
+
+      <Dropdown.Divider className="mb-0" />
+
+      <div className="mx-5 my-4 text-center">
+        <QRCode size={256} value={window.location.href} />
+      </div>
+      <p className="mx-3 small">
+        <code className="small">{window.location.href}</code>
+      </p>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+HeaderQRCodeDropdown.propTypes = {};
+
+export default HeaderQRCodeDropdown;

src/components/layout/HeaderQRCodeDropdown/index.js

@@ -0,0 +1,2 @@
+import HeaderQRCodeDropdown from './HeaderQRCodeDropdown.js';
+export default HeaderQRCodeDropdown;

yarn.lock

@@ -11887,6 +11887,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qr.js@npm:0.0.0":
+  version: 0.0.0
+  resolution: "qr.js@npm:0.0.0"
+  checksum: 5ac6c393967bdeaa660e7fd3a501a25eb538c1f6008a4d30ab2b97bbe520e5c236530090773f1578aa0a523cdaa6923c866615e21143f9e7cd22abd41c789b69
+  languageName: node
+  linkType: hard
+
 "qs@npm:6.13.0":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
@@ -12191,6 +12198,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-qr-code@npm:^2.0.15":
+  version: 2.0.15
+  resolution: "react-qr-code@npm:2.0.15"
+  dependencies:
+    prop-types: ^15.8.1
+    qr.js: 0.0.0
+  peerDependencies:
+    react: "*"
+  checksum: 4124b7c2ce71bfe94279d85322175c881ba87dcc9b67f3c6d6e2806854a8792cf5f9ed8e10ea04c22e39aa060ef12fb39e679e780cba14f168d3cd6cffb7086d
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^9.2.0":
   version: 9.2.0
   resolution: "react-redux@npm:9.2.0"
@@ -12454,6 +12473,7 @@ __metadata:
     react-intl: 6.8.9
     react-intl-translations-manager: ^5.0.3
     react-motion: ^0.5.2
+    react-qr-code: ^2.0.15
     react-redux: ^9.2.0
     react-router: ^6.28.0
     react-router-dom: ^6.28.0