Commit 11716596 authored by Mathias Engelbrecht Pilegård's avatar Mathias Engelbrecht Pilegård
Browse files

added arrow icons to user dropdown menu, fixed some misallignments

parent faf11e7c
[{"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\index.js":"1","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\App.js":"2","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationbar.js":"3","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\Navigationbar.js":"4","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\searchbar\\Searchbar.js":"5","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\userDropdownMenu\\UserDropdownMenu.js":"6","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationLinks\\NavigationLinks.js":"7","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\logo\\Logo.js":"8"},{"size":197,"mtime":1626217127935,"results":"9","hashOfConfig":"10"},{"size":415,"mtime":1626443307677,"results":"11","hashOfConfig":"10"},{"size":2293,"mtime":1626443292886,"results":"12","hashOfConfig":"10"},{"size":860,"mtime":1626449892823,"results":"13","hashOfConfig":"10"},{"size":520,"mtime":1626448630699,"results":"14","hashOfConfig":"10"},{"size":1840,"mtime":1626448296210,"results":"15","hashOfConfig":"10"},{"size":639,"mtime":1626449425478,"results":"16","hashOfConfig":"10"},{"size":587,"mtime":1626449789087,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"iyhzrm",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\index.js",[],["35","36"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\App.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationbar.js",["37","38","39"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\Navigationbar.js",["40"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\searchbar\\Searchbar.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\userDropdownMenu\\UserDropdownMenu.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationLinks\\NavigationLinks.js",["41","42","43","44"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\logo\\Logo.js",["45","46","47","48","49","50"],{"ruleId":"51","replacedBy":"52"},{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","severity":1,"message":"56","line":1,"column":17,"nodeType":"57","messageId":"58","endLine":1,"endColumn":26},{"ruleId":"59","severity":1,"message":"60","line":23,"column":19,"nodeType":"61","endLine":23,"endColumn":66},{"ruleId":"59","severity":1,"message":"60","line":24,"column":19,"nodeType":"61","endLine":24,"endColumn":63},{"ruleId":"55","severity":1,"message":"56","line":1,"column":17,"nodeType":"57","messageId":"58","endLine":1,"endColumn":26},{"ruleId":"55","severity":1,"message":"62","line":1,"column":17,"nodeType":"57","messageId":"58","endLine":1,"endColumn":23},{"ruleId":"55","severity":1,"message":"63","line":1,"column":25,"nodeType":"57","messageId":"58","endLine":1,"endColumn":33},{"ruleId":"55","severity":1,"message":"64","line":1,"column":35,"nodeType":"57","messageId":"58","endLine":1,"endColumn":44},{"ruleId":"55","severity":1,"message":"65","line":3,"column":10,"nodeType":"57","messageId":"58","endLine":3,"endColumn":25},{"ruleId":"55","severity":1,"message":"62","line":1,"column":17,"nodeType":"57","messageId":"58","endLine":1,"endColumn":23},{"ruleId":"55","severity":1,"message":"63","line":1,"column":25,"nodeType":"57","messageId":"58","endLine":1,"endColumn":33},{"ruleId":"55","severity":1,"message":"64","line":1,"column":35,"nodeType":"57","messageId":"58","endLine":1,"endColumn":44},{"ruleId":"55","severity":1,"message":"65","line":3,"column":10,"nodeType":"57","messageId":"58","endLine":3,"endColumn":25},{"ruleId":"59","severity":1,"message":"60","line":12,"column":11,"nodeType":"61","endLine":12,"endColumn":58},{"ruleId":"59","severity":1,"message":"60","line":13,"column":11,"nodeType":"61","endLine":13,"endColumn":55},"no-native-reassign",["66"],"no-negated-in-lhs",["67"],"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'useRef' is defined but never used.","'useState' is defined but never used.","'useEffect' is defined but never used.","'FontAwesomeIcon' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
[{"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\index.js":"1","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\App.js":"2","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationbar.js":"3","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\Navigationbar.js":"4","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\searchbar\\Searchbar.js":"5","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\userDropdownMenu\\UserDropdownMenu.js":"6","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationLinks\\NavigationLinks.js":"7","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\logo\\Logo.js":"8"},{"size":197,"mtime":1626217127935,"results":"9","hashOfConfig":"10"},{"size":415,"mtime":1626443307677,"results":"11","hashOfConfig":"10"},{"size":2293,"mtime":1626443292886,"results":"12","hashOfConfig":"10"},{"size":860,"mtime":1626449892823,"results":"13","hashOfConfig":"10"},{"size":520,"mtime":1626448630699,"results":"14","hashOfConfig":"10"},{"size":2405,"mtime":1626464321855,"results":"15","hashOfConfig":"10"},{"size":639,"mtime":1626449425478,"results":"16","hashOfConfig":"10"},{"size":587,"mtime":1626449789087,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"iyhzrm",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"27","usedDeprecatedRules":"20"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"34","usedDeprecatedRules":"20"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":"37","usedDeprecatedRules":"20"},"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\index.js",[],["38","39"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\App.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationbar.js",["40","41","42"],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\Navigationbar.js",["43"],"import React, { Component } from 'react'\r\nimport \"./navigationbar.css\"\r\nimport Logo from './logo/Logo'\r\nimport NavigationLinks from './navigationLinks/NavigationLinks'\r\nimport Searchbar from './searchbar/Searchbar'\r\nimport UserDropdownMenu from './userDropdownMenu/UserDropdownMenu'\r\n\r\nclass Navigationbar extends React.Component {\r\n render() {\r\n return (\r\n <div className=\"navbar\" >\r\n <div className=\"header-content\">\r\n <div className=\"title-navigation-links-container\">\r\n <Logo />\r\n <NavigationLinks />\r\n </div>\r\n <div className=\"searchbar-profile-container\">\r\n <ul className=\"right-unstyled-navbar\">\r\n <Searchbar />\r\n <UserDropdownMenu />\r\n </ul>\r\n </div>\r\n </div>\r\n </div >\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default Navigationbar","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\searchbar\\Searchbar.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\userDropdownMenu\\UserDropdownMenu.js",[],"C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\navigationLinks\\NavigationLinks.js",["44","45","46","47"],"import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./navigationLinks.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\nfunction NavigationLinks() {\r\n return (\r\n <ul className=\"left-unstyled-navbar\">\r\n <li className=\"report-bug-navbutton-container\">\r\n <a className=\"activeUnderlined\" href=\"./\">Report Bugs</a>\r\n </li>\r\n <li className=\"manage-projects-navbutton-container\">\r\n <a href=\"./\">Projects</a>\r\n </li>\r\n <li className=\"manage-team-navbutton-container\">\r\n <a href=\"./\">Team</a>\r\n </li>\r\n </ul>\r\n )\r\n}\r\n\r\nexport default NavigationLinks","C:\\Users\\Bruger\\Desktop\\Web-projects\\pipit\\client\\src\\components\\navigationbar\\logo\\Logo.js",["48","49","50","51","52","53"],"import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./logo.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport logo_picture from \"../../../images/bird-logo.jpg\"\r\nimport logo_text from \"../../../images/logo-text.jpg\"\r\n\r\nfunction Logo() {\r\n return (\r\n <h1 className=\"title\">\r\n <span className=\"title-icon\">\r\n <a id=\"logo\" href=\"./\">\r\n <img src={logo_picture} width=\"24\" height=\"24\"></img>\r\n <img src={logo_text} width=\"48\" height=\"24\"></img>\r\n </a>\r\n </span>\r\n </h1>\r\n )\r\n}\r\n\r\nexport default Logo",{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"58","severity":1,"message":"59","line":1,"column":17,"nodeType":"60","messageId":"61","endLine":1,"endColumn":26},{"ruleId":"62","severity":1,"message":"63","line":23,"column":19,"nodeType":"64","endLine":23,"endColumn":66},{"ruleId":"62","severity":1,"message":"63","line":24,"column":19,"nodeType":"64","endLine":24,"endColumn":63},{"ruleId":"58","severity":1,"message":"59","line":1,"column":17,"nodeType":"60","messageId":"61","endLine":1,"endColumn":26},{"ruleId":"58","severity":1,"message":"65","line":1,"column":17,"nodeType":"60","messageId":"61","endLine":1,"endColumn":23},{"ruleId":"58","severity":1,"message":"66","line":1,"column":25,"nodeType":"60","messageId":"61","endLine":1,"endColumn":33},{"ruleId":"58","severity":1,"message":"67","line":1,"column":35,"nodeType":"60","messageId":"61","endLine":1,"endColumn":44},{"ruleId":"58","severity":1,"message":"68","line":3,"column":10,"nodeType":"60","messageId":"61","endLine":3,"endColumn":25},{"ruleId":"58","severity":1,"message":"65","line":1,"column":17,"nodeType":"60","messageId":"61","endLine":1,"endColumn":23},{"ruleId":"58","severity":1,"message":"66","line":1,"column":25,"nodeType":"60","messageId":"61","endLine":1,"endColumn":33},{"ruleId":"58","severity":1,"message":"67","line":1,"column":35,"nodeType":"60","messageId":"61","endLine":1,"endColumn":44},{"ruleId":"58","severity":1,"message":"68","line":3,"column":10,"nodeType":"60","messageId":"61","endLine":3,"endColumn":25},{"ruleId":"62","severity":1,"message":"63","line":12,"column":11,"nodeType":"64","endLine":12,"endColumn":58},{"ruleId":"62","severity":1,"message":"63","line":13,"column":11,"nodeType":"64","endLine":13,"endColumn":55},"no-native-reassign",["69"],"no-negated-in-lhs",["70"],"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'useRef' is defined but never used.","'useState' is defined but never used.","'useEffect' is defined but never used.","'FontAwesomeIcon' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 30\n }, this), \" Messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 30\n }, this), \" Preferences\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 30\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon> Messages</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \" Messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 17\n }, this), \" Preferences\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 17\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\">\r\n </FontAwesomeIcon> Messages</a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\">\r\n </FontAwesomeIcon> Preferences</a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\">\r\n </FontAwesomeIcon> Sign out</a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \"Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 52,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 17\n }, this), \"Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 17\n }, this), \"Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>\r\n Messages\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon>\r\n Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon>\r\n Sign out\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 30\n }, this), \" Account \", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 86\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 30\n }, this), \" Messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 30\n }, this), \" Preferences\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 30\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"user\"></FontAwesomeIcon> Account <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon></a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon> Messages</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \" Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 17\n }, this), \" Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 47,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 17\n }, this), \" Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 17\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon> Account\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon> Messages\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: [/*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 30\n }, this), \" Account\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 89\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 30\n }, this), \" Messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 30\n }, this), \" Preferences\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 30\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 44,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"user\"></FontAwesomeIcon> Account</a><FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon> Messages</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \"Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 52,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 17\n }, this), \" Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 17\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>\r\n Messages\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \"Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 52,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 17\n }, this), \"Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 17\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>\r\n Messages\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon>\r\n Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \" Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 51,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 17\n }, this), \" Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\",\n className: \"arrow-right-icon\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 17\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon> Messages\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \"Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 52,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 57,\n columnNumber: 17\n }, this), \"Preferences\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 56,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 55,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 17\n }, this), \"Sign out\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 66,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>\r\n Messages\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon>\r\n Preferences\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon>\r\n Sign out\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navigationbar\\\\userDropdownMenu\\\\UserDropdownMenu.js\",\n _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport \"./userDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nfunction UserDropdownMenu() {\n _s();\n\n const dropdownRef = useRef(null);\n const [isActive, setIsActive] = useState(false);\n\n const onClick = () => setIsActive(!isActive);\n\n useEffect(() => {\n const pageClickEvent = e => {\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n setIsActive(!isActive);\n }\n }; // If the item is active (ie open) then listen for clicks\n\n\n if (isActive) {\n window.addEventListener('click', pageClickEvent);\n }\n\n return () => {\n window.removeEventListener('click', pageClickEvent);\n };\n }, [isActive]);\n return /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"navbar-user-dropdown-container\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n onClick: onClick,\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"user-icon\",\n icon: \"user-circle\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n className: \"down-arrow\",\n icon: \"angle-down\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 36,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 34,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n ref: dropdownRef,\n className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n children: /*#__PURE__*/_jsxDEV(\"ul\", {\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"user\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 17\n }, this), \"Account\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"chevron-right\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 45,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 42,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"envelope\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 17\n }, this), \" Messages\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 48,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"cog\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 30\n }, this), \" Preferences\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 53,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"./\",\n children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n icon: \"sign-out-alt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 30\n }, this), \" Sign out\"]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 54,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 40,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 39,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 5\n }, this);\n}\n\n_s(UserDropdownMenu, \"+2ios9YLl+dWpD7Y2mDqdcbDdLo=\");\n\n_c = UserDropdownMenu;\nexport default UserDropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"UserDropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navigationbar/userDropdownMenu/UserDropdownMenu.js"],"names":["React","useRef","useState","useEffect","FontAwesomeIcon","UserDropdownMenu","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport \"./userDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nfunction UserDropdownMenu() {\r\n const dropdownRef = useRef(null);\r\n const [isActive, setIsActive] = useState(false);\r\n const onClick = () => setIsActive(!isActive);\r\n\r\n useEffect(() => {\r\n const pageClickEvent = (e) => {\r\n if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n setIsActive(!isActive);\r\n }\r\n };\r\n\r\n // If the item is active (ie open) then listen for clicks\r\n if (isActive) {\r\n window.addEventListener('click', pageClickEvent);\r\n }\r\n\r\n return () => {\r\n window.removeEventListener('click', pageClickEvent);\r\n }\r\n\r\n }, [isActive]);\r\n\r\n\r\n\r\n return (\r\n <li>\r\n <div className=\"navbar-user-dropdown-container\">\r\n <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n </button>\r\n {/* show submenu?*/}\r\n <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n <ul>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>\r\n Account\r\n <FontAwesomeIcon icon=\"chevron-right\"></FontAwesomeIcon>\r\n </a>\r\n </li>\r\n <li>\r\n <a href=\"./\">\r\n <FontAwesomeIcon icon=\"envelope\">\r\n </FontAwesomeIcon> Messages</a>\r\n </li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"cog\"></FontAwesomeIcon> Preferences</a></li>\r\n <li><a href=\"./\"><FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon> Sign out</a></li>\r\n </ul>\r\n </div>\r\n </div>\r\n </li >\r\n )\r\n}\r\n\r\nexport default UserDropdownMenu"]},"metadata":{},"sourceType":"module"}
\ No newline at end of file
.title {
display: flex;
display:flex;
margin-top: 0px;
margin-bottom: 0px;
}
.title-icon {
......
.left-unstyled-navbar {
margin: 0;
padding: 0;
display: flex;
padding-left: 20px;
}
......@@ -8,10 +12,12 @@
}
.left-unstyled-navbar .activeUnderlined {
border-bottom: 1.5px solid rgba(192, 192, 192, 1);
border-bottom: 2px solid rgb(51, 82, 177);
}
.left-unstyled-navbar li a {
padding-bottom: 3px;
padding-top: 3px;
text-decoration: none;
display: inline-block;
margin: 10px;
......@@ -29,5 +35,5 @@
}
.left-unstyled-navbar li a:hover {
border-bottom: 1.5px solid rgba(192, 192, 192, 1);
border-bottom: 1px solid rgb(51, 82, 177);
}
\ No newline at end of file
......@@ -25,9 +25,7 @@ align-items: stretch;
}
.searchbar-profile-container {
flex: 0 0 auto;
border-top: 0;
padding: 0;
display: flex;
}
.right-unstyled-navbar {
......
......@@ -14,6 +14,10 @@
color: #333;
}
.navbar-searchbar-container a:hover {
color: rgb(51, 82, 177);
}
.navbar-searchbar-container input:focus {
outline:none;
}
\ No newline at end of file
}
......@@ -38,10 +38,29 @@ function UserDropdownMenu() {
{/* show submenu?*/}
<div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>
<ul>
<li><a href="./"><FontAwesomeIcon icon="user"></FontAwesomeIcon> Account</a></li>
<li><a href="./"><FontAwesomeIcon icon="envelope"></FontAwesomeIcon> Messages</a></li>
<li><a href="./"><FontAwesomeIcon icon="cog"></FontAwesomeIcon> Preferences</a></li>
<li><a href="./"><FontAwesomeIcon icon="sign-out-alt"></FontAwesomeIcon> Sign out</a></li>
<li>
<a href="./">
<FontAwesomeIcon icon="user"></FontAwesomeIcon> Account
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</a>
</li>
<li>
<a href="./">
<FontAwesomeIcon icon="envelope"></FontAwesomeIcon> Messages
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</a>
</li>
<li>
<a href="./">
<FontAwesomeIcon icon="cog"></FontAwesomeIcon> Preferences
<FontAwesomeIcon icon="chevron-right" className="arrow-right-icon"></FontAwesomeIcon>
</a>
</li>
<li>
<a href="./">
<FontAwesomeIcon icon="sign-out-alt"></FontAwesomeIcon> Sign out
</a>
</li>
</ul>
</div>
</div>
......
.navbar-user-dropdown-container button {
cursor: pointer;
background-color: white;
border: 1px solid #333;
border-radius: 25px;
......@@ -48,7 +49,7 @@
font-size: 12px;
text-decoration: none;
color: #333333;
border-bottom: 1px solid darkgray;
border-bottom: 1px solid lightgray;
padding: 15px 20px;
display: block;
}
......@@ -59,4 +60,8 @@
.user-dropDown-menu-content li a:hover {
background-color: whitesmoke;
}
.arrow-right-icon {
float: right;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment