fix(ui): add fallback for MainNavigation and remove path-based styling

MainNavigationFallback component added to display in case MainNavigation fails to load. This enhances UX by preventing an empty space appearance during loading or error cases. Also, the path-based background color change on 'Blog' menu item has been removed to ensure consistent styling.
kkhys · Jun 9, 2024 · 770c0cf · 770c0cf
1 parent 556f7d7
commit 770c0cf
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/apps/web/src/ui/global/header/index.tsx b/apps/web/src/ui/global/header/index.tsx
@@ -7,7 +7,15 @@ import { useDebounce } from 'use-debounce';
 
 import { cn } from '@kkhys/ui';
 
-import { CommandMenu, ContainerInner, ContainerOuter, MainNavigation, MobileNavigation, ModeToggle } from '#/ui/global';
+import {
+  CommandMenu,
+  ContainerInner,
+  ContainerOuter,
+  MainNavigation,
+  MainNavigationFallback,
+  MobileNavigation,
+  ModeToggle,
+} from '#/ui/global';
 
 export const useHeaderAnimation = () => {
   const [animationHeader, setAnimationHeader] = React.useState<boolean | null>(null);
@@ -68,7 +76,7 @@ export const Header = ({ className }: { className?: string }) => {
         <div className='border-b border-border/60 bg-background-lighter/95 py-2.5 backdrop-blur supports-[backdrop-filter]:bg-background-lighter/60'>
           <ContainerInner>
             <div className='flex w-full items-center justify-between'>
-              <Suspense fallback={null}>
+              <Suspense fallback={<MainNavigationFallback />}>
                 <MainNavigation />
               </Suspense>
               <MobileNavigation />

diff --git a/apps/web/src/ui/global/main-navigation/index.tsx b/apps/web/src/ui/global/main-navigation/index.tsx
@@ -51,7 +51,7 @@ export const MainNavigation = () => {
       <NavigationMenu>
         <NavigationMenuList>
           <NavigationMenuItem>
-            <NavigationMenuTrigger className={cn(pathname === '/posts' && 'bg-accent')}>Blog</NavigationMenuTrigger>
+            <NavigationMenuTrigger>Blog</NavigationMenuTrigger>
             <NavigationMenuContent className='min-w-[8rem] p-1'>
               <ListItem href='/posts' className={cn(pathname === '/posts' && !categoryParam && 'bg-accent')}>
                 All Posts
@@ -79,3 +79,19 @@ export const MainNavigation = () => {
     </div>
   );
 };
+
+export const MainNavigationFallback = () => (
+  <div className='mr-4 hidden md:flex'>
+    <Link href='/' className='mr-6 flex flex-shrink-0 items-center'>
+      <Icons.logo className='size-5 rounded-md' />
+      <span className='sr-only'>Keisuke Hayashi</span>
+    </Link>
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Blog</NavigationMenuTrigger>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  </div>
+);