@mackin.com/styleguide 9.4.1 → 9.5.0

package/index.d.ts

@@ -420,10 +420,14 @@ declare const Nav: (props: {
     toggle: (show: boolean) => void;
     id?: string | undefined;
     children?: React.ReactNode;
+    /** @deprecated Going foward, implement the nav visibility based on screen size in the consuming application.
+     * If true, the nav and backdrop will hide when the screen is larger.  Defaults to `theme.breakpoints.desktop`. */
     responsive?: boolean | undefined;
     className?: string | undefined;
     /** Duration of the slide animation in ms.  Defaults to `theme.timings.nav.slideMs`. */
     slideMs?: number | undefined;
+    /** Defaults to `theme.layout.navWidth`. */
+    navWidth?: string | undefined;
     __debug?: boolean | undefined;
 }) => JSX.Element;
 

package/index.js

@@ -2697,14 +2697,15 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
-    const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
+    const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
+    const totalNavOffset = `calc(${navWidth} + 20px)`;
     const backdrop = React__namespace.useContext(BackdropContext);
     const isLargeScreen = useMediaQuery(`(min-width:${theme.breakpoints.desktop})`);
-    const log = useLogger(`Nav ${(_a = props.id) !== null && _a !== void 0 ? _a : '?'}`, (_b = props.__debug) !== null && _b !== void 0 ? _b : false);
-    const slideMs = (_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs;
+    const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
+    const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = css.keyframes `
 		0% {
 			transform: translateX(0);
@@ -2738,8 +2739,8 @@ const Nav = (props) => {
 		bottom: 0;
 		background-color: ${theme.colors.nav};
 		color: ${theme.colors.navFont};
-		width: ${theme.layout.navWidth};
-		min-width: ${theme.layout.navWidth};
+		width: ${navWidth};
+		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
 		z-index: ${theme.zIndexes.nav};
 		overflow-y: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "9.4.1",
+    "version": "9.5.0",
     "description": "",
     "main": "./index.js",
     "types": "./index.d.ts",