[Navigation] Round nav at mdDown behind feature flag (#11929)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1599


### 🎩 checklist
https://admin.web.nav.sophie-schneider.us.spin.dev/store/shop1


- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)

.changeset/famous-ghosts-fold.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Rounded `Navigation` at `mdDown` behind a feature flag

polaris-react/src/components/Navigation/Navigation.module.css

@@ -52,6 +52,14 @@
 
 .NavigationFrame-TopBarAndReframe {
   border-top-left-radius: var(--p-border-radius-300);
+  border-top-right-radius: var(--p-border-radius-300);
+  /* stylelint-disable-next-line -- polaris custom global property */
+  margin-top: var(--pg-top-bar-height);
+
+  @media (--p-breakpoints-md-up) {
+    border-top-right-radius: 0;
+    margin-top: 0;
+  }
 }
 
 .PrimaryNavigation {
@@ -100,6 +108,16 @@
   }
 }
 
+.PrimaryNavigation-TopBarAndReframe {
+  padding-top: var(--p-space-500);
+  border-top-left-radius: var(--p-border-radius-300);
+  border-top-right-radius: var(--p-border-radius-300);
+
+  @media (--p-breakpoints-md-up) {
+    border-top-right-radius: 0;
+  }
+}
+
 .LogoContainer {
   display: none;
 

polaris-react/src/components/Navigation/Navigation.tsx

@@ -8,6 +8,7 @@ import {classNames} from '../../utilities/css';
 import {getWidth} from '../../utilities/get-width';
 import {useFrame} from '../../utilities/frame';
 import {useFeatures} from '../../utilities/features';
+import {useBreakpoints} from '../../utilities/breakpoints';
 
 import {NavigationContext} from './context';
 import {Section, Item} from './components';
@@ -37,6 +38,8 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
 }: NavigationProps) {
   const {logo} = useFrame();
   const width = getWidth(logo, 104);
+  const features = useFeatures();
+  const {mdUp} = useBreakpoints();
 
   const logoMarkup = logo ? (
     <div
@@ -72,8 +75,6 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
     [location, onDismiss],
   );
 
-  const features = useFeatures();
-
   return (
     <NavigationContext.Provider value={context}>
       <WithinContentContext.Provider value>
@@ -85,12 +86,12 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
           )}
           aria-labelledby={ariaLabelledBy}
         >
-          {mediaMarkup}
+          {mdUp || !features?.dynamicTopBarAndReframe ? mediaMarkup : null}
           <Scrollable
             className={classNames(
               styles.PrimaryNavigation,
               features?.dynamicTopBarAndReframe &&
-                styles['NavigationFrame-TopBarAndReframe'],
+                styles['PrimaryNavigation-TopBarAndReframe'],
             )}
           >
             {children}