fix(ui): nav button height being stretched and navWrapper border on RTL (#8242)

Author: paulpopus

packages/next/src/elements/Nav/NavWrapper/index.scss

@@ -10,6 +10,11 @@
   border-right: 1px solid var(--theme-elevation-100);
   opacity: 0;
 
+  [dir='rtl'] & {
+    border-right: none;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
   &--nav-animate {
     transition: opacity var(--nav-trans-time) ease-in-out;
   }

packages/next/src/elements/Nav/index.scss

@@ -11,6 +11,11 @@
   opacity: 0;
   overflow: hidden;
 
+  [dir='rtl'] & {
+    border-right: none;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
   &--nav-animate {
     transition: opacity var(--nav-trans-time) ease-in-out;
   }

packages/next/src/templates/Default/index.scss

@@ -20,12 +20,17 @@
     justify-content: center;
   }
 
-  &__nav-toggler {
+  &__nav-toggler-container {
     height: var(--app-header-height);
     display: flex;
     align-items: center;
   }
 
+  &__nav-toggler {
+    display: flex;
+    align-items: center;
+  }
+
   &__wrap {
     min-width: 0;
     width: 100%;

packages/next/src/templates/Default/index.tsx

@@ -71,9 +71,11 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
         <RenderComponent mappedComponent={MappedCustomHeader} />
         <div style={{ position: 'relative' }}>
           <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
-            <NavToggler className={`${baseClass}__nav-toggler`}>
-              <NavHamburger />
-            </NavToggler>
+            <div className={`${baseClass}__nav-toggler-container`} id="nav-toggler">
+              <NavToggler className={`${baseClass}__nav-toggler`}>
+                <NavHamburger />
+              </NavToggler>
+            </div>
           </div>
           <Wrapper baseClass={baseClass} className={className}>
             <RenderComponent mappedComponent={MappedDefaultNav} />