app-layout-frame 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +3 -0
  2. package/dist/index.css +11 -0
  3. package/dist/index.d.ts +4 -0
  4. package/dist/index.js +2 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.modern.js +2 -0
  7. package/dist/index.modern.js.map +1 -0
  8. package/dist/layout/components/AnnoucementsMenu/AnnouncementsMenu.d.ts +2 -0
  9. package/dist/layout/components/AnnoucementsMenu/index.d.ts +1 -0
  10. package/dist/layout/components/Brand/Brand.d.ts +4 -0
  11. package/dist/layout/components/Brand/index.d.ts +1 -0
  12. package/dist/layout/components/LayoutFrame/LayoutFrame.d.ts +10 -0
  13. package/dist/layout/components/LayoutFrame/index.d.ts +1 -0
  14. package/dist/layout/components/MessagingMenu/MessagingMenu.d.ts +3 -0
  15. package/dist/layout/components/MessagingMenu/index.d.ts +1 -0
  16. package/dist/layout/components/MyAccountMenu/MyAccountMenu.d.ts +4 -0
  17. package/dist/layout/components/MyAccountMenu/index.d.ts +1 -0
  18. package/dist/layout/components/NavButton/NavButton.d.ts +9 -0
  19. package/dist/layout/components/NavButton/index.d.ts +1 -0
  20. package/dist/layout/components/NotificationBadge/NotificationBadge.d.ts +7 -0
  21. package/dist/layout/components/NotificationBadge/index.d.ts +1 -0
  22. package/dist/layout/components/PrimaryNavItem/PrimaryNavItem.d.ts +11 -0
  23. package/dist/layout/components/PrimaryNavItem/index.d.ts +1 -0
  24. package/dist/layout/components/SecondaryNavItem/SecondaryNavItem.d.ts +10 -0
  25. package/dist/layout/components/SecondaryNavItem/index.d.ts +1 -0
  26. package/dist/layout/components/SideNavBar/SideNavBar.d.ts +10 -0
  27. package/dist/layout/components/SideNavBar/index.d.ts +1 -0
  28. package/dist/layout/components/SideNavMenu/SideNavMenu.d.ts +8 -0
  29. package/dist/layout/components/SideNavMenu/index.d.ts +1 -0
  30. package/dist/layout/components/SideNavMenuItem/SideNavMenuItem.d.ts +8 -0
  31. package/dist/layout/components/SideNavMenuItem/index.d.ts +1 -0
  32. package/dist/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.d.ts +10 -0
  33. package/dist/layout/components/SideNavMenuItemGroup/index.d.ts +1 -0
  34. package/dist/layout/components/TopBar/TopBar.d.ts +4 -0
  35. package/dist/layout/components/TopBar/index.d.ts +1 -0
  36. package/dist/layout/constants.d.ts +10 -0
  37. package/dist/layout/hooks/useNavItems.d.ts +2 -0
  38. package/dist/layout/types.d.ts +21 -0
  39. package/dist/layout/util/mobileDetect.d.ts +1 -0
  40. package/dist/layout/util/navDomain.d.ts +1 -0
  41. package/dist/layout/util/useLocalStorage.d.ts +2 -0
  42. package/package.json +69 -0
package/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # app-layout-frame
2
+
3
+ > Easily layout your webapp with sidenav and topbar
package/dist/index.css ADDED
@@ -0,0 +1,11 @@
1
+ ._2C1bf{min-height:100%}.___2VV{height:auto}._34YPL{width:calc(100% - 72px);height:100%;float:right;transition:width .3s}._jG606{width:100%}._2q-8S{padding-bottom:0}._2dNiZ{height:100%;float:left;position:fixed;color:var(--color-grey-200);z-index:7;background-color:#fff;transition:width .2s}._3kzKX~._34YPL{width:calc(100% - 240px)}._299Kx{min-width:-moz-min-content;min-width:min-content}._3Gz0Y{display:none}
2
+ ._9eWEa{width:100%;height:100%;padding-top:0;box-sizing:border-box;color:var(--color-grey-500);border-right:1px solid var(--color-grey-200);box-shadow:0 5px 15px 0 rgba(0,0,0,.15);display:flex;flex-direction:column}._2gqbS{height:40px;background-color:#fff;padding:16px}._2l01n{height:40px;display:flex;flex-direction:column;justify-content:center}._2l01n svg{width:40px}._1Ccg2{padding:10px;border-radius:16px;cursor:pointer;background:transparent;border:none}._1Ccg2:hover{background-color:var(--color-grey-100)}
3
+ ._244gq{background:linear-gradient(#fff 30%,hsla(0,0%,100%,0)),linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,radial-gradient(50% 0,farthest-side,rgba(0,0,0,.2),transparent),radial-gradient(50% 100%,farthest-side,rgba(0,0,0,.2),rgba(0,0,0,.2)) 0 100%;background:linear-gradient(#fff 30%,hsla(0,0%,100%,0)),linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.2),transparent),radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.2),transparent) 0 100%;background-repeat:no-repeat;background-color:#fff;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;list-style:none;display:flex;flex-direction:column;gap:4px;padding:16px 16px 40px;overflow:auto;overflow-x:hidden}._BLBDK{border-bottom:1px solid var(--color-grey-200);margin-top:12px;margin-bottom:12px;width:180%;margin-left:-15px}._244gq a{text-decoration:none}._BLBDK+._BLBDK{display:none}
4
+ ._1ycHa{padding:10px;border-radius:16px;font-weight:600;font-size:16px;line-height:20px;color:var(--color-grey-500);cursor:pointer;position:relative;min-width:40px;box-sizing:border-box}._1D7jK{background-color:var(--color-eggplant-100);color:var(--color-eggplant-500)}._1ycHa:hover:not(._1D7jK){background-color:var(--color-grey-100);color:var(--color-grey-500)}
5
+ ._amex_{padding:5px 0 5px 22px;color:var(--color-grey-500);display:flex;gap:8px;align-items:center;font-size:14px;line-height:16px;width:197px;box-sizing:border-box}._WdXeV{color:var(--color-eggplant-500);font-weight:600;letter-spacing:-.1px}._1zt6h{padding-left:46px}._amex_:hover:not(._WdXeV){color:var(--color-tangerine-500)}._lLwWh{flex:1;display:flex;justify-content:space-between;align-items:center}
6
+ ._1ne7X{position:absolute;min-width:7px;min-height:7px;background-color:var(--color-tangerine-400)}._3jq-L{border:1px solid var(--color-white);border-radius:10px;margin:0 0 0 -7px}._1caO-{font-size:12px;color:var(--color-white);height:20px;border-radius:50px;margin:-10px 0 0 -10px;padding:0 6px;line-height:20px}
7
+ ._3_Pzu{display:flex;flex-direction:column;gap:8px;list-style:none;margin-top:12px}
8
+ ._3RkpO{display:flex;align-items:center;justify-content:center;height:38px;width:38px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.35);background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}._3RkpO:focus{box-shadow:0 0 8px var(--color-eggplant-300)}
9
+ ._9ii6i{display:flex;flex-direction:row;gap:12px;height:40px;align-items:center;border-radius:32px;padding-right:10px}._3iCo3{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}._2f0Lu{padding-left:12px}._33PBE{display:flex;flex-direction:row;gap:8px;align-items:center}._2IZqu{overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;max-width:185px;color:var(--color-grey-500)}@media screen and (max-width:827px){._2IZqu{display:none}}@media screen and (max-width:1417px){._2IZqu{max-width:160px}}
10
+ ._2yvUY{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));border-radius:35px}
11
+ ._1Hpad{display:flex;align-items:center;justify-content:space-between;padding:0 25px 0 47px;gap:40px;height:72px;border-bottom:1px solid var(--color-grey-200)}
package/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import LayoutFrame from './layout/components/LayoutFrame/LayoutFrame';
2
+ import SideNavBar from './layout/components/SideNavBar/SideNavBar';
3
+ import TopBar from './layout/components/TopBar/TopBar';
4
+ export { LayoutFrame, SideNavBar, TopBar };
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n=require("react"),t=e(n),a=e(require("classnames")),i=require("@7shifts/sous-chef"),l=require("react-router-dom");function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var c=function(){return Boolean(window.navigator.maxTouchPoints)},o=function(e){var n=e.as,l=void 0===n?"li":n,r=e.isActive,c=e.children,o={className:a("primary-nav-item",{"primary-nav-item--active":void 0!==r&&r})},s=t.createElement(i.Inline,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},c);return t.createElement(l,o,s)},s=function(e){var n=e.isActive,l=e.icon,r=e.badge,c=e.children,o="string"==typeof r&&""!==r,s="number"==typeof r&&r>0;return t.createElement("li",{className:a("secondary-nav-item",{"secondary-nav-item--active":void 0!==n&&n,"secondary-nav-item--no-icon":!l})},l,t.createElement("div",{className:"secondary-nav-item__content"},c,s&&t.createElement(i.Badge,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(r)),o&&t.createElement(i.Chip,null,r)))},m=function(e){var n=e.children;return t.createElement("span",{className:a("notification-badge",{"notification-badge--bullet":!n,"notification-badge--count":n}),"data-testid":"notification-badge"},n)},u=function(e){var a=e.isExpanded,r=e.toggleExpand,c=e.item,u=c.label,d=c.badge,v=Boolean(c.items.find(function(e){return e.isActive})),p=n.useState(!!v),g=p[0],E=p[1],f=c.items.sort(function(e,n){return Number(e.isPaywalled||!1)-Number(n.isPaywalled||!1)}),b=c.icon;return t.createElement("li",{className:"side-nav-menu-item-group"},t.createElement(l.Link,{to:c.url||c.items[0].url,key:u,onClick:function(){if(!a&&v&&r)return r(),void E(!0);g&&!v||E(!g)}},t.createElement(o,{as:"div",isActive:v},b&&t.createElement(t.Fragment,null,t.createElement(b,null),d>0?t.createElement(m,null):void 0),a&&u)),a&&v&&t.createElement("ul",{className:"side-nav-menu-item-group__submenu"},f.map(function(e){return t.createElement(l.Link,{to:e.url,key:e.label,onClick:function(){e.onClick&&e.onClick()}},t.createElement(s,{isActive:e.isActive,badge:e.badge,icon:e.isPaywalled?t.createElement(i.IconAward,{size:"medium",color:"eggplant-500"}):void 0},e.label))})))},d=function(e){var n=e.isExpanded,a=e.item,i=a.label,r=a.isActive,c=a.badge,s=a.icon;return t.createElement(l.Link,{to:a.url,key:i,onClick:function(e){r&&e.preventDefault(),a.onClick&&a.onClick()}},t.createElement(o,{isActive:r},s&&t.createElement(t.Fragment,null,t.createElement(s,null),c>0?t.createElement(m,null):void 0),n&&i))},v=function(e){return t.createElement(g,{isExpanded:e.isExpanded,toggleExpand:e.toggleExpand})},p=function(e){var n=e.isExpanded,a=e.toggleExpand;return t.createElement("ul",{className:"side-nav-menu"},e.navItems.map(function(e,i){return"type"in e?t.createElement("div",{key:i,className:"side-nav-menu__divider"}):"items"in e?t.createElement(u,{key:e.label,isExpanded:n,item:e,toggleExpand:a}):t.createElement(d,{key:e.label,isExpanded:n,item:e})}))},g=function(e){return t.createElement(p,{isExpanded:e.isExpanded,toggleExpand:e.toggleExpand,navItems:[{label:"Dashboard",isActive:!0,isShowing:!0,url:"/dashboard",icon:i.IconTachometer},{label:"Tickets",isActive:!1,isShowing:!0,url:"/tickets",icon:i.IconMessages},{label:"CRM",isActive:!1,isShowing:!0,url:"/crm",icon:i.IconList},{label:"Quick messages",isActive:!1,isShowing:!0,url:"/quick-messages",icon:i.IconPaperPlane},{label:"Contacts",isActive:!1,isShowing:!0,url:"/contacts",icon:i.IconUserFriends},{label:"Schedules",isActive:!1,isShowing:!0,url:"/schedules",icon:i.IconCalendarTomorrow},{label:"Tags",isActive:!1,isShowing:!0,url:"/tags",icon:i.IconFlag},{label:"Internal chat",isActive:!1,isShowing:!0,url:"/chats",icon:i.IconUserComputer},{label:"Help",isActive:!1,isShowing:!0,url:"/helps",icon:i.IconQuestionCircle},{type:"divider"},{label:"Campains",isActive:!1,isShowing:!0,url:"/campains",icon:i.IconMegaphone},{label:"Connections",isActive:!1,isShowing:!0,url:"/connections",icon:i.IconFourDotsCircle},{label:"Queues",isActive:!1,isShowing:!0,url:"/queues",icon:i.IconRepeat},{label:"API",isActive:!1,isShowing:!0,url:"/api",icon:i.IconPlug},{label:"Finance",isActive:!1,isShowing:!0,url:"/finance",icon:i.IconCreditCard},{label:"Settings",isActive:!1,isShowing:!0,url:"/settings",icon:i.IconCog}]})},E=function(){return t.createElement("svg",{version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"40",height:"47",viewBox:"0 0 220.000000 182.000000",preserveAspectRatio:"xMidYMid meet"},t.createElement("g",{transform:"translate(0.000000,182.000000) scale(0.100000,-0.100000)",fill:"#273a62",stroke:"none"},t.createElement("path",{d:"M1225 1795 c-28 -27 -31 -49 -10 -85 19 -32 19 -64 0 -80 -8 -6 -47\n-18 -87 -27 -79 -16 -197 -68 -240 -107 -43 -39 -95 -112 -108 -153 -8 -22\n-33 -57 -61 -84 -48 -44 -49 -46 -49 -105 1 -76 14 -135 36 -151 9 -7 46 -22\n80 -33 41 -14 64 -27 64 -37 0 -8 -24 -42 -54 -75 -115 -127 -166 -287 -117\n-365 45 -71 128 -87 201 -39 22 14 44 26 49 26 6 0 24 -29 41 -64 39 -82 118\n-169 184 -204 70 -36 151 -36 221 0 88 46 146 118 221 276 1 2 18 -8 39 -22\n51 -35 97 -47 138 -35 69 20 100 67 100 151 -1 79 -49 178 -132 271 -34 37\n-61 72 -61 76 0 15 24 28 81 45 81 23 92 39 97 147 4 76 2 93 -13 109 -23 26\n-35 25 -35 0 0 -11 -8 -37 -17 -58 l-17 -37 -6 95 c-5 74 -12 106 -33 146 -56\n110 -186 198 -336 229 -41 9 -80 20 -88 26 -17 15 -17 50 2 75 23 31 18 70\n-11 93 -34 27 -50 26 -79 -4z m72 -20 c9 -25 -4 -29 -17 -6 -7 15 -7 21 0 21\n6 0 13 -7 17 -15z m158 -250 c259 -66 351 -385 164 -560 -88 -82 -231 -132\n-354 -122 -110 8 -236 63 -264 115 -8 14 1 13 48 -10 115 -55 302 -56 423 -1\n176 79 236 298 114 419 -61 62 -107 71 -210 45 -102 -26 -138 -26 -218 -1 -34\n11 -74 20 -88 20 l-25 1 25 21 c88 75 255 106 385 73z m-355 -230 c83 -43 52\n-208 -40 -208 -87 0 -118 144 -43 203 31 24 45 25 83 5z m420 -12 c58 -52 45\n-159 -22 -191 -59 -28 -124 42 -114 123 5 44 51 95 86 95 11 0 34 -12 50 -27z\nm172 -465 c50 -61 98 -139 92 -149 -3 -5 -16 -9 -29 -9 -12 0 -48 -13 -79 -29\nl-56 -30 -1 37 c-1 50 -5 77 -26 146 l-17 59 23 18 c28 23 45 16 93 -43z\nm-782 -29 c6 -10 10 -59 9 -109 l-1 -91 -31 24 c-18 13 -46 29 -64 36 -38 15\n-45 30 -33 72 25 85 91 123 120 68z m624 -34 c37 -119 14 -263 -59 -371 -41\n-59 -68 -74 -133 -74 -165 1 -272 187 -198 346 39 85 89 112 246 134 41 6 76\n13 79 15 2 3 14 5 26 5 17 0 25 -11 39 -55z"}),t.createElement("path",{d:"M1251 703 c-5 -10 -10 -29 -11 -43 -6 -64 1 -83 39 -121 31 -31 46\n-39 75 -39 44 0 91 22 106 51 11 20 11 20 -14 3 -36 -23 -109 -14 -141 16 -31\n29 -49 83 -41 121 6 33 1 37 -13 12z"}),t.createElement("path",{d:"M877 1775 c-167 -69 -351 -245 -439 -420 -51 -101 -78 -184 -94 -289\n-19 -123 -13 -224 22 -356 88 -331 318 -564 659 -666 78 -24 108 -27 230 -28\n116 0 155 3 223 22 411 111 703 479 703 885 0 167 -38 314 -72 280 -7 -7 -7\n-27 0 -68 33 -180 23 -334 -35 -494 -42 -119 -96 -209 -178 -297 -144 -156\n-331 -251 -540 -274 -176 -20 -347 13 -504 96 -218 115 -371 305 -434 539 -31\n116 -31 326 0 443 71 264 240 464 488 577 58 27 75 39 70 51 -3 8 -6 18 -6 20\n0 10 -40 1 -93 -21z",fill:"#1a70b2"}),t.createElement("path",{d:"M405 1602 c-80 -106 -167 -279 -194 -388 -47 -186 -51 -393 -11 -549\n28 -110 125 -302 205 -407 67 -89 83 -100 105 -73 10 12 4 25 -37 72 -100 117\n-166 237 -209 380 -36 118 -45 365 -20 493 36 175 119 345 225 462 49 54 53\n71 21 88 -16 9 -28 -3 -85 -78z",fill:"#1a70b2"}),t.createElement("path",{d:"M110 1388 c-63 -132 -91 -256 -97 -435 -6 -161 1 -226 39 -343 35\n-109 65 -160 93 -160 14 0 25 2 25 4 0 2 -14 33 -30 70 -57 125 -74 221 -74\n406 1 145 4 177 27 263 15 55 46 139 71 188 l44 89 -29 0 c-28 0 -33 -7 -69\n-82z",fill:"#1a70b2"})))},f=function(e){var n=e.onClick;return t.createElement(i.Tooltip,{overlay:e.tooltipContent},t.createElement("button",{className:"nav-button",tabIndex:0,onClick:function(){return n()}},e.children))},b=function(){var e=Number(2)>0;return t.createElement(f,{tooltipContent:"Announcements",onClick:function(){console.log("Click")}},t.createElement("div",{"data-product-tour-target":"connect_with_my_team","data-testid":"announcements-open-button",className:"announcements-menu"},t.createElement(i.IconMegaphone,{color:"grey-400"}),e&&t.createElement(m,null,2)))},h=function(){return t.createElement("div",{className:"brand"},t.createElement("div",{className:"brand__company-photo"},t.createElement(i.Avatar,{size:"large",url:"https://media.istockphoto.com/id/1164466990/vector/digital-signage-pixel-icon-tech-element-vector-logo-icon-illustrator.jpg?s=612x612&w=0&k=20&c=tC_2Q7WSFbUUSDC7Nk9u-krFzDrWA4-aZjX3HI_8LoU="})),t.createElement(i.Tooltip,{overlay:"Company name"},t.createElement("span",{className:"brand__company-name"},"Clash Creative Marketing")))},y=function(){var e=t.createElement("div",{className:"my-account-menu"},t.createElement(i.Avatar,{size:"large",url:"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg"}));return t.createElement(i.Dropdown,{trigger:e,triggersOn:"hover",zIndex:6},t.createElement(i.DropdownList,null,t.createElement(i.DropdownListItem,{href:"/employees"},"My account"),t.createElement(i.DropdownListItem,{href:"/employees"},"Log out")))};exports.LayoutFrame=function(e){var i=e.sideNav,l=e.topBar,o=e.isLegacyPage,s=e.children,m=n.useRef(null),u=function(e,t){var a=n.useState(function(){try{var n=window.localStorage.getItem(e);return!n||JSON.parse(n)}catch(e){return!0}}),i=a[0],l=a[1],r=n.useCallback(function(n){try{var t=n instanceof Function?n(i):n;l(t),window.localStorage.setItem(e,JSON.stringify(t))}catch(e){throw new Error(e)}},[e,i]);return[i,r]}("vertical-nav-is-expanded"),d=u[0],v=u[1],p=n.useState(!1),g=p[0],E=p[1],f=c(),b=i;return t.createElement("div",{className:a("layout-frame",{"layout-frame--no-height":o})},b&&t.createElement("div",{ref:m,className:a("layout-frame__side-bar",{"layout-frame__side-bar--expanded":d,"layout-frame__side-bar--collapsed":!d}),onMouseEnter:function(){!f&&E(!0)},onMouseLeave:function(){!f&&E(!1)},style:{width:d||g?240:72}},i&&t.cloneElement(i,r({isHovering:g,navPosition:d?"expanded":"collapsed",toggleExpand:function(){v(!d),d&&m&&E(!1)}},i.props))),t.createElement("div",{className:a("layout-frame__middle-area",{"layout-frame__middle-area--full-size":!b,"layout-frame__middle-area--no-footer-padding":o})},t.createElement("div",{className:a("layout-frame__top-bar",{"layout-frame__top-bar--hidden":o})},l),t.createElement("div",{className:"layout-frame__content"},s,!o&&t.createElement("div",{id:"footer"}))))},exports.SideNavBar=function(e){var n=e.navPosition,a=void 0===n?"collapsed":n,l=e.toggleExpand,r="expanded"===a||e.isHovering,o=c();return t.createElement("nav",{className:"side-nav-bar"},t.createElement("div",{className:"side-nav-bar__header"},t.createElement(i.Inline,{alignItems:"center",justifyContent:"space-between"},(!o||r)&&t.createElement("div",{className:"side-nav-bar__logo"},t.createElement(E,null)),(r||o)&&t.createElement("button",{onClick:l,className:"side-nav-bar__nav-toggle"},t.createElement("collapsed"===a?i.IconChevronRight:i.IconChevronLeft,null)))),t.createElement(v,{isExpanded:r,toggleExpand:l}))},exports.TopBar=function(){return t.createElement("div",{className:"top-bar"},t.createElement("div",null,t.createElement(h,null)),t.createElement(i.Inline,{space:24,alignItems:"center"},t.createElement(i.Inline,{space:12,alignItems:"center"},t.createElement(b,null)),t.createElement(y,null)))};
2
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/hooks/useNavItems.ts","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/components/NavButton/NavButton.tsx","../src/layout/components/AnnoucementsMenu/AnnouncementsMenu.tsx","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/constants.ts","../src/layout/components/TopBar/TopBar.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' | 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames('primary-nav-item', {\n 'primary-nav-item--active': isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string | number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames('secondary-nav-item', {\n 'secondary-nav-item--active': isActive,\n 'secondary-nav-item--no-icon': !icon\n })}\n >\n {icon}\n <div className=\"secondary-nav-item__content\">\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string | null | undefined) | (number | null | undefined)\n): string | null | undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames('notification-badge', {\n 'notification-badge--bullet': !children,\n 'notification-badge--count': children\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled || false) -\n Number(itemB.isPaywalled || false)\n );\n\n const Icon = item.icon;\n return (\n <li className=\"side-nav-menu-item-group\">\n <Link\n to={item.url || item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded || hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className=\"side-nav-menu-item-group__submenu\">\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport { useNavItems } from '../../hooks/useNavItems';\nimport './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand }: Props) => {\n return (\n <SideNavMenuApp isExpanded={isExpanded} toggleExpand={toggleExpand} />\n );\n};\n\ntype SideNavMenuListProps = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenuList = ({\n isExpanded,\n toggleExpand,\n navItems\n}: SideNavMenuListProps) => {\n return (\n <ul className=\"side-nav-menu\">\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div key={index} className=\"side-nav-menu__divider\" />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nconst SideNavMenuApp = ({\n isExpanded,\n toggleExpand\n}: Omit<SideNavMenuListProps, 'navItems'>) => {\n const navItems = useNavItems();\n\n return (\n <SideNavMenuList\n isExpanded={isExpanded}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n );\n};\n\nexport default SideNavMenu;\n","import {\n IconTachometer,\n IconMessages,\n IconList,\n IconPaperPlane,\n IconUserFriends,\n IconCalendarTomorrow,\n IconFlag,\n IconUserComputer,\n IconQuestionCircle,\n IconMegaphone,\n IconPlug,\n IconRepeat,\n IconCreditCard,\n IconCog,\n IconFourDotsCircle\n} from '@7shifts/sous-chef';\nimport { NavBarItems } from '../types';\n\nexport const useNavItems = (): NavBarItems => {\n return [\n {\n label: 'Dashboard',\n isActive: true,\n isShowing: true,\n url: '/dashboard',\n icon: IconTachometer\n },\n {\n label: 'Tickets',\n isActive: false,\n isShowing: true,\n url: '/tickets',\n icon: IconMessages\n },\n {\n label: 'CRM',\n isActive: false,\n isShowing: true,\n url: '/crm',\n icon: IconList\n },\n {\n label: 'Quick messages',\n isActive: false,\n isShowing: true,\n url: '/quick-messages',\n icon: IconPaperPlane\n },\n {\n label: 'Contacts',\n isActive: false,\n isShowing: true,\n url: '/contacts',\n icon: IconUserFriends\n },\n {\n label: 'Schedules',\n isActive: false,\n isShowing: true,\n url: '/schedules',\n icon: IconCalendarTomorrow\n },\n {\n label: 'Tags',\n isActive: false,\n isShowing: true,\n url: '/tags',\n icon: IconFlag\n },\n {\n label: 'Internal chat',\n isActive: false,\n isShowing: true,\n url: '/chats',\n icon: IconUserComputer\n },\n {\n label: 'Help',\n isActive: false,\n isShowing: true,\n url: '/helps',\n icon: IconQuestionCircle\n },\n {\n type: 'divider'\n },\n {\n label: 'Campains',\n isActive: false,\n isShowing: true,\n url: '/campains',\n icon: IconMegaphone\n },\n {\n label: 'Connections',\n isActive: false,\n isShowing: true,\n url: '/connections',\n icon: IconFourDotsCircle\n },\n {\n label: 'Queues',\n isActive: false,\n isShowing: true,\n url: '/queues',\n icon: IconRepeat\n },\n {\n label: 'API',\n isActive: false,\n isShowing: true,\n url: '/api',\n icon: IconPlug\n },\n {\n label: 'Finance',\n isActive: false,\n isShowing: true,\n url: '/finance',\n icon: IconCreditCard\n },\n {\n label: 'Settings',\n isActive: false,\n isShowing: true,\n url: '/settings',\n icon: IconCog\n }\n ];\n};\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport './side-nav-bar.scss';\nimport { NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED || isHovering;\n const isTouchDevice = isTouchscreen();\n\n /* Disabling HotJar on vertical nav to check if this is causing the Chromebook issues\n useEffect(() => {\n const hj = getHotjar();\n hj('event', 'vertical-nav');\n }, []);\n */\n\n return (\n <nav className=\"side-nav-bar\">\n <div className=\"side-nav-bar__header\">\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice || isExpanded) && (\n <div className=\"side-nav-bar__logo\">\n <Logo />\n </div>\n )}\n {(isExpanded || isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className=\"side-nav-bar__nav-toggle\"\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n />\n </nav>\n );\n};\n\nconst Logo = () => (\n <svg\n version=\"1.0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"47\"\n viewBox=\"0 0 220.000000 182.000000\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <g\n transform=\"translate(0.000000,182.000000) scale(0.100000,-0.100000)\"\n fill=\"#273a62\"\n stroke=\"none\"\n >\n <path\n d=\"M1225 1795 c-28 -27 -31 -49 -10 -85 19 -32 19 -64 0 -80 -8 -6 -47\n-18 -87 -27 -79 -16 -197 -68 -240 -107 -43 -39 -95 -112 -108 -153 -8 -22\n-33 -57 -61 -84 -48 -44 -49 -46 -49 -105 1 -76 14 -135 36 -151 9 -7 46 -22\n80 -33 41 -14 64 -27 64 -37 0 -8 -24 -42 -54 -75 -115 -127 -166 -287 -117\n-365 45 -71 128 -87 201 -39 22 14 44 26 49 26 6 0 24 -29 41 -64 39 -82 118\n-169 184 -204 70 -36 151 -36 221 0 88 46 146 118 221 276 1 2 18 -8 39 -22\n51 -35 97 -47 138 -35 69 20 100 67 100 151 -1 79 -49 178 -132 271 -34 37\n-61 72 -61 76 0 15 24 28 81 45 81 23 92 39 97 147 4 76 2 93 -13 109 -23 26\n-35 25 -35 0 0 -11 -8 -37 -17 -58 l-17 -37 -6 95 c-5 74 -12 106 -33 146 -56\n110 -186 198 -336 229 -41 9 -80 20 -88 26 -17 15 -17 50 2 75 23 31 18 70\n-11 93 -34 27 -50 26 -79 -4z m72 -20 c9 -25 -4 -29 -17 -6 -7 15 -7 21 0 21\n6 0 13 -7 17 -15z m158 -250 c259 -66 351 -385 164 -560 -88 -82 -231 -132\n-354 -122 -110 8 -236 63 -264 115 -8 14 1 13 48 -10 115 -55 302 -56 423 -1\n176 79 236 298 114 419 -61 62 -107 71 -210 45 -102 -26 -138 -26 -218 -1 -34\n11 -74 20 -88 20 l-25 1 25 21 c88 75 255 106 385 73z m-355 -230 c83 -43 52\n-208 -40 -208 -87 0 -118 144 -43 203 31 24 45 25 83 5z m420 -12 c58 -52 45\n-159 -22 -191 -59 -28 -124 42 -114 123 5 44 51 95 86 95 11 0 34 -12 50 -27z\nm172 -465 c50 -61 98 -139 92 -149 -3 -5 -16 -9 -29 -9 -12 0 -48 -13 -79 -29\nl-56 -30 -1 37 c-1 50 -5 77 -26 146 l-17 59 23 18 c28 23 45 16 93 -43z\nm-782 -29 c6 -10 10 -59 9 -109 l-1 -91 -31 24 c-18 13 -46 29 -64 36 -38 15\n-45 30 -33 72 25 85 91 123 120 68z m624 -34 c37 -119 14 -263 -59 -371 -41\n-59 -68 -74 -133 -74 -165 1 -272 187 -198 346 39 85 89 112 246 134 41 6 76\n13 79 15 2 3 14 5 26 5 17 0 25 -11 39 -55z\"\n />\n <path\n d=\"M1251 703 c-5 -10 -10 -29 -11 -43 -6 -64 1 -83 39 -121 31 -31 46\n-39 75 -39 44 0 91 22 106 51 11 20 11 20 -14 3 -36 -23 -109 -14 -141 16 -31\n29 -49 83 -41 121 6 33 1 37 -13 12z\"\n />\n <path\n d=\"M877 1775 c-167 -69 -351 -245 -439 -420 -51 -101 -78 -184 -94 -289\n-19 -123 -13 -224 22 -356 88 -331 318 -564 659 -666 78 -24 108 -27 230 -28\n116 0 155 3 223 22 411 111 703 479 703 885 0 167 -38 314 -72 280 -7 -7 -7\n-27 0 -68 33 -180 23 -334 -35 -494 -42 -119 -96 -209 -178 -297 -144 -156\n-331 -251 -540 -274 -176 -20 -347 13 -504 96 -218 115 -371 305 -434 539 -31\n116 -31 326 0 443 71 264 240 464 488 577 58 27 75 39 70 51 -3 8 -6 18 -6 20\n0 10 -40 1 -93 -21z\"\n fill=\"#1a70b2\"\n />\n <path\n d=\"M405 1602 c-80 -106 -167 -279 -194 -388 -47 -186 -51 -393 -11 -549\n28 -110 125 -302 205 -407 67 -89 83 -100 105 -73 10 12 4 25 -37 72 -100 117\n-166 237 -209 380 -36 118 -45 365 -20 493 36 175 119 345 225 462 49 54 53\n71 21 88 -16 9 -28 -3 -85 -78z\"\n fill=\"#1a70b2\"\n />\n <path\n d=\"M110 1388 c-63 -132 -91 -256 -97 -435 -6 -161 1 -226 39 -343 35\n-109 65 -160 93 -160 14 0 25 2 25 4 0 2 -14 33 -30 70 -57 125 -74 221 -74\n406 1 145 4 177 27 263 15 55 46 139 71 188 l44 89 -29 0 c-28 0 -33 -7 -69\n-82z\"\n fill=\"#1a70b2\"\n />\n </g>\n </svg>\n);\n\nexport default SideNavBar;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport './nav-button.scss';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className=\"nav-button\"\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n","import React from 'react';\nimport { IconMegaphone } from '@7shifts/sous-chef';\nimport NotificationBadge from '../NotificationBadge';\nimport NavButton from '../NavButton';\n\nconst AnnouncementsMenu = (): JSX.Element => {\n const unreadAnnouncementsCount = 2;\n\n const isBadged = Number(unreadAnnouncementsCount) > 0;\n const onClick = () => {\n console.log('Click');\n };\n return (\n <NavButton tooltipContent=\"Announcements\" onClick={() => onClick()}>\n <div\n data-product-tour-target=\"connect_with_my_team\"\n data-testid=\"announcements-open-button\"\n className=\"announcements-menu\"\n >\n <IconMegaphone color=\"grey-400\" />\n {isBadged && (\n <NotificationBadge>\n {unreadAnnouncementsCount}\n </NotificationBadge>\n )}\n </div>\n </NavButton>\n );\n};\n\nexport default AnnouncementsMenu;\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport './brand.scss';\n\nconst Brand = () => {\n return (\n <div className=\"brand\">\n <div className=\"brand__company-photo\">\n <Avatar\n size=\"large\"\n url=\"https://media.istockphoto.com/id/1164466990/vector/digital-signage-pixel-icon-tech-element-vector-logo-icon-illustrator.jpg?s=612x612&w=0&k=20&c=tC_2Q7WSFbUUSDC7Nk9u-krFzDrWA4-aZjX3HI_8LoU=\"\n />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className=\"brand__company-name\">\n Clash Creative Marketing\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport {\n Avatar,\n Dropdown,\n DropdownList,\n DropdownListItem\n} from '@7shifts/sous-chef';\nimport './my-account-menu.scss';\n\nconst MyAccountMenu = () => {\n const trigger = (\n <div className=\"my-account-menu\">\n <Avatar\n size=\"large\"\n url=\"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg\"\n />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n <DropdownList>\n <DropdownListItem href=\"/employees\">\n My account\n </DropdownListItem>\n <DropdownListItem href=\"/employees\">Log out</DropdownListItem>\n </DropdownList>\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\n\ntype Props = {\n sideNav?: React.ReactElement;\n topBar?: React.ReactNode;\n isLegacyPage: boolean;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({ sideNav, topBar, isLegacyPage, children }: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen && sideNav;\n\n return (\n <div\n className={classNames('layout-frame', {\n 'layout-frame--no-height': isLegacyPage\n })}\n >\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames('layout-frame__side-bar', {\n 'layout-frame__side-bar--expanded': isExpanded,\n 'layout-frame__side-bar--collapsed': !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded || isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n {sideNav &&\n React.cloneElement(sideNav, {\n isHovering,\n navPosition: isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED,\n toggleExpand,\n ...sideNav.props\n })}\n </div>\n )}\n\n <div\n className={classNames('layout-frame__middle-area', {\n 'layout-frame__middle-area--full-size': !isShowingSideMenu,\n 'layout-frame__middle-area--no-footer-padding': isLegacyPage\n })}\n >\n {!isFullScreen && (\n <div\n className={classNames('layout-frame__top-bar', {\n 'layout-frame__top-bar--hidden': isLegacyPage\n })}\n >\n {topBar}\n </div>\n )}\n <div className=\"layout-frame__content\">\n {children}\n {!isLegacyPage && <div id=\"footer\" />}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport AnnouncementsMenu from '../AnnoucementsMenu';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\nconst TopBar = () => {\n return (\n <div className=\"top-bar\">\n <div>\n <Brand />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n <AnnouncementsMenu />\n </Inline>\n <MyAccountMenu />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","PrimaryNavItem","_ref","as","_ref$as","_ref$isActive","isActive","children","props","className","classNames","primary-nav-item--active","content","React","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","secondary-nav-item--active","secondary-nav-item--no-icon","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","notification-badge--bullet","notification-badge--count","SideNavMenuItemGroup","isExpanded","toggleExpand","item","label","hasActiveSubmenu","items","find","_useState","useState","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","Link","to","url","key","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","SideNavMenuApp","SideNavMenuList","_ref2","navItems","index","_ref3","isShowing","IconTachometer","IconMessages","IconList","IconPaperPlane","IconUserFriends","IconCalendarTomorrow","IconFlag","IconUserComputer","IconQuestionCircle","type","IconMegaphone","IconFourDotsCircle","IconRepeat","IconPlug","IconCreditCard","IconCog","Logo","version","xmlns","width","height","viewBox","preserveAspectRatio","transform","fill","stroke","d","NavButton","Tooltip","overlay","tooltipContent","tabIndex","AnnouncementsMenu","isBadged","console","log","Brand","Avatar","MyAccountMenu","trigger","Dropdown","triggersOn","zIndex","DropdownList","DropdownListItem","href","sideNav","topBar","isLegacyPage","navRef","useRef","_useLocalStorage","initialValue","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","setIsExpanded","isHovering","setIsHovering","isTouchDevice","isShowingSideMenu","layout-frame--no-height","ref","layout-frame__side-bar--expanded","layout-frame__side-bar--collapsed","onMouseEnter","onMouseLeave","style","cloneElement","_extends","navPosition","layout-frame__middle-area--full-size","layout-frame__middle-area--no-footer-padding","layout-frame__top-bar--hidden","id","_ref$navPosition","justifyContent","IconChevronRight","IconChevronLeft"],"mappings":"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"}
package/dist/index.modern.js ADDED
@@ -0,0 +1,2 @@
1
+ import e,{useState as n,useCallback as t,useRef as a}from"react";import i from"classnames";import{IconTachometer as l,IconMessages as r,IconList as c,IconPaperPlane as o,IconUserFriends as s,IconCalendarTomorrow as m,IconFlag as u,IconUserComputer as d,IconQuestionCircle as v,IconMegaphone as g,IconFourDotsCircle as p,IconRepeat as E,IconPlug as f,IconCreditCard as b,IconCog as h,Inline as y,Badge as w,Chip as _,IconAward as x,IconChevronRight as N,IconChevronLeft as k,Tooltip as A,Avatar as C,Dropdown as S,DropdownList as z,DropdownListItem as I}from"@7shifts/sous-chef";import{Link as M}from"react-router-dom";function P(){return(P=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}var j=function(){return Boolean(window.navigator.maxTouchPoints)},O=function(l){var r=l.sideNav,c=l.topBar,o=l.isLegacyPage,s=l.children,m=a(null),u=function(e,a){var i=n(function(){try{var n=window.localStorage.getItem(e);return!n||JSON.parse(n)}catch(e){return!0}}),l=i[0],r=i[1],c=t(function(n){try{var t=n instanceof Function?n(l):n;r(t),window.localStorage.setItem(e,JSON.stringify(t))}catch(e){throw new Error(e)}},[e,l]);return[l,c]}("vertical-nav-is-expanded"),d=u[0],v=u[1],g=n(!1),p=g[0],E=g[1],f=j(),b=r;return e.createElement("div",{className:i("layout-frame",{"layout-frame--no-height":o})},b&&e.createElement("div",{ref:m,className:i("layout-frame__side-bar",{"layout-frame__side-bar--expanded":d,"layout-frame__side-bar--collapsed":!d}),onMouseEnter:function(){!f&&E(!0)},onMouseLeave:function(){!f&&E(!1)},style:{width:d||p?240:72}},r&&e.cloneElement(r,P({isHovering:p,navPosition:d?"expanded":"collapsed",toggleExpand:function(){v(!d),d&&m&&E(!1)}},r.props))),e.createElement("div",{className:i("layout-frame__middle-area",{"layout-frame__middle-area--full-size":!b,"layout-frame__middle-area--no-footer-padding":o})},e.createElement("div",{className:i("layout-frame__top-bar",{"layout-frame__top-bar--hidden":o})},c),e.createElement("div",{className:"layout-frame__content"},s,!o&&e.createElement("div",{id:"footer"}))))},F=function(n){var t=n.as,a=void 0===t?"li":t,l=n.isActive,r=n.children,c={className:i("primary-nav-item",{"primary-nav-item--active":void 0!==l&&l})},o=e.createElement(y,{alignItems:"center",space:16,flex:["0 1 auto","0 0 142px"]},r);return e.createElement(a,c,o)},B=function(n){var t=n.isActive,a=n.icon,l=n.badge,r=n.children,c="string"==typeof l&&""!==l,o="number"==typeof l&&l>0;return e.createElement("li",{className:i("secondary-nav-item",{"secondary-nav-item--active":void 0!==t&&t,"secondary-nav-item--no-icon":!a})},a,e.createElement("div",{className:"secondary-nav-item__content"},r,o&&e.createElement(w,null,function(e){if("number"==typeof e){if(e>0&&e<=99)return String(e);if(e>99)return"99+"}else if("string"==typeof e)return"0"===e?null:parseInt(e)>99?"99+":e;return null}(l)),c&&e.createElement(_,null,l)))},D=function(n){var t=n.children;return e.createElement("span",{className:i("notification-badge",{"notification-badge--bullet":!t,"notification-badge--count":t}),"data-testid":"notification-badge"},t)},H=function(t){var a=t.isExpanded,i=t.toggleExpand,l=t.item,r=l.label,c=l.badge,o=Boolean(l.items.find(function(e){return e.isActive})),s=n(!!o),m=s[0],u=s[1],d=l.items.sort(function(e,n){return Number(e.isPaywalled||!1)-Number(n.isPaywalled||!1)}),v=l.icon;return e.createElement("li",{className:"side-nav-menu-item-group"},e.createElement(M,{to:l.url||l.items[0].url,key:r,onClick:function(){if(!a&&o&&i)return i(),void u(!0);m&&!o||u(!m)}},e.createElement(F,{as:"div",isActive:o},v&&e.createElement(e.Fragment,null,e.createElement(v,null),c>0?e.createElement(D,null):void 0),a&&r)),a&&o&&e.createElement("ul",{className:"side-nav-menu-item-group__submenu"},d.map(function(n){return e.createElement(M,{to:n.url,key:n.label,onClick:function(){n.onClick&&n.onClick()}},e.createElement(B,{isActive:n.isActive,badge:n.badge,icon:n.isPaywalled?e.createElement(x,{size:"medium",color:"eggplant-500"}):void 0},n.label))})))},L=function(n){var t=n.isExpanded,a=n.item,i=a.label,l=a.isActive,r=a.badge,c=a.icon;return e.createElement(M,{to:a.url,key:i,onClick:function(e){l&&e.preventDefault(),a.onClick&&a.onClick()}},e.createElement(F,{isActive:l},c&&e.createElement(e.Fragment,null,e.createElement(c,null),r>0?e.createElement(D,null):void 0),t&&i))},Q=function(n){return e.createElement(U,{isExpanded:n.isExpanded,toggleExpand:n.toggleExpand})},T=function(n){var t=n.isExpanded,a=n.toggleExpand;return e.createElement("ul",{className:"side-nav-menu"},n.navItems.map(function(n,i){return"type"in n?e.createElement("div",{key:i,className:"side-nav-menu__divider"}):"items"in n?e.createElement(H,{key:n.label,isExpanded:t,item:n,toggleExpand:a}):e.createElement(L,{key:n.label,isExpanded:t,item:n})}))},U=function(n){return e.createElement(T,{isExpanded:n.isExpanded,toggleExpand:n.toggleExpand,navItems:[{label:"Dashboard",isActive:!0,isShowing:!0,url:"/dashboard",icon:l},{label:"Tickets",isActive:!1,isShowing:!0,url:"/tickets",icon:r},{label:"CRM",isActive:!1,isShowing:!0,url:"/crm",icon:c},{label:"Quick messages",isActive:!1,isShowing:!0,url:"/quick-messages",icon:o},{label:"Contacts",isActive:!1,isShowing:!0,url:"/contacts",icon:s},{label:"Schedules",isActive:!1,isShowing:!0,url:"/schedules",icon:m},{label:"Tags",isActive:!1,isShowing:!0,url:"/tags",icon:u},{label:"Internal chat",isActive:!1,isShowing:!0,url:"/chats",icon:d},{label:"Help",isActive:!1,isShowing:!0,url:"/helps",icon:v},{type:"divider"},{label:"Campains",isActive:!1,isShowing:!0,url:"/campains",icon:g},{label:"Connections",isActive:!1,isShowing:!0,url:"/connections",icon:p},{label:"Queues",isActive:!1,isShowing:!0,url:"/queues",icon:E},{label:"API",isActive:!1,isShowing:!0,url:"/api",icon:f},{label:"Finance",isActive:!1,isShowing:!0,url:"/finance",icon:b},{label:"Settings",isActive:!1,isShowing:!0,url:"/settings",icon:h}]})},q=function(n){var t=n.navPosition,a=void 0===t?"collapsed":t,i=n.toggleExpand,l="expanded"===a||n.isHovering,r=j();return e.createElement("nav",{className:"side-nav-bar"},e.createElement("div",{className:"side-nav-bar__header"},e.createElement(y,{alignItems:"center",justifyContent:"space-between"},(!r||l)&&e.createElement("div",{className:"side-nav-bar__logo"},e.createElement(J,null)),(l||r)&&e.createElement("button",{onClick:i,className:"side-nav-bar__nav-toggle"},e.createElement("collapsed"===a?N:k,null)))),e.createElement(Q,{isExpanded:l,toggleExpand:i}))},J=function(){return e.createElement("svg",{version:"1.0",xmlns:"http://www.w3.org/2000/svg",width:"40",height:"47",viewBox:"0 0 220.000000 182.000000",preserveAspectRatio:"xMidYMid meet"},e.createElement("g",{transform:"translate(0.000000,182.000000) scale(0.100000,-0.100000)",fill:"#273a62",stroke:"none"},e.createElement("path",{d:"M1225 1795 c-28 -27 -31 -49 -10 -85 19 -32 19 -64 0 -80 -8 -6 -47\n-18 -87 -27 -79 -16 -197 -68 -240 -107 -43 -39 -95 -112 -108 -153 -8 -22\n-33 -57 -61 -84 -48 -44 -49 -46 -49 -105 1 -76 14 -135 36 -151 9 -7 46 -22\n80 -33 41 -14 64 -27 64 -37 0 -8 -24 -42 -54 -75 -115 -127 -166 -287 -117\n-365 45 -71 128 -87 201 -39 22 14 44 26 49 26 6 0 24 -29 41 -64 39 -82 118\n-169 184 -204 70 -36 151 -36 221 0 88 46 146 118 221 276 1 2 18 -8 39 -22\n51 -35 97 -47 138 -35 69 20 100 67 100 151 -1 79 -49 178 -132 271 -34 37\n-61 72 -61 76 0 15 24 28 81 45 81 23 92 39 97 147 4 76 2 93 -13 109 -23 26\n-35 25 -35 0 0 -11 -8 -37 -17 -58 l-17 -37 -6 95 c-5 74 -12 106 -33 146 -56\n110 -186 198 -336 229 -41 9 -80 20 -88 26 -17 15 -17 50 2 75 23 31 18 70\n-11 93 -34 27 -50 26 -79 -4z m72 -20 c9 -25 -4 -29 -17 -6 -7 15 -7 21 0 21\n6 0 13 -7 17 -15z m158 -250 c259 -66 351 -385 164 -560 -88 -82 -231 -132\n-354 -122 -110 8 -236 63 -264 115 -8 14 1 13 48 -10 115 -55 302 -56 423 -1\n176 79 236 298 114 419 -61 62 -107 71 -210 45 -102 -26 -138 -26 -218 -1 -34\n11 -74 20 -88 20 l-25 1 25 21 c88 75 255 106 385 73z m-355 -230 c83 -43 52\n-208 -40 -208 -87 0 -118 144 -43 203 31 24 45 25 83 5z m420 -12 c58 -52 45\n-159 -22 -191 -59 -28 -124 42 -114 123 5 44 51 95 86 95 11 0 34 -12 50 -27z\nm172 -465 c50 -61 98 -139 92 -149 -3 -5 -16 -9 -29 -9 -12 0 -48 -13 -79 -29\nl-56 -30 -1 37 c-1 50 -5 77 -26 146 l-17 59 23 18 c28 23 45 16 93 -43z\nm-782 -29 c6 -10 10 -59 9 -109 l-1 -91 -31 24 c-18 13 -46 29 -64 36 -38 15\n-45 30 -33 72 25 85 91 123 120 68z m624 -34 c37 -119 14 -263 -59 -371 -41\n-59 -68 -74 -133 -74 -165 1 -272 187 -198 346 39 85 89 112 246 134 41 6 76\n13 79 15 2 3 14 5 26 5 17 0 25 -11 39 -55z"}),e.createElement("path",{d:"M1251 703 c-5 -10 -10 -29 -11 -43 -6 -64 1 -83 39 -121 31 -31 46\n-39 75 -39 44 0 91 22 106 51 11 20 11 20 -14 3 -36 -23 -109 -14 -141 16 -31\n29 -49 83 -41 121 6 33 1 37 -13 12z"}),e.createElement("path",{d:"M877 1775 c-167 -69 -351 -245 -439 -420 -51 -101 -78 -184 -94 -289\n-19 -123 -13 -224 22 -356 88 -331 318 -564 659 -666 78 -24 108 -27 230 -28\n116 0 155 3 223 22 411 111 703 479 703 885 0 167 -38 314 -72 280 -7 -7 -7\n-27 0 -68 33 -180 23 -334 -35 -494 -42 -119 -96 -209 -178 -297 -144 -156\n-331 -251 -540 -274 -176 -20 -347 13 -504 96 -218 115 -371 305 -434 539 -31\n116 -31 326 0 443 71 264 240 464 488 577 58 27 75 39 70 51 -3 8 -6 18 -6 20\n0 10 -40 1 -93 -21z",fill:"#1a70b2"}),e.createElement("path",{d:"M405 1602 c-80 -106 -167 -279 -194 -388 -47 -186 -51 -393 -11 -549\n28 -110 125 -302 205 -407 67 -89 83 -100 105 -73 10 12 4 25 -37 72 -100 117\n-166 237 -209 380 -36 118 -45 365 -20 493 36 175 119 345 225 462 49 54 53\n71 21 88 -16 9 -28 -3 -85 -78z",fill:"#1a70b2"}),e.createElement("path",{d:"M110 1388 c-63 -132 -91 -256 -97 -435 -6 -161 1 -226 39 -343 35\n-109 65 -160 93 -160 14 0 25 2 25 4 0 2 -14 33 -30 70 -57 125 -74 221 -74\n406 1 145 4 177 27 263 15 55 46 139 71 188 l44 89 -29 0 c-28 0 -33 -7 -69\n-82z",fill:"#1a70b2"})))},R=function(n){var t=n.onClick;return e.createElement(A,{overlay:n.tooltipContent},e.createElement("button",{className:"nav-button",tabIndex:0,onClick:function(){return t()}},n.children))},W=function(){var n=Number(2)>0;return e.createElement(R,{tooltipContent:"Announcements",onClick:function(){console.log("Click")}},e.createElement("div",{"data-product-tour-target":"connect_with_my_team","data-testid":"announcements-open-button",className:"announcements-menu"},e.createElement(g,{color:"grey-400"}),n&&e.createElement(D,null,2)))},X=function(){return e.createElement("div",{className:"brand"},e.createElement("div",{className:"brand__company-photo"},e.createElement(C,{size:"large",url:"https://media.istockphoto.com/id/1164466990/vector/digital-signage-pixel-icon-tech-element-vector-logo-icon-illustrator.jpg?s=612x612&w=0&k=20&c=tC_2Q7WSFbUUSDC7Nk9u-krFzDrWA4-aZjX3HI_8LoU="})),e.createElement(A,{overlay:"Company name"},e.createElement("span",{className:"brand__company-name"},"Clash Creative Marketing")))},Y=function(){var n=e.createElement("div",{className:"my-account-menu"},e.createElement(C,{size:"large",url:"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg"}));return e.createElement(S,{trigger:n,triggersOn:"hover",zIndex:6},e.createElement(z,null,e.createElement(I,{href:"/employees"},"My account"),e.createElement(I,{href:"/employees"},"Log out")))},Z=function(){return e.createElement("div",{className:"top-bar"},e.createElement("div",null,e.createElement(X,null)),e.createElement(y,{space:24,alignItems:"center"},e.createElement(y,{space:12,alignItems:"center"},e.createElement(W,null)),e.createElement(Y,null)))};export{O as LayoutFrame,q as SideNavBar,Z as TopBar};
2
+ //# sourceMappingURL=index.modern.js.map
package/dist/index.modern.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.modern.js","sources":["../src/layout/util/mobileDetect.ts","../src/layout/components/LayoutFrame/LayoutFrame.tsx","../src/layout/util/useLocalStorage.ts","../src/layout/constants.ts","../src/layout/components/PrimaryNavItem/PrimaryNavItem.tsx","../src/layout/components/SecondaryNavItem/SecondaryNavItem.tsx","../src/layout/util/navDomain.ts","../src/layout/components/NotificationBadge/NotificationBadge.tsx","../src/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.tsx","../src/layout/components/SideNavMenuItem/SideNavMenuItem.tsx","../src/layout/components/SideNavMenu/SideNavMenu.tsx","../src/layout/hooks/useNavItems.ts","../src/layout/components/SideNavBar/SideNavBar.tsx","../src/layout/components/NavButton/NavButton.tsx","../src/layout/components/AnnoucementsMenu/AnnouncementsMenu.tsx","../src/layout/components/Brand/Brand.tsx","../src/layout/components/MyAccountMenu/MyAccountMenu.tsx","../src/layout/components/TopBar/TopBar.tsx"],"sourcesContent":["export const isTouchscreen = (): boolean => {\n return Boolean(window.navigator.maxTouchPoints);\n};\n","import React, { useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport './layout-frame.scss';\nimport useLocalStorage from '../../util/useLocalStorage';\nimport { NAV_POSITION, NAV_SIZE } from '../../constants';\nimport { isTouchscreen } from '../../util/mobileDetect';\n\ntype Props = {\n sideNav?: React.ReactElement;\n topBar?: React.ReactNode;\n isLegacyPage: boolean;\n children?: React.ReactNode;\n};\n\nconst LayoutFrame = ({ sideNav, topBar, isLegacyPage, children }: Props) => {\n const navRef = useRef<HTMLDivElement>(null);\n const isFullScreen = false;\n const [isExpanded, setIsExpanded] = useLocalStorage<boolean>(\n 'vertical-nav-is-expanded',\n true\n );\n const [isHovering, setIsHovering] = useState(false);\n\n const toggleExpand = () => {\n //@ts-ignore\n setIsExpanded(!isExpanded);\n if (isExpanded && navRef) {\n setIsHovering(false);\n }\n };\n\n const isTouchDevice = isTouchscreen();\n const isShowingSideMenu = !isFullScreen && sideNav;\n\n return (\n <div\n className={classNames('layout-frame', {\n 'layout-frame--no-height': isLegacyPage\n })}\n >\n {isShowingSideMenu && (\n <div\n ref={navRef}\n className={classNames('layout-frame__side-bar', {\n 'layout-frame__side-bar--expanded': isExpanded,\n 'layout-frame__side-bar--collapsed': !isExpanded\n })}\n onMouseEnter={() => {\n !isTouchDevice && setIsHovering(true);\n }}\n onMouseLeave={() => {\n !isTouchDevice && setIsHovering(false);\n }}\n style={{\n width:\n isExpanded || isHovering\n ? NAV_SIZE.EXPANDED\n : NAV_SIZE.COLLAPSED\n }}\n >\n {sideNav &&\n React.cloneElement(sideNav, {\n isHovering,\n navPosition: isExpanded\n ? NAV_POSITION.EXPANDED\n : NAV_POSITION.COLLAPSED,\n toggleExpand,\n ...sideNav.props\n })}\n </div>\n )}\n\n <div\n className={classNames('layout-frame__middle-area', {\n 'layout-frame__middle-area--full-size': !isShowingSideMenu,\n 'layout-frame__middle-area--no-footer-padding': isLegacyPage\n })}\n >\n {!isFullScreen && (\n <div\n className={classNames('layout-frame__top-bar', {\n 'layout-frame__top-bar--hidden': isLegacyPage\n })}\n >\n {topBar}\n </div>\n )}\n <div className=\"layout-frame__content\">\n {children}\n {!isLegacyPage && <div id=\"footer\" />}\n </div>\n </div>\n </div>\n );\n};\n\nexport default LayoutFrame;\n","// @ts-strict-ignore\nimport { useCallback, useState } from 'react';\n\nfunction useLocalStorage<T>(\n key: string,\n initialValue: T\n): [T, (value: T) => void] {\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n // Get from local storage by key\n const item = window.localStorage.getItem(key);\n // Parse stored json or if none return initialValue\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n // If error also return initialValue\n return initialValue;\n }\n });\n\n // Return a wrapped version of useState's setter function that persists the new value to localStorage.\n const setValue = useCallback(\n (value) => {\n try {\n // Allow value to be a function so we have same API as useState\n const valueToStore =\n value instanceof Function ? value(storedValue) : value;\n // Save state\n setStoredValue(valueToStore);\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n throw new Error(error as string);\n }\n },\n [key, storedValue]\n );\n\n return [storedValue, setValue];\n}\n\nexport default useLocalStorage;\n","import { NavDivider } from './types';\n\nexport const NAV_POSITION = {\n EXPANDED: 'expanded' as const,\n COLLAPSED: 'collapsed' as const\n};\n\nexport const NAV_SIZE = {\n EXPANDED: 240,\n COLLAPSED: 72\n} as const;\n\nexport const DIVIDER: NavDivider = {\n type: 'divider' as const\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './primary-nav-item.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\ntype Props = {\n as?: 'div' | 'li';\n isActive?: boolean;\n children: React.ReactNode;\n};\n\nconst PrimaryNavItem = ({ as = 'li', isActive = false, children }: Props) => {\n const props = {\n className: classNames('primary-nav-item', {\n 'primary-nav-item--active': isActive\n })\n };\n\n const content = (\n <Inline alignItems=\"center\" space={16} flex={['0 1 auto', '0 0 142px']}>\n {children}\n </Inline>\n );\n\n return React.createElement(as, props, content);\n};\n\nexport default PrimaryNavItem;\n","import React from 'react';\nimport { Badge, Chip } from '@7shifts/sous-chef';\nimport classNames from 'classnames';\nimport './secondary-nav-item.scss';\nimport { getBadgeContent } from '../../util/navDomain';\n\ntype Props = {\n isActive?: boolean;\n icon?: React.ReactNode;\n badge?: string | number;\n children: React.ReactNode;\n};\n\nconst SecondaryNavItem = ({\n isActive = false,\n icon,\n badge,\n children\n}: Props) => {\n const hasChip = typeof badge === 'string' && badge !== '';\n const hasBadge = typeof badge === 'number' && badge > 0;\n return (\n <li\n className={classNames('secondary-nav-item', {\n 'secondary-nav-item--active': isActive,\n 'secondary-nav-item--no-icon': !icon\n })}\n >\n {icon}\n <div className=\"secondary-nav-item__content\">\n {children}\n {hasBadge && <Badge>{getBadgeContent(badge)}</Badge>}\n {hasChip && <Chip>{badge}</Chip>}\n </div>\n </li>\n );\n};\n\nexport default SecondaryNavItem;\n","export const getBadgeContent = (\n badge: (string | null | undefined) | (number | null | undefined)\n): string | null | undefined => {\n if (typeof badge === 'number') {\n if (badge > 0 && badge <= 99) {\n //covers number values between 0 and 99\n return String(badge);\n } else if (badge > 99) {\n //covers number values bigger than 99\n return '99+';\n }\n } else if (typeof badge === 'string') {\n //covers all string values, excluding \"0\"\n if (badge === '0') {\n return null;\n } else if (parseInt(badge) > 99) {\n //covers number values bigger than 99\n return '99+';\n } else {\n //return all other strings\n return badge;\n }\n }\n\n return null;\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\nimport './notification-badge.scss';\n\ntype Props = {\n children?: ReactNode;\n};\n\nconst NotificationBadge = ({ children }: Props): JSX.Element => {\n return (\n <span\n className={classNames('notification-badge', {\n 'notification-badge--bullet': !children,\n 'notification-badge--count': children\n })}\n data-testid=\"notification-badge\"\n >\n {children}\n </span>\n );\n};\n\nexport default NotificationBadge;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItemGroup } from '../../types';\nimport { Link } from 'react-router-dom';\nimport { IconAward } from '@7shifts/sous-chef';\nimport { useState } from 'react';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport SecondaryNavItem from '../SecondaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\nimport './side-nav-menu-item-group.scss';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n item: NavBarItemGroup;\n};\n\nconst SideNavMenuItemGroup = ({ isExpanded, toggleExpand, item }: Props) => {\n const { label, badge } = item;\n const hasActiveSubmenu = Boolean(item.items.find((item) => item.isActive));\n const [isSubmenuExpanded, setIsSubmenuExpanded] = useState(\n !!hasActiveSubmenu\n );\n\n // sorts paywalled navBarItems to bottom of submenu\n const sortedNavBarItems = item.items.sort(\n (itemA, itemB) =>\n Number(itemA.isPaywalled || false) -\n Number(itemB.isPaywalled || false)\n );\n\n const Icon = item.icon;\n return (\n <li className=\"side-nav-menu-item-group\">\n <Link\n to={item.url || item.items[0].url}\n key={label}\n onClick={() => {\n if (!isExpanded && hasActiveSubmenu && toggleExpand) {\n toggleExpand();\n setIsSubmenuExpanded(true);\n return;\n }\n\n if (!isSubmenuExpanded || hasActiveSubmenu) {\n setIsSubmenuExpanded(!isSubmenuExpanded);\n }\n }}\n >\n <PrimaryNavItem as=\"div\" isActive={hasActiveSubmenu}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n {isExpanded && hasActiveSubmenu && (\n <ul className=\"side-nav-menu-item-group__submenu\">\n {sortedNavBarItems.map((subMenuItem) => (\n <Link\n to={subMenuItem.url}\n key={subMenuItem.label}\n onClick={() => {\n if (subMenuItem.onClick) {\n subMenuItem.onClick();\n }\n }}\n >\n <SecondaryNavItem\n isActive={subMenuItem.isActive}\n badge={subMenuItem.badge}\n icon={\n subMenuItem.isPaywalled ? (\n <IconAward\n size=\"medium\"\n color=\"eggplant-500\"\n />\n ) : undefined\n }\n >\n {subMenuItem.label}\n </SecondaryNavItem>\n </Link>\n ))}\n </ul>\n )}\n </li>\n );\n};\n\nexport default SideNavMenuItemGroup;\n","// @ts-strict-ignore\nimport React from 'react';\nimport { NavBarItem } from '../../types';\nimport { Link } from 'react-router-dom';\nimport PrimaryNavItem from '../PrimaryNavItem';\nimport NotificationBadge from '../NotificationBadge';\n\ntype Props = {\n isExpanded: boolean;\n item: NavBarItem;\n};\n\nconst SideNavMenuItem = ({ isExpanded, item }: Props) => {\n const { url, label, isActive, badge } = item;\n const Icon = item.icon;\n return (\n <Link\n to={url}\n key={label}\n onClick={(e) => {\n if (isActive) {\n e.preventDefault();\n }\n if (item.onClick) {\n item.onClick();\n }\n }}\n >\n <PrimaryNavItem isActive={isActive}>\n {Icon && (\n <React.Fragment>\n <Icon />\n {(badge as number) > 0 ? (\n <NotificationBadge />\n ) : undefined}\n </React.Fragment>\n )}\n {isExpanded && label}\n </PrimaryNavItem>\n </Link>\n );\n};\n\nexport default SideNavMenuItem;\n","import React from 'react';\nimport { useNavItems } from '../../hooks/useNavItems';\nimport './side-nav-menu.scss';\nimport { NavBarItems } from '../../types';\nimport SideNavMenuItemGroup from '../SideNavMenuItemGroup/SideNavMenuItemGroup';\nimport SideNavMenuItem from '../SideNavMenuItem/SideNavMenuItem';\n\ntype Props = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n};\n\nconst SideNavMenu = ({ isExpanded, toggleExpand }: Props) => {\n return (\n <SideNavMenuApp isExpanded={isExpanded} toggleExpand={toggleExpand} />\n );\n};\n\ntype SideNavMenuListProps = {\n isExpanded: boolean;\n toggleExpand?: () => void;\n navItems: NavBarItems;\n};\n\nconst SideNavMenuList = ({\n isExpanded,\n toggleExpand,\n navItems\n}: SideNavMenuListProps) => {\n return (\n <ul className=\"side-nav-menu\">\n {navItems.map((item, index) => {\n if ('type' in item) {\n return (\n <div key={index} className=\"side-nav-menu__divider\" />\n );\n }\n if ('items' in item) {\n return (\n <SideNavMenuItemGroup\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n toggleExpand={toggleExpand}\n />\n );\n }\n\n return (\n <SideNavMenuItem\n key={item.label}\n isExpanded={isExpanded}\n item={item}\n />\n );\n })}\n </ul>\n );\n};\n\nconst SideNavMenuApp = ({\n isExpanded,\n toggleExpand\n}: Omit<SideNavMenuListProps, 'navItems'>) => {\n const navItems = useNavItems();\n\n return (\n <SideNavMenuList\n isExpanded={isExpanded}\n toggleExpand={toggleExpand}\n navItems={navItems}\n />\n );\n};\n\nexport default SideNavMenu;\n","import {\n IconTachometer,\n IconMessages,\n IconList,\n IconPaperPlane,\n IconUserFriends,\n IconCalendarTomorrow,\n IconFlag,\n IconUserComputer,\n IconQuestionCircle,\n IconMegaphone,\n IconPlug,\n IconRepeat,\n IconCreditCard,\n IconCog,\n IconFourDotsCircle\n} from '@7shifts/sous-chef';\nimport { NavBarItems } from '../types';\n\nexport const useNavItems = (): NavBarItems => {\n return [\n {\n label: 'Dashboard',\n isActive: true,\n isShowing: true,\n url: '/dashboard',\n icon: IconTachometer\n },\n {\n label: 'Tickets',\n isActive: false,\n isShowing: true,\n url: '/tickets',\n icon: IconMessages\n },\n {\n label: 'CRM',\n isActive: false,\n isShowing: true,\n url: '/crm',\n icon: IconList\n },\n {\n label: 'Quick messages',\n isActive: false,\n isShowing: true,\n url: '/quick-messages',\n icon: IconPaperPlane\n },\n {\n label: 'Contacts',\n isActive: false,\n isShowing: true,\n url: '/contacts',\n icon: IconUserFriends\n },\n {\n label: 'Schedules',\n isActive: false,\n isShowing: true,\n url: '/schedules',\n icon: IconCalendarTomorrow\n },\n {\n label: 'Tags',\n isActive: false,\n isShowing: true,\n url: '/tags',\n icon: IconFlag\n },\n {\n label: 'Internal chat',\n isActive: false,\n isShowing: true,\n url: '/chats',\n icon: IconUserComputer\n },\n {\n label: 'Help',\n isActive: false,\n isShowing: true,\n url: '/helps',\n icon: IconQuestionCircle\n },\n {\n type: 'divider'\n },\n {\n label: 'Campains',\n isActive: false,\n isShowing: true,\n url: '/campains',\n icon: IconMegaphone\n },\n {\n label: 'Connections',\n isActive: false,\n isShowing: true,\n url: '/connections',\n icon: IconFourDotsCircle\n },\n {\n label: 'Queues',\n isActive: false,\n isShowing: true,\n url: '/queues',\n icon: IconRepeat\n },\n {\n label: 'API',\n isActive: false,\n isShowing: true,\n url: '/api',\n icon: IconPlug\n },\n {\n label: 'Finance',\n isActive: false,\n isShowing: true,\n url: '/finance',\n icon: IconCreditCard\n },\n {\n label: 'Settings',\n isActive: false,\n isShowing: true,\n url: '/settings',\n icon: IconCog\n }\n ];\n};\n","import React from 'react';\nimport { IconChevronLeft, IconChevronRight, Inline } from '@7shifts/sous-chef';\nimport './side-nav-bar.scss';\nimport { NavPosition } from '../../types';\nimport { isTouchscreen } from '../../util/mobileDetect';\nimport { NAV_POSITION } from '../../constants';\nimport SideNavMenu from '../SideNavMenu/SideNavMenu';\n\ntype Props = {\n isHovering?: boolean;\n navPosition?: NavPosition;\n toggleExpand?: () => void;\n};\n\nconst SideNavBar = ({\n isHovering,\n navPosition = NAV_POSITION.COLLAPSED,\n toggleExpand\n}: Props) => {\n const isExpanded = navPosition === NAV_POSITION.EXPANDED || isHovering;\n const isTouchDevice = isTouchscreen();\n\n /* Disabling HotJar on vertical nav to check if this is causing the Chromebook issues\n useEffect(() => {\n const hj = getHotjar();\n hj('event', 'vertical-nav');\n }, []);\n */\n\n return (\n <nav className=\"side-nav-bar\">\n <div className=\"side-nav-bar__header\">\n <Inline alignItems=\"center\" justifyContent=\"space-between\">\n {(!isTouchDevice || isExpanded) && (\n <div className=\"side-nav-bar__logo\">\n <Logo />\n </div>\n )}\n {(isExpanded || isTouchDevice) && (\n <button\n onClick={toggleExpand}\n className=\"side-nav-bar__nav-toggle\"\n >\n {navPosition === NAV_POSITION.COLLAPSED ? (\n <IconChevronRight />\n ) : (\n <IconChevronLeft />\n )}\n </button>\n )}\n </Inline>\n </div>\n <SideNavMenu\n isExpanded={isExpanded as boolean}\n toggleExpand={toggleExpand}\n />\n </nav>\n );\n};\n\nconst Logo = () => (\n <svg\n version=\"1.0\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"47\"\n viewBox=\"0 0 220.000000 182.000000\"\n preserveAspectRatio=\"xMidYMid meet\"\n >\n <g\n transform=\"translate(0.000000,182.000000) scale(0.100000,-0.100000)\"\n fill=\"#273a62\"\n stroke=\"none\"\n >\n <path\n d=\"M1225 1795 c-28 -27 -31 -49 -10 -85 19 -32 19 -64 0 -80 -8 -6 -47\n-18 -87 -27 -79 -16 -197 -68 -240 -107 -43 -39 -95 -112 -108 -153 -8 -22\n-33 -57 -61 -84 -48 -44 -49 -46 -49 -105 1 -76 14 -135 36 -151 9 -7 46 -22\n80 -33 41 -14 64 -27 64 -37 0 -8 -24 -42 -54 -75 -115 -127 -166 -287 -117\n-365 45 -71 128 -87 201 -39 22 14 44 26 49 26 6 0 24 -29 41 -64 39 -82 118\n-169 184 -204 70 -36 151 -36 221 0 88 46 146 118 221 276 1 2 18 -8 39 -22\n51 -35 97 -47 138 -35 69 20 100 67 100 151 -1 79 -49 178 -132 271 -34 37\n-61 72 -61 76 0 15 24 28 81 45 81 23 92 39 97 147 4 76 2 93 -13 109 -23 26\n-35 25 -35 0 0 -11 -8 -37 -17 -58 l-17 -37 -6 95 c-5 74 -12 106 -33 146 -56\n110 -186 198 -336 229 -41 9 -80 20 -88 26 -17 15 -17 50 2 75 23 31 18 70\n-11 93 -34 27 -50 26 -79 -4z m72 -20 c9 -25 -4 -29 -17 -6 -7 15 -7 21 0 21\n6 0 13 -7 17 -15z m158 -250 c259 -66 351 -385 164 -560 -88 -82 -231 -132\n-354 -122 -110 8 -236 63 -264 115 -8 14 1 13 48 -10 115 -55 302 -56 423 -1\n176 79 236 298 114 419 -61 62 -107 71 -210 45 -102 -26 -138 -26 -218 -1 -34\n11 -74 20 -88 20 l-25 1 25 21 c88 75 255 106 385 73z m-355 -230 c83 -43 52\n-208 -40 -208 -87 0 -118 144 -43 203 31 24 45 25 83 5z m420 -12 c58 -52 45\n-159 -22 -191 -59 -28 -124 42 -114 123 5 44 51 95 86 95 11 0 34 -12 50 -27z\nm172 -465 c50 -61 98 -139 92 -149 -3 -5 -16 -9 -29 -9 -12 0 -48 -13 -79 -29\nl-56 -30 -1 37 c-1 50 -5 77 -26 146 l-17 59 23 18 c28 23 45 16 93 -43z\nm-782 -29 c6 -10 10 -59 9 -109 l-1 -91 -31 24 c-18 13 -46 29 -64 36 -38 15\n-45 30 -33 72 25 85 91 123 120 68z m624 -34 c37 -119 14 -263 -59 -371 -41\n-59 -68 -74 -133 -74 -165 1 -272 187 -198 346 39 85 89 112 246 134 41 6 76\n13 79 15 2 3 14 5 26 5 17 0 25 -11 39 -55z\"\n />\n <path\n d=\"M1251 703 c-5 -10 -10 -29 -11 -43 -6 -64 1 -83 39 -121 31 -31 46\n-39 75 -39 44 0 91 22 106 51 11 20 11 20 -14 3 -36 -23 -109 -14 -141 16 -31\n29 -49 83 -41 121 6 33 1 37 -13 12z\"\n />\n <path\n d=\"M877 1775 c-167 -69 -351 -245 -439 -420 -51 -101 -78 -184 -94 -289\n-19 -123 -13 -224 22 -356 88 -331 318 -564 659 -666 78 -24 108 -27 230 -28\n116 0 155 3 223 22 411 111 703 479 703 885 0 167 -38 314 -72 280 -7 -7 -7\n-27 0 -68 33 -180 23 -334 -35 -494 -42 -119 -96 -209 -178 -297 -144 -156\n-331 -251 -540 -274 -176 -20 -347 13 -504 96 -218 115 -371 305 -434 539 -31\n116 -31 326 0 443 71 264 240 464 488 577 58 27 75 39 70 51 -3 8 -6 18 -6 20\n0 10 -40 1 -93 -21z\"\n fill=\"#1a70b2\"\n />\n <path\n d=\"M405 1602 c-80 -106 -167 -279 -194 -388 -47 -186 -51 -393 -11 -549\n28 -110 125 -302 205 -407 67 -89 83 -100 105 -73 10 12 4 25 -37 72 -100 117\n-166 237 -209 380 -36 118 -45 365 -20 493 36 175 119 345 225 462 49 54 53\n71 21 88 -16 9 -28 -3 -85 -78z\"\n fill=\"#1a70b2\"\n />\n <path\n d=\"M110 1388 c-63 -132 -91 -256 -97 -435 -6 -161 1 -226 39 -343 35\n-109 65 -160 93 -160 14 0 25 2 25 4 0 2 -14 33 -30 70 -57 125 -74 221 -74\n406 1 145 4 177 27 263 15 55 46 139 71 188 l44 89 -29 0 c-28 0 -33 -7 -69\n-82z\"\n fill=\"#1a70b2\"\n />\n </g>\n </svg>\n);\n\nexport default SideNavBar;\n","import React from 'react';\nimport { Tooltip } from '@7shifts/sous-chef';\nimport './nav-button.scss';\n\ntype props = {\n children: React.ReactNode;\n tooltipContent: string;\n onClick: () => void;\n};\n\nconst NavButton = ({\n children,\n tooltipContent,\n onClick\n}: props): JSX.Element => {\n return (\n <Tooltip overlay={tooltipContent}>\n <button\n className=\"nav-button\"\n tabIndex={0}\n onClick={() => onClick()}\n >\n {children}\n </button>\n </Tooltip>\n );\n};\n\nexport default NavButton;\n","import React from 'react';\nimport { IconMegaphone } from '@7shifts/sous-chef';\nimport NotificationBadge from '../NotificationBadge';\nimport NavButton from '../NavButton';\n\nconst AnnouncementsMenu = (): JSX.Element => {\n const unreadAnnouncementsCount = 2;\n\n const isBadged = Number(unreadAnnouncementsCount) > 0;\n const onClick = () => {\n console.log('Click');\n };\n return (\n <NavButton tooltipContent=\"Announcements\" onClick={() => onClick()}>\n <div\n data-product-tour-target=\"connect_with_my_team\"\n data-testid=\"announcements-open-button\"\n className=\"announcements-menu\"\n >\n <IconMegaphone color=\"grey-400\" />\n {isBadged && (\n <NotificationBadge>\n {unreadAnnouncementsCount}\n </NotificationBadge>\n )}\n </div>\n </NavButton>\n );\n};\n\nexport default AnnouncementsMenu;\n","import React from 'react';\nimport { Avatar, Tooltip } from '@7shifts/sous-chef';\nimport './brand.scss';\n\nconst Brand = () => {\n return (\n <div className=\"brand\">\n <div className=\"brand__company-photo\">\n <Avatar\n size=\"large\"\n url=\"https://media.istockphoto.com/id/1164466990/vector/digital-signage-pixel-icon-tech-element-vector-logo-icon-illustrator.jpg?s=612x612&w=0&k=20&c=tC_2Q7WSFbUUSDC7Nk9u-krFzDrWA4-aZjX3HI_8LoU=\"\n />\n </div>\n <Tooltip overlay=\"Company name\">\n <span className=\"brand__company-name\">\n Clash Creative Marketing\n </span>\n </Tooltip>\n </div>\n );\n};\n\nexport default Brand;\n","import React from 'react';\nimport {\n Avatar,\n Dropdown,\n DropdownList,\n DropdownListItem\n} from '@7shifts/sous-chef';\nimport './my-account-menu.scss';\n\nconst MyAccountMenu = () => {\n const trigger = (\n <div className=\"my-account-menu\">\n <Avatar\n size=\"large\"\n url=\"https://mymodernmet.com/wp/wp-content/uploads/2019/09/100k-ai-faces-6.jpg\"\n />\n </div>\n );\n\n return (\n <Dropdown trigger={trigger} triggersOn=\"hover\" zIndex={6}>\n <DropdownList>\n <DropdownListItem href=\"/employees\">\n My account\n </DropdownListItem>\n <DropdownListItem href=\"/employees\">Log out</DropdownListItem>\n </DropdownList>\n </Dropdown>\n );\n};\n\nexport default MyAccountMenu;\n","import React from 'react';\nimport AnnouncementsMenu from '../AnnoucementsMenu';\nimport Brand from '../Brand/Brand';\nimport MyAccountMenu from '../MyAccountMenu/MyAccountMenu';\nimport './top-bar.scss';\nimport { Inline } from '@7shifts/sous-chef';\n\nconst TopBar = () => {\n return (\n <div className=\"top-bar\">\n <div>\n <Brand />\n </div>\n <Inline space={24} alignItems=\"center\">\n <Inline space={12} alignItems=\"center\">\n <AnnouncementsMenu />\n </Inline>\n <MyAccountMenu />\n </Inline>\n </div>\n );\n};\n\nexport default TopBar;\n"],"names":["isTouchscreen","Boolean","window","navigator","maxTouchPoints","LayoutFrame","_ref","sideNav","topBar","isLegacyPage","children","navRef","useRef","_useLocalStorage","key","initialValue","_useState","useState","item","localStorage","getItem","JSON","parse","error","storedValue","setStoredValue","setValue","useCallback","value","valueToStore","Function","setItem","stringify","Error","useLocalStorage","isExpanded","setIsExpanded","isHovering","setIsHovering","isTouchDevice","isShowingSideMenu","React","className","classNames","layout-frame--no-height","ref","layout-frame__side-bar--expanded","layout-frame__side-bar--collapsed","onMouseEnter","onMouseLeave","style","width","cloneElement","_extends","navPosition","toggleExpand","props","layout-frame__middle-area--full-size","layout-frame__middle-area--no-footer-padding","layout-frame__top-bar--hidden","id","PrimaryNavItem","as","_ref$as","_ref$isActive","isActive","primary-nav-item--active","content","Inline","alignItems","space","flex","createElement","SecondaryNavItem","icon","badge","hasChip","hasBadge","secondary-nav-item--active","secondary-nav-item--no-icon","Badge","String","parseInt","getBadgeContent","Chip","NotificationBadge","notification-badge--bullet","notification-badge--count","SideNavMenuItemGroup","label","hasActiveSubmenu","items","find","isSubmenuExpanded","setIsSubmenuExpanded","sortedNavBarItems","sort","itemA","itemB","Number","isPaywalled","Icon","Link","to","url","onClick","Fragment","undefined","map","subMenuItem","IconAward","size","color","SideNavMenuItem","e","preventDefault","SideNavMenu","SideNavMenuApp","SideNavMenuList","_ref2","navItems","index","_ref3","isShowing","IconTachometer","IconMessages","IconList","IconPaperPlane","IconUserFriends","IconCalendarTomorrow","IconFlag","IconUserComputer","IconQuestionCircle","type","IconMegaphone","IconFourDotsCircle","IconRepeat","IconPlug","IconCreditCard","IconCog","SideNavBar","_ref$navPosition","justifyContent","Logo","IconChevronRight","IconChevronLeft","version","xmlns","height","viewBox","preserveAspectRatio","transform","fill","stroke","d","NavButton","Tooltip","overlay","tooltipContent","tabIndex","AnnouncementsMenu","isBadged","console","log","Brand","Avatar","MyAccountMenu","trigger","Dropdown","triggersOn","zIndex","DropdownList","DropdownListItem","href","TopBar"],"mappings":"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"}
package/dist/layout/components/AnnoucementsMenu/AnnouncementsMenu.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const AnnouncementsMenu: () => JSX.Element;
2
+ export default AnnouncementsMenu;
package/dist/layout/components/AnnoucementsMenu/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './AnnouncementsMenu';
package/dist/layout/components/Brand/Brand.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './brand.scss';
3
+ declare const Brand: () => React.JSX.Element;
4
+ export default Brand;
package/dist/layout/components/Brand/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './Brand';
package/dist/layout/components/LayoutFrame/LayoutFrame.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import './layout-frame.scss';
3
+ declare type Props = {
4
+ sideNav?: React.ReactElement;
5
+ topBar?: React.ReactNode;
6
+ isLegacyPage: boolean;
7
+ children?: React.ReactNode;
8
+ };
9
+ declare const LayoutFrame: ({ sideNav, topBar, isLegacyPage, children }: Props) => React.JSX.Element;
10
+ export default LayoutFrame;
package/dist/layout/components/LayoutFrame/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './LayoutFrame';
package/dist/layout/components/MessagingMenu/MessagingMenu.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { ReactElement } from 'react';
2
+ declare const MessagingMenu: () => ReactElement;
3
+ export default MessagingMenu;
package/dist/layout/components/MessagingMenu/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './MessagingMenu';
package/dist/layout/components/MyAccountMenu/MyAccountMenu.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './my-account-menu.scss';
3
+ declare const MyAccountMenu: () => React.JSX.Element;
4
+ export default MyAccountMenu;
package/dist/layout/components/MyAccountMenu/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './MyAccountMenu';
package/dist/layout/components/NavButton/NavButton.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import './nav-button.scss';
3
+ declare type props = {
4
+ children: React.ReactNode;
5
+ tooltipContent: string;
6
+ onClick: () => void;
7
+ };
8
+ declare const NavButton: ({ children, tooltipContent, onClick }: props) => JSX.Element;
9
+ export default NavButton;
package/dist/layout/components/NavButton/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './NavButton';
package/dist/layout/components/NotificationBadge/NotificationBadge.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ import './notification-badge.scss';
3
+ declare type Props = {
4
+ children?: ReactNode;
5
+ };
6
+ declare const NotificationBadge: ({ children }: Props) => JSX.Element;
7
+ export default NotificationBadge;
package/dist/layout/components/NotificationBadge/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './NotificationBadge';
package/dist/layout/components/PrimaryNavItem/PrimaryNavItem.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import './primary-nav-item.scss';
3
+ declare type Props = {
4
+ as?: 'div' | 'li';
5
+ isActive?: boolean;
6
+ children: React.ReactNode;
7
+ };
8
+ declare const PrimaryNavItem: ({ as, isActive, children }: Props) => React.DetailedReactHTMLElement<{
9
+ className: string;
10
+ }, HTMLElement>;
11
+ export default PrimaryNavItem;
package/dist/layout/components/PrimaryNavItem/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './PrimaryNavItem';
package/dist/layout/components/SecondaryNavItem/SecondaryNavItem.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import './secondary-nav-item.scss';
3
+ declare type Props = {
4
+ isActive?: boolean;
5
+ icon?: React.ReactNode;
6
+ badge?: string | number;
7
+ children: React.ReactNode;
8
+ };
9
+ declare const SecondaryNavItem: ({ isActive, icon, badge, children }: Props) => React.JSX.Element;
10
+ export default SecondaryNavItem;
package/dist/layout/components/SecondaryNavItem/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './SecondaryNavItem';
package/dist/layout/components/SideNavBar/SideNavBar.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import './side-nav-bar.scss';
3
+ import { NavPosition } from '../../types';
4
+ declare type Props = {
5
+ isHovering?: boolean;
6
+ navPosition?: NavPosition;
7
+ toggleExpand?: () => void;
8
+ };
9
+ declare const SideNavBar: ({ isHovering, navPosition, toggleExpand }: Props) => React.JSX.Element;
10
+ export default SideNavBar;
package/dist/layout/components/SideNavBar/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './SideNavBar';
package/dist/layout/components/SideNavMenu/SideNavMenu.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import './side-nav-menu.scss';
3
+ declare type Props = {
4
+ isExpanded: boolean;
5
+ toggleExpand?: () => void;
6
+ };
7
+ declare const SideNavMenu: ({ isExpanded, toggleExpand }: Props) => React.JSX.Element;
8
+ export default SideNavMenu;
package/dist/layout/components/SideNavMenu/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './SideNavMenu';
package/dist/layout/components/SideNavMenuItem/SideNavMenuItem.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { NavBarItem } from '../../types';
3
+ declare type Props = {
4
+ isExpanded: boolean;
5
+ item: NavBarItem;
6
+ };
7
+ declare const SideNavMenuItem: ({ isExpanded, item }: Props) => React.JSX.Element;
8
+ export default SideNavMenuItem;
package/dist/layout/components/SideNavMenuItem/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './SideNavMenuItem';
package/dist/layout/components/SideNavMenuItemGroup/SideNavMenuItemGroup.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { NavBarItemGroup } from '../../types';
3
+ import './side-nav-menu-item-group.scss';
4
+ declare type Props = {
5
+ isExpanded: boolean;
6
+ toggleExpand?: () => void;
7
+ item: NavBarItemGroup;
8
+ };
9
+ declare const SideNavMenuItemGroup: ({ isExpanded, toggleExpand, item }: Props) => React.JSX.Element;
10
+ export default SideNavMenuItemGroup;
package/dist/layout/components/SideNavMenuItemGroup/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './SideNavMenuItemGroup';
package/dist/layout/components/TopBar/TopBar.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './top-bar.scss';
3
+ declare const TopBar: () => React.JSX.Element;
4
+ export default TopBar;
package/dist/layout/components/TopBar/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './TopBar';
package/dist/layout/constants.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { NavDivider } from './types';
2
+ export declare const NAV_POSITION: {
3
+ EXPANDED: "expanded";
4
+ COLLAPSED: "collapsed";
5
+ };
6
+ export declare const NAV_SIZE: {
7
+ readonly EXPANDED: 240;
8
+ readonly COLLAPSED: 72;
9
+ };
10
+ export declare const DIVIDER: NavDivider;
package/dist/layout/hooks/useNavItems.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { NavBarItems } from '../types';
2
+ export declare const useNavItems: () => NavBarItems;
package/dist/layout/types.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ export declare type NavBarItem = {
3
+ label: string;
4
+ icon?: React.FC<{
5
+ color?: string;
6
+ }>;
7
+ url: string;
8
+ isActive: boolean;
9
+ isShowing: boolean;
10
+ isPaywalled?: boolean;
11
+ badge?: string | number;
12
+ onClick?: () => void;
13
+ };
14
+ export declare type NavBarItemGroup = NavBarItem & {
15
+ items: NavBarItem[];
16
+ };
17
+ export declare type NavDivider = {
18
+ type: 'divider';
19
+ };
20
+ export declare type NavBarItems = Array<NavBarItemGroup | NavBarItem | NavDivider>;
21
+ export declare type NavPosition = 'expanded' | 'collapsed';
package/dist/layout/util/mobileDetect.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const isTouchscreen: () => boolean;
package/dist/layout/util/navDomain.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const getBadgeContent: (badge: (string | null | undefined) | (number | null | undefined)) => string | null | undefined;
package/dist/layout/util/useLocalStorage.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void];
2
+ export default useLocalStorage;
package/package.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "name": "app-layout-frame",
3
+ "version": "0.0.1",
4
+ "description": "Easily layout your webapp with sidenav and topbar",
5
+ "author": "galexandrade",
6
+ "license": "MIT",
7
+ "repository": "galexandradeapp-layout-frame",
8
+ "main": "dist/index.js",
9
+ "module": "dist/index.modern.js",
10
+ "source": "src/index.tsx",
11
+ "engines": {
12
+ "node": ">=10"
13
+ },
14
+ "scripts": {
15
+ "build": "microbundle-crl --format modern,cjs",
16
+ "start": "microbundle-crl watch --no-compress --format modern,cjs"
17
+ },
18
+ "peerDependencies": {
19
+ "react": ">16.0.0",
20
+ "react-dom": ">16.0.0",
21
+ "react-router-dom": ">=5.1.2"
22
+ },
23
+ "devDependencies": {
24
+ "@babel/core": "^7.16.7",
25
+ "@babel/plugin-transform-regenerator": "^7.16.7",
26
+ "@testing-library/jest-dom": "^5.12.0",
27
+ "@testing-library/react": "^11.2.7",
28
+ "@testing-library/react-hooks": "^8.0.1",
29
+ "@testing-library/user-event": "^13.2.1",
30
+ "@types/jest": "^25.1.4",
31
+ "@types/node": "^20.4.5",
32
+ "@types/react": "^16.9.27",
33
+ "@types/react-dom": "^16.9.7",
34
+ "@types/react-router-dom": "^5.3.3",
35
+ "@types/resize-observer-browser": "^0.1.7",
36
+ "@typescript-eslint/eslint-plugin": "^2.26.0",
37
+ "@typescript-eslint/parser": "^2.26.0",
38
+ "babel-eslint": "^10.0.3",
39
+ "babel-loader": "^8.2.3",
40
+ "chromatic": "^6.3.4",
41
+ "cross-env": "^7.0.2",
42
+ "eslint": "^6.8.0",
43
+ "eslint-config-prettier": "^6.7.0",
44
+ "eslint-config-standard": "^14.1.0",
45
+ "eslint-config-standard-react": "^9.2.0",
46
+ "eslint-plugin-import": "^2.18.2",
47
+ "eslint-plugin-jsx-a11y": "^6.4.1",
48
+ "eslint-plugin-node": "^11.0.0",
49
+ "eslint-plugin-prettier": "^3.1.1",
50
+ "eslint-plugin-promise": "^4.2.1",
51
+ "eslint-plugin-react": "^7.17.0",
52
+ "eslint-plugin-standard": "^4.0.1",
53
+ "jest-environment-jsdom-sixteen": "^2.0.0",
54
+ "microbundle-crl": "^0.13.10",
55
+ "prettier": "^2.0.4",
56
+ "react": "^16.13.1",
57
+ "react-dom": "^16.13.1",
58
+ "sass": "^1.48.0",
59
+ "sass-loader": "10.1.1",
60
+ "typescript": "^3.7.5"
61
+ },
62
+ "files": [
63
+ "dist"
64
+ ],
65
+ "dependencies": {
66
+ "@7shifts/sous-chef": "^3.23.0",
67
+ "classnames": "^2.3.2"
68
+ }
69
+ }