refactor: simplify header layout alignment (#293)

Simplify page header layout by flattening header layout
using auto-margins. Reduce duplicated wrapper markup.

src/components/layout/top-nav.tsx

@@ -21,28 +21,31 @@ type TopNavProps = React.HTMLAttributes<HTMLElement> & {
 export function TopNav({ className, links, ...props }: TopNavProps) {
   return (
     <>
-      <div className='lg:hidden'>
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button size='icon' variant='outline' className='md:size-7'>
-              <Menu />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side='bottom' align='start'>
-            {links.map(({ title, href, isActive, disabled }) => (
-              <DropdownMenuItem key={`${title}-${href}`} asChild>
-                <Link
-                  to={href}
-                  className={!isActive ? 'text-muted-foreground' : ''}
-                  disabled={disabled}
-                >
-                  {title}
-                </Link>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size='icon'
+            variant='outline'
+            className={cn('md:size-7 lg:hidden', className)}
+          >
+            <Menu />
+            <span className='sr-only'>Toggle navigation menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side='bottom' align='start'>
+          {links.map(({ title, href, isActive, disabled }) => (
+            <DropdownMenuItem key={`${title}-${href}`} asChild>
+              <Link
+                to={href}
+                className={!isActive ? 'text-muted-foreground' : ''}
+                disabled={disabled}
+              >
+                {title}
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <nav
         className={cn(

src/features/apps/index.tsx

@@ -85,12 +85,10 @@ export function Apps() {
     <>
       {/* ===== Top Heading ===== */}
       <Header>
-        <Search />
-        <div className='ms-auto flex items-center gap-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       {/* ===== Content ===== */}

src/features/chats/index.tsx

@@ -67,12 +67,10 @@ export function Chats() {
     <>
       {/* ===== Top Heading ===== */}
       <Header>
-        <Search />
-        <div className='ms-auto flex items-center space-x-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       <Main fixed>

src/features/dashboard/index.tsx

@@ -23,13 +23,11 @@ export function Dashboard() {
     <>
       {/* ===== Top Heading ===== */}
       <Header>
-        <TopNav links={topNav} />
-        <div className='ms-auto flex items-center space-x-4'>
-          <Search />
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <TopNav links={topNav} className='me-auto' />
+        <Search />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       {/* ===== Main ===== */}

src/features/settings/index.tsx

@@ -42,12 +42,10 @@ export function Settings() {
     <>
       {/* ===== Top Heading ===== */}
       <Header>
-        <Search />
-        <div className='ms-auto flex items-center space-x-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       <Main fixed>

src/features/tasks/index.tsx

@@ -14,12 +14,10 @@ export function Tasks() {
   return (
     <TasksProvider>
       <Header fixed>
-        <Search />
-        <div className='ms-auto flex items-center space-x-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       <Main className='flex flex-1 flex-col gap-4 sm:gap-6'>

src/features/users/index.tsx

@@ -20,12 +20,10 @@ export function Users() {
   return (
     <UsersProvider>
       <Header fixed>
-        <Search />
-        <div className='ms-auto flex items-center space-x-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
 
       <Main className='flex flex-1 flex-col gap-4 sm:gap-6'>

src/routes/_authenticated/errors/$error.tsx

@@ -30,12 +30,10 @@ function RouteComponent() {
   return (
     <>
       <Header fixed className='border-b'>
-        <Search />
-        <div className='ms-auto flex items-center space-x-4'>
-          <ThemeSwitch />
-          <ConfigDrawer />
-          <ProfileDropdown />
-        </div>
+        <Search className='me-auto' />
+        <ThemeSwitch />
+        <ConfigDrawer />
+        <ProfileDropdown />
       </Header>
       <div className='flex-1 [&>div]:h-full'>
         <ErrorComponent />

src/routes/clerk/_authenticated/user-management.tsx

@@ -49,11 +49,9 @@ function UserManagement() {
       <SignedIn>
         <UsersProvider>
           <Header fixed>
-            <Search />
-            <div className='ms-auto flex items-center space-x-4'>
-              <ThemeSwitch />
-              <UserButton />
-            </div>
+            <Search className='me-auto' />
+            <ThemeSwitch />
+            <UserButton />
           </Header>
 
           <Main>