(feat )O3-2664: Allow app menu to expand based on the width of its content (#854)

* O3-2664 Allow primary navigation app panel to expand based on content available

* Fixup

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

Author: CynthiaKamau

packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/app-menu-panel.component.tsx

@@ -18,8 +18,8 @@ const AppMenuPanel: React.FC<AppMenuProps> = ({ expanded, hidePanel }) => {
 
   return (
     <HeaderPanel
-      ref={appMenuRef as any}
-      className={styles.headerPanel}
+      ref={appMenuRef}
+      className={classNames({ [styles.headerPanel]: expanded })}
       aria-label="App Menu Panel"
       expanded={expanded}
       onClick={() => hidePanel()}

packages/apps/esm-primary-navigation-app/src/components/navbar-header-panels/app-menu-panel.scss

@@ -24,3 +24,7 @@
 .launchIcon {
   margin-left: spacing.$spacing-03;
 }
+
+.headerPanel {
+  width: fit-content;
+}