Fix Top Header layout following changes in the Shadcn Sidebar;

Fix useMobile breakpoint to 1024px, to match our Tailwind convention for mobile breakpoints (lg)

apps/web/app/home/(user)/_components/home-menu-navigation.tsx

@@ -49,13 +49,19 @@ export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
       </div>
 
       <div className={'flex justify-end space-x-2.5'}>
+        <UserNotifications userId={user.id} />
+
         <If condition={featuresFlagConfig.enableTeamAccounts}>
           <HomeAccountSelector userId={user.id} accounts={accounts} />
         </If>
 
-        <UserNotifications userId={user.id} />
-
-        <ProfileAccountDropdownContainer user={user} account={workspace} />
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={workspace}
+            showProfileName={false}
+          />
+        </div>
       </div>
     </div>
   );

apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -48,7 +48,9 @@ export function TeamAccountNavigationMenu(props: {
         </BorderedNavigationMenu>
       </div>
 
-      <div className={'flex justify-end space-x-2.5'}>
+      <div className={'flex justify-end space-x-2.5 items-center'}>
+        <TeamAccountNotifications accountId={account.id} userId={user.id} />
+
         <TeamAccountAccountsSelector
           userId={user.id}
           selectedAccount={account.slug}
@@ -59,9 +61,9 @@ export function TeamAccountNavigationMenu(props: {
           }))}
         />
 
-        <TeamAccountNotifications accountId={account.id} userId={user.id} />
-
-        <ProfileAccountDropdownContainer user={user} account={account} />
+        <div>
+          <ProfileAccountDropdownContainer user={user} account={account} showProfileName={false} />
+        </div>
       </div>
     </div>
   );

apps/web/components/personal-account-dropdown-container.tsx

@@ -19,6 +19,7 @@ const features = {
 
 export function ProfileAccountDropdownContainer(props: {
   user?: User;
+  showProfileName?: boolean;
 
   account?: {
     id: string | null;
@@ -42,6 +43,7 @@ export function ProfileAccountDropdownContainer(props: {
       user={userData}
       account={props.account}
       signOutRequested={() => signOut.mutateAsync()}
+      showProfileName={props.showProfileName}
     />
   );
 }

packages/ui/src/hooks/use-mobile.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 1024;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(

packages/ui/src/makerkit/navigation-config.schema.ts

@@ -37,7 +37,7 @@ const RouteGroup = z.object({
 });
 
 export const NavigationConfigSchema = z.object({
-  style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
+  style: z.enum(['custom', 'sidebar', 'header']).default('header'),
   sidebarCollapsed: z
     .enum(['false', 'true'])
     .default('false')

packages/ui/src/makerkit/page.tsx

@@ -114,7 +114,7 @@ export function PageBody(
 
 export function PageNavigation(props: React.PropsWithChildren) {
   return (
-    <div className={'hidden flex-1 bg-inherit lg:flex'}>{props.children}</div>
+    <div className={'flex-1 bg-inherit'}>{props.children}</div>
   );
 }