@appquality/unguess-design-system 2.12.80 → 2.12.82

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v2.12.82 (Wed Mar 22 2023)
+
+#### 🐛 Bug Fix
+
+- z-index fix [#227](https://github.com/AppQuality/unguess-design-system/pull/227) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+- feat(nav): higher z-index to nav toggle [#226](https://github.com/AppQuality/unguess-design-system/pull/226) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.12.81 (Thu Mar 09 2023)
+
+#### 🐛 Bug Fix
+
+- Hide sidebar below md breakpoint [#225](https://github.com/AppQuality/unguess-design-system/pull/225) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+- fix(nav): change mobile breakpoint and mobile first [#224](https://github.com/AppQuality/unguess-design-system/pull/224) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.80 (Wed Mar 01 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3119,25 +3119,20 @@ const AppHeader = (_a) => {
 };
 
 const UgNav = styled__default["default"](reactChrome.Nav) `
-  border-right: ${({ theme }) => theme.borders.sm};
-  border-color: ${({ theme }) => reactTheming.getColor(theme.colors.neutralHue, 300)};
+  width: ${p => p.isExpanded ? "100%" : "0"};
+  padding-top: ${({ theme }) => theme.space.sm};
+  margin-left: 0;
+  border-right: none;
   transition: all 0.25s ease;
-  ${(props) => `
-    margin-left: ${props.isExpanded
+  
+  @media (min-width: ${p => p.theme.breakpoints.md}) {
+    border-right: ${({ theme }) => theme.borders.sm};
+    border-color: ${({ theme }) => reactTheming.getColor(theme.colors.neutralHue, 300)};
+    width: ${p => p.theme.components.chrome.nav.openWidth}px;
+    margin-left: ${p => p.isExpanded
     ? 0
-    : -(props.theme.components.chrome.nav.openWidth -
-        props.theme.components.chrome.nav.closedWidth)}px;
-    width: ${props.theme.components.chrome.nav.openWidth}px;
-      
-      @media (max-width: ${props.theme.breakpoints.sm}) {
-         width: ${props.isExpanded ? "100%" : "0"};
-         margin-left: 0;
-         border-right: none;
-      }
-  `}
-  // transition: width 0.25s ease-in-out;
-  padding-top: ${({ theme }) => theme.space.sm};
-  @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    : -(p.theme.components.chrome.nav.openWidth -
+        p.theme.components.chrome.nav.closedWidth)}px;
     padding-left: ${({ theme }) => theme.space.xs};
   }
 `;
@@ -3212,6 +3207,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 const StyledToggle = styled__default["default"](IconButton) `
+  display: none;
   width: ${({ theme }) => theme.space.base * 6}px;
   height: ${({ theme }) => theme.space.base * 6}px;
   min-width: ${({ theme }) => theme.space.md};
@@ -3219,9 +3215,9 @@ const StyledToggle = styled__default["default"](IconButton) `
   top: ${({ theme }) => theme.space.base * 3}px;
   right: -${({ theme }) => theme.space.base * 3}px;
   background: ${({ theme }) => theme.gradients.dark}};
-  z-index: 1;
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    display: none;
+  z-index: 3;
+  @media (min-width: ${({ theme }) => theme.breakpoints.md}) {
+    display: block;
   }
 `;
 const NavToggle = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.80",
+  "version": "2.12.82",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",