@lendi/navbar 7.13.2 → 7.13.3

package/dist/declarations/src/Header/Nav.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { GlobalProps } from '@lendi-ui/commons/utils';
-export interface NavRestrictedProp {
+export interface NavCommonProps {
     hasRestriction?: boolean;
+    isActive?: boolean;
 }
-export interface NavItemProps extends NavRestrictedProp {
+export interface NavItemProps extends NavCommonProps {
     label: string;
     link?: string | undefined;
 }
@@ -11,10 +12,9 @@ export interface NavElements extends NavItemProps {
     children?: NavSubItems[];
     minDropdownWidth?: string;
 }
-export interface NavSubItems extends NavRestrictedProp {
+export interface NavSubItems extends NavCommonProps {
     label: string;
     link: string;
-    isActive?: boolean;
 }
 export declare const NAV_MENU_ITEMS: NavElements[];
 interface NavTypes {
@@ -28,5 +28,8 @@ export interface MenuItemProps {
     label: string;
     children: React.ReactNode;
 }
+export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isOpen?: boolean | undefined;
+}, never>;
 export declare const Nav: ({ navOptions, isSlideout, isRestricted, ...props }: NavProps) => JSX.Element;
 export {};

package/dist/declarations/src/Header/NavButtons.d.ts

@@ -10,5 +10,6 @@ export interface NavLinkProps extends GlobalProps {
     children: string;
     href: string;
     onClick?: () => void;
+    isActive?: boolean;
 }
-export declare const NavLink: ({ children, href, onClick, ...props }: NavLinkProps) => JSX.Element;
+export declare const NavLink: ({ children, href, onClick, isActive, ...props }: NavLinkProps) => JSX.Element;

package/dist/navbar.cjs.dev.js

@@ -43,6 +43,7 @@ var Layout = require('@lendi/ui/Layout');
 var ArrowForward = require('@lendi-ui/icon/ArrowForward');
 var Typography = require('@lendi/ui/Typography');
 var Button = require('@lendi/ui/Button');
+var src = require('@lendi-ui/breakpoint/src');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -136,7 +137,7 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
-var _templateObject$e, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1;
+var _templateObject$f, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1;
 var StyledHeaderLogo = styled__default["default"](Logo__default["default"]).withConfig({
   displayName: "style__StyledHeaderLogo",
   componentId: "lui__sc-17ip4hk-0"
@@ -156,7 +157,7 @@ var StyledHeaderLogo = styled__default["default"](Logo__default["default"]).with
   } = _ref3;
   return Theme.select('logo.logoName')({
     theme
-  }) === 'LendiLogo' ? styled.css(["", ";", ";"], breakpoint.gte('tablet')(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n            width: auto;\n            height: 28px;\n          "]))), breakpoint.gte('desktop')(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 36px;\n          "])))) : styled.css(["", ";", ";"], breakpoint.gte('tablet')(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 28px;\n          "]))), breakpoint.gte('desktop')(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 36px;\n          "]))));
+  }) === 'LendiLogo' ? styled.css(["", ";", ";"], breakpoint.gte('tablet')(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n            width: auto;\n            height: 28px;\n          "]))), breakpoint.gte('desktop')(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 36px;\n          "])))) : styled.css(["", ";", ";"], breakpoint.gte('tablet')(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 28px;\n          "]))), breakpoint.gte('desktop')(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n            width: auto;\n            height: 36px;\n          "]))));
 });
 var LogoLink$1 = styled__default["default"].a.withConfig({
   displayName: "style__LogoLink",
@@ -212,7 +213,7 @@ var LogoComponent = _ref => {
 
 var LogoComponent$1 = LogoComponent;
 
-var _templateObject$d;
+var _templateObject$e;
 var navTokens = {
   size: {
     height: {
@@ -243,7 +244,7 @@ var NavbarWrapper = styled__default["default"](NavbarBase__default["default"]).w
     tablet: 'sm',
     desktop: 'lg'
   }));
-}, navTokens.size.height.navbar.mobile.value, breakpoint.gte('desktop')(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n    height: ", "\n  "])), navTokens.size.height.navbar.desktop.value));
+}, navTokens.size.height.navbar.mobile.value, breakpoint.gte('desktop')(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n    height: ", "\n  "])), navTokens.size.height.navbar.desktop.value));
 var Container = styled__default["default"].div.withConfig({
   displayName: "styles__Container",
   componentId: "lui__sc-ej7i4l-1"
@@ -261,11 +262,11 @@ var NavbarRightWrapper = styled__default["default"].div.withConfig({
   componentId: "lui__sc-ej7i4l-4"
 })(["margin-left:auto;"]);
 
-var _templateObject$c, _templateObject2$4;
+var _templateObject$d, _templateObject2$4;
 var TalkExpertAction$1 = styled__default["default"](button.Button).withConfig({
   displayName: "style__TalkExpertAction",
   componentId: "lui__sc-9anjvz-0"
-})(["width:100%;", " ", ";min-width:180px;", ""], spacing.mr('sm'), breakpoint.between('mobile', 'desktop')(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n    border: none;\n  "]))), _ref => {
+})(["width:100%;", " ", ";min-width:180px;", ""], spacing.mr('sm'), breakpoint.between('mobile', 'desktop')(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n    border: none;\n  "]))), _ref => {
   var {
     bigLabelAccomodate
   } = _ref;
@@ -326,7 +327,7 @@ var ROUTE_APPLICATIONS = '/dashboard/applications';
 var ROUTE_PROPERTY_REPORT = '/dashboard/my-property-report';
 var ROUTE_NEW_PROPERTY_REPORT = '/property-report/my-properties';
 
-var _templateObject$b;
+var _templateObject$c;
 var TalkExpertAction = styled__default["default"](button.Button).withConfig({
   displayName: "indexstyle__TalkExpertAction",
   componentId: "lui__sc-altm9z-0"
@@ -335,7 +336,7 @@ var TalkExpertAction = styled__default["default"](button.Button).withConfig({
     dashboardVariant
   } = _ref;
   return dashboardVariant && styled.css(["", ""], spacing.mr('nil'));
-}, breakpoint.between('mobile', 'desktop')(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  min-width: 90px;\n    border: none;\n    ", "\n  "])), spacing.p('nil')), _ref2 => {
+}, breakpoint.between('mobile', 'desktop')(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  min-width: 90px;\n    border: none;\n    ", "\n  "])), spacing.p('nil')), _ref2 => {
   var {
     continueExist
   } = _ref2;
@@ -346,11 +347,11 @@ var ContinueAction = styled__default["default"](button.Button).withConfig({
   componentId: "lui__sc-altm9z-1"
 })(["width:90px;padding:0;"]);
 
-var _templateObject$a;
+var _templateObject$b;
 var LogoutWrapper = styled__default["default"].div.withConfig({
   displayName: "style__LogoutWrapper",
   componentId: "lui__sc-t6my6e-0"
-})(["position:absolute;right:5px;top:56px;", ";display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:", ";border-radius:", ";", ""], breakpoint.gte('desktop')(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["top: 70px;"]))), getColour__default["default"]('shade', 0), borders.getRadius(), depth.depth(2));
+})(["position:absolute;right:5px;top:56px;", ";display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:", ";border-radius:", ";", ""], breakpoint.gte('desktop')(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["top: 70px;"]))), getColour__default["default"]('shade', 0), borders.getRadius(), depth.depth(2));
 var MenuItem$1 = styled.css(["", " ", ""], spacing.px('sm'), spacing.py('sm'));
 var MyAccountTitle = styled__default["default"](typography.Body).withConfig({
   displayName: "style__MyAccountTitle",
@@ -603,11 +604,11 @@ var LogoutComponent = () => {
   });
 };
 
-var _templateObject$9;
+var _templateObject$a;
 var DesktopActionsWrapper = styled__default["default"].div.withConfig({
   displayName: "style__DesktopActionsWrapper",
   componentId: "lui__sc-jh42qz-0"
-})(["display:flex;", ";"], breakpoint.between('mobile', 'desktop')(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["display:flex;", ";"], breakpoint.between('mobile', 'desktop')(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var getSignInURL = (brand, env, returnURL) => {
   var urls = lalaUtils.getURLs(brand, lalaReact.Type.Customer, env);
@@ -747,11 +748,11 @@ var RenderDesktopAction = _ref2 => {
 
 var RenderDesktopAction$1 = RenderDesktopAction;
 
-var _templateObject$8;
+var _templateObject$9;
 var MobileActionsWrapper = styled__default["default"].div.withConfig({
   displayName: "style__MobileActionsWrapper",
   componentId: "lui__sc-jzhj4e-0"
-})(["display:flex;", ";.noHover{", ";:hover{box-shadow:none;}}"], breakpoint.gte('desktop')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n    display: none;\n  "]))), spacing.mr('nil'));
+})(["display:flex;", ";.noHover{", ";:hover{box-shadow:none;}}"], breakpoint.gte('desktop')(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n    display: none;\n  "]))), spacing.mr('nil'));
 
 var RenderMobileAction = _ref => {
   var _window, _window$location, _window2, _window2$location;
@@ -1224,7 +1225,7 @@ var useEmailOpenChat = (openChatWindow, userGroupHash) => {
 
 var _excluded$9 = ["children", "className", "isOpen", "handleClose", "topOffset"];
 
-var _templateObject$7, _templateObject2$3;
+var _templateObject$8, _templateObject2$3;
 var IS_OPEN_DATA_ATTRIBUTE = 'data-slideout-isOpen';
 var slideInRight = styled.keyframes(["0%{transform:translate3d(100%,0,0);}100%{transform:translate3d(0,0,0);}"]);
 var slideOutRight = styled.keyframes(["0%{transform:translate3d(0,0,0);}100%{transform:translate3d(100%,0,0);}"]);
@@ -1235,7 +1236,7 @@ var slideOutRight = styled.keyframes(["0%{transform:translate3d(0,0,0);}100%{tra
 var StyledSlideoutMenu$1 = styled__default["default"].div.withConfig({
   displayName: "SlideoutMenuBase__StyledSlideoutMenu",
   componentId: "lui__sc-msuqad-0"
-})(["display:none;width:100%;position:fixed;top:0;bottom:0;right:0;z-index:2;animation-fill-mode:forwards;animation-duration:0.3s;animation-timing-function:ease;", " &.is-open{transform:translate3d(0,0,0);display:block;}&.slide-in-right{animation-name:", ";}&.slide-out-right{animation-name:", ";}", ""], breakpoint.gte('sm')(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n    width: ", ";;\n  "])), utils$1.pxToRem(375)), slideInRight, slideOutRight, _ref => {
+})(["display:none;width:100%;position:fixed;top:0;bottom:0;right:0;z-index:2;animation-fill-mode:forwards;animation-duration:0.3s;animation-timing-function:ease;", " &.is-open{transform:translate3d(0,0,0);display:block;}&.slide-in-right{animation-name:", ";}&.slide-out-right{animation-name:", ";}", ""], breakpoint.gte('sm')(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n    width: ", ";;\n  "])), utils$1.pxToRem(375)), slideInRight, slideOutRight, _ref => {
   var {
     topOffset
   } = _ref;
@@ -1342,7 +1343,7 @@ var SlideoutMenuBase = _ref3 => {
   });
 };
 
-var _templateObject$6;
+var _templateObject$7;
 var CommPanelWrapper = styled__default["default"](SlideoutMenuBase).withConfig({
   displayName: "CommPanelProvider__CommPanelWrapper",
   componentId: "lui__sc-jqofne-0"
@@ -1356,7 +1357,7 @@ var CommPanelWrapper = styled__default["default"](SlideoutMenuBase).withConfig({
     if (topOffset) {
       return breakpoint.map(topOffset, value => value && "top: ".concat(value, ";"));
     } else {
-      return styled.css(["top:", ";", ";"], navTokens.size.height.navbar.mobile.value, breakpoint.gte('desktop')(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n            top: ", ";\n          "])), navTokens.size.height.navbar.desktop.value));
+      return styled.css(["top:", ";", ";"], navTokens.size.height.navbar.mobile.value, breakpoint.gte('desktop')(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n            top: ", ";\n          "])), navTokens.size.height.navbar.desktop.value));
     }
   }
 }, _ref2 => {
@@ -1728,7 +1729,7 @@ var CTAButtons = props => {
 
 var CTAButtons$1 = CTAButtons;
 
-var _templateObject$5;
+var _templateObject$6;
 
 var HamBurgerMenu = _ref => {
   var {
@@ -1770,7 +1771,7 @@ var MenuButton$1 = styled__default["default"](Menu__default["default"]).withConf
 var HamBurgerWrapper = styled__default["default"].a.withConfig({
   displayName: "HamBurgerMenu__HamBurgerWrapper",
   componentId: "lui__sc-y1cjve-2"
-})(["", ";cursor:pointer;"], breakpoint.gte('desktop')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["", ";cursor:pointer;"], breakpoint.gte('desktop')(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 var HamBurgerMenu$1 = HamBurgerMenu;
 
 var ITEM_HEIGHT = '40px';
@@ -1981,7 +1982,7 @@ var LeftSidebar = _ref => {
 
 var LeftSidebar$1 = LeftSidebar;
 
-var _templateObject$4;
+var _templateObject$5;
 var PanelLink = styled__default["default"](typography.Link).withConfig({
   displayName: "indexstyle__PanelLink",
   componentId: "lui__sc-56jb5a-0"
@@ -2068,7 +2069,7 @@ var Label = styled__default["default"](typography.Body).withConfig({
 var OptionsContainer = styled__default["default"].div.withConfig({
   displayName: "indexstyle__OptionsContainer",
   componentId: "lui__sc-56jb5a-14"
-})(["width:100%;display:none;flex-direction:row;justify-content:space-between;align-items:center;", " ", ""], spacing.ml('lg'), breakpoint.gte('desktop')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  display: flex;\n"]))));
+})(["width:100%;display:none;flex-direction:row;justify-content:space-between;align-items:center;", " ", ""], spacing.ml('lg'), breakpoint.gte('desktop')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n"]))));
 
 var prevSelected = '';
 
@@ -2287,7 +2288,7 @@ var MultiNavbarComponent = _ref => {
 
 var MultiNavbar = withErrorProvider(launchdarkly.withLendiLDProvider(withCommPanel(withDomainChat(MultiNavbarComponent))));
 
-var _templateObject$3, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var LargeTweakpoint = '67rem';
 var Px = styled.css(["padding-left:", ";padding-right:", ";"], utils$1.pxToRem(16), utils$1.pxToRem(16));
 var Py = styled.css(["padding-top:", ";padding-bottom:", ";"], utils$1.pxToRem(24), utils$1.pxToRem(24));
@@ -2310,7 +2311,7 @@ var StyledHR = styled__default["default"].hr.withConfig({
 styled__default["default"].div.withConfig({
   displayName: "sharedstyles__HideFromLarge",
   componentId: "lui__sc-631j2u-2"
-})(["display:block;", ""], breakpoint.gte('lg')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["display:block;", ""], breakpoint.gte('lg')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 var HideFromTweakLarge = styled__default["default"].div.withConfig({
   displayName: "sharedstyles__HideFromTweakLarge",
   componentId: "lui__sc-631j2u-3"
@@ -2353,7 +2354,7 @@ var SrOnlySpan = styled__default["default"].span.withConfig({
 })(["", ";"], utils$1.srOnly);
 
 var _excluded$7 = ["children", "isOpen", "onClick"],
-    _excluded2$1 = ["children", "href", "onClick"];
+    _excluded2$1 = ["children", "href", "onClick", "isActive"];
 
 /**
  * @todo Line-height: prefer to use token but the current one is not accessible here
@@ -2366,9 +2367,10 @@ var StyledNavButton = styled__default["default"].button.withConfig({
   componentId: "lui__sc-1rf7mpw-0"
 })(["", ";color:", ";background-color:", ";font-family:", ";font-weight:", ";-webkit-font-smoothing:antialiased;-moz-font-smoothing:'grayscale';font-size:", ";line-height:1.5;padding:", " ", ";display:flex;align-items:center;justify-content:space-between;&:hover{color:", ";}", " ", ""], () => buttonReset, () => getColour__default["default"]('text', 'inverse'), () => getColour__default["default"]('interaction', 'main'), () => getTypography__default["default"]('button1', 'fontFamily'), () => getTypography__default["default"]('button1', 'fontWeight'), utils$1.pxToRem(16), utils$1.pxToRem(12), utils$1.pxToRem(16), () => getColour__default["default"]('interaction', 'emphasis'), _ref => {
   var {
-    isOpen
+    isOpen,
+    isActive
   } = _ref;
-  return isOpen && "color: ".concat(getColour__default["default"]('interaction', 'emphasis'), ";");
+  return (isOpen !== null && isOpen !== void 0 ? isOpen : isActive) ? "color: ".concat(getColour__default["default"]('interaction', 'emphasis'), ";") : null;
 }, insetFocusVisible);
 var StyledNavButtonText = styled__default["default"].span.withConfig({
   displayName: "NavButtons__StyledNavButtonText",
@@ -2404,7 +2406,8 @@ var NavLink = _ref3 => {
   var {
     children,
     href,
-    onClick
+    onClick,
+    isActive
   } = _ref3,
       props = _objectWithoutProperties(_ref3, _excluded2$1);
 
@@ -2412,7 +2415,8 @@ var NavLink = _ref3 => {
   return /*#__PURE__*/jsxRuntime.jsx(StyledNavButton, _objectSpread2(_objectSpread2({
     href: href,
     as: "a",
-    onClick: onClick
+    onClick: onClick,
+    isActive: isActive
   }, globalProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
       children: children
@@ -2464,13 +2468,17 @@ var Dropdown = /*#__PURE__*/React.forwardRef(DropdownComponent);
 
 var _excluded$5 = ["navSlot", "ctaSlot"];
 
-var _templateObject$2, _templateObject2$1;
+var _templateObject$3, _templateObject2$1;
 var HeaderPaddingSmall = 10;
 var HeaderPaddingLarge = 24;
+/**
+ * @todo z-index: tokenise z-index to make it easier to manage levels
+ */
+
 var StyledHeader = styled__default["default"].header.withConfig({
   displayName: "HeaderBase__StyledHeader",
   componentId: "lui__sc-1ik75ai-0"
-})(["background:", ";position:sticky;top:0;padding:", " 0;", ""], () => getColour__default["default"]('fill', 'contrast'), utils$1.pxToRem(HeaderPaddingSmall), breakpoint.gte('md')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n    padding: ", " 0;\n  "])), utils$1.pxToRem(HeaderPaddingLarge)));
+})(["background:", ";position:sticky;top:0;z-index:999;padding:", " 0;", ""], () => getColour__default["default"]('fill', 'contrast'), utils$1.pxToRem(HeaderPaddingSmall), breakpoint.gte('md')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n    padding: ", " 0;\n  "])), utils$1.pxToRem(HeaderPaddingLarge)));
 var HeaderInner = styled__default["default"].div.withConfig({
   displayName: "HeaderBase__HeaderInner",
   componentId: "lui__sc-1ik75ai-1"
@@ -2533,7 +2541,7 @@ var HeaderBase = _ref => {
 
 var _excluded$4 = ["label", "children", "onClick", "minDropdownWidth", "align"];
 
-var _templateObject$1;
+var _templateObject$2;
 // Make dropdown content flush to the bottom of the header not it's trigger button
 var StyledDropdown = styled__default["default"](Dropdown).withConfig({
   displayName: "NavDropdown__StyledDropdown",
@@ -2543,7 +2551,7 @@ var StyledDropdown = styled__default["default"](Dropdown).withConfig({
     minWidth
   } = _ref;
   return minWidth && "min-width: ".concat(minWidth);
-}, () => styled.css(["top:calc(100% + ", ");"], utils$1.pxToRem(HeaderPaddingSmall)), () => styled.css(["", ""], breakpoint.gte('md')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n        top: calc(100% + ", ");\n        "])), utils$1.pxToRem(HeaderPaddingLarge))));
+}, () => styled.css(["top:calc(100% + ", ");"], utils$1.pxToRem(HeaderPaddingSmall)), () => styled.css(["", ""], breakpoint.gte('md')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n        top: calc(100% + ", ");\n        "])), utils$1.pxToRem(HeaderPaddingLarge))));
 var NavDropdown = _ref2 => {
   var {
     label,
@@ -2767,12 +2775,21 @@ var NavElement = styled__default["default"].nav.withConfig({
   } = _ref;
   return isSlideout ? NavMobileStyled : NavDesktopStyled;
 });
+var StyledChildrenWrapper = styled__default["default"].div.withConfig({
+  displayName: "Nav__StyledChildrenWrapper",
+  componentId: "lui__sc-zq7yzs-1"
+})(["::after{content:'';display:block;", "}"], _ref2 => {
+  var {
+    isOpen
+  } = _ref2;
+  return isOpen && "height: 0.0625rem; background-color: ".concat(getColour__default["default"]('text', 'inverse'), "; margin: .75rem 1rem;");
+});
 
-var MenuItem = _ref2 => {
+var MenuItem = _ref3 => {
   var {
     label,
     children
-  } = _ref2;
+  } = _ref3;
   var [isOpen, setIsOpen] = React.useState(false);
 
   var handleClick = () => {
@@ -2792,19 +2809,20 @@ var MenuItem = _ref2 => {
       onClick: () => handleClick(),
       isOpen: isOpen,
       children: label
-    }), isOpen && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), isOpen && /*#__PURE__*/jsxRuntime.jsx(StyledChildrenWrapper, {
+      isOpen: isOpen,
       children: children
     })]
   });
 };
 
-var Nav = _ref3 => {
+var Nav = _ref4 => {
   var {
     navOptions,
     isSlideout,
     isRestricted
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$2);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded$2);
 
   var globalProps = utils$1.filterGlobalProps(props);
   var listItems = navOptions.map((item, index) => {
@@ -2875,6 +2893,7 @@ var Nav = _ref3 => {
     return item.link && !hideItem && /*#__PURE__*/jsxRuntime.jsx("li", {
       children: /*#__PURE__*/jsxRuntime.jsx(NavLink, {
         href: item.link,
+        isActive: item.isActive,
         onClick: () => {
           var event = {
             event_name: 'Link Clicked',
@@ -2901,7 +2920,7 @@ var Nav = _ref3 => {
 
 var _excluded$1 = ["title", "children", "className", "isOpen", "hasTitleDivider", "handleClose"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject$1, _templateObject2, _templateObject3;
 var headerTokens = {
   size: {
     height: {
@@ -2922,7 +2941,7 @@ var headerTokens = {
 var StyledCloseButton = styled__default["default"].button.withConfig({
   displayName: "SlideoutMenu__StyledCloseButton",
   componentId: "lui__sc-8pev43-0"
-})(["background-color:", ";border:0;margin:0;padding:0;width:", ";height:", ";color:", ";position:absolute;top:", ";right:", ";", " &:hover{background-color:", ";}"], () => getColour__default["default"]('interaction', 'main'), utils$1.pxToRem(40), utils$1.pxToRem(40), () => getColour__default["default"]('shade', 0), utils$1.pxToRem(12), utils$1.pxToRem(16), breakpoint.gte('md')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), utils$1.pxToRem(28)), () => getColour__default["default"]('purple', 600));
+})(["background-color:", ";border:0;margin:0;padding:0;width:", ";height:", ";color:", ";position:absolute;top:", ";right:", ";", " &:hover{background-color:", ";}"], () => getColour__default["default"]('interaction', 'main'), utils$1.pxToRem(40), utils$1.pxToRem(40), () => getColour__default["default"]('shade', 0), utils$1.pxToRem(16), utils$1.pxToRem(16), breakpoint.gte('md')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), utils$1.pxToRem(28)), () => getColour__default["default"]('purple', 600));
 /**
  * @todo z-index: tokenise z-index to make it easier to manage levels
  */
@@ -2973,8 +2992,8 @@ var SlideoutMenu = _ref => {
       onClick: handleClose,
       children: [/*#__PURE__*/jsxRuntime.jsx(Close__default["default"], {
         color: getColour__default["default"]('shade', 0),
-        width: "1.2rem",
-        height: "1.2rem"
+        width: "1.5rem",
+        height: "1.5rem"
       }), /*#__PURE__*/jsxRuntime.jsxs(SrOnlySpan, {
         children: ["Close ", title]
       })]
@@ -3074,6 +3093,8 @@ var PrimaryCTA = _ref => {
 
 var _excluded = ["isRestricted"];
 
+var _templateObject;
+
 var HamburgerCtaBlock = _ref => {
   var {
     handleApplyNowClick,
@@ -3095,6 +3116,10 @@ var HamburgerCtaBlock = _ref => {
   });
 };
 
+var StyledWrapperForButtonHack = styled__default["default"].div.withConfig({
+  displayName: "HamburgerMenu__StyledWrapperForButtonHack",
+  componentId: "lui__sc-302min-0"
+})(["button{padding:0;margin-left:0.75rem;", "}"], src.gte('sm')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-left: .25rem; // Make sure focus outline doesn't get cut off by preceding links with bg colour\n    "]))));
 var HamburgerMenu = _ref2 => {
   var {
     isRestricted
@@ -3119,21 +3144,23 @@ var HamburgerMenu = _ref2 => {
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Button.Button, {
-      onPress: handleClick,
-      ariaExpanded: showMenu,
-      variant: "text",
-      size: "sm",
-      isInverse: true,
-      width: "auto",
-      minWidth: "auto",
-      children: [/*#__PURE__*/jsxRuntime.jsx(SrOnlySpan, {
-        children: "Open main menu"
-      }), /*#__PURE__*/jsxRuntime.jsx(Menu__default["default"], {
-        width: "1.5rem",
-        height: "1.5rem",
-        color: getColour.getColour('text', 'inverse')
-      })]
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledWrapperForButtonHack, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Button.Button, {
+        onPress: handleClick,
+        ariaExpanded: showMenu,
+        variant: "text",
+        size: "sm",
+        isInverse: true,
+        width: "auto",
+        minWidth: "auto",
+        children: [/*#__PURE__*/jsxRuntime.jsx(SrOnlySpan, {
+          children: "Open main menu"
+        }), /*#__PURE__*/jsxRuntime.jsx(Menu__default["default"], {
+          width: "1.5rem",
+          height: "1.5rem",
+          color: getColour.getColour('text', 'inverse')
+        })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs(SlideoutMenu, {
       isOpen: showMenu,
       handleClose: toggleMenu,