From 44fc04e3ea274fc490c4480063696b209e13c151 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 18 Apr 2024 19:31:37 +0800
Subject: [PATCH] Update site navigation and header styling

The styling for various components including site navigation and the site header has been updated. Changes include amendments to layout options, color, spacing, and border adaptations to provide better visibility and user interaction. The shadow on the top loading bar indicator has also been relocated to enhance the bar's visibility.
---
 .../(marketing)/_components/site-header.tsx   | 19 +++++++++++++------
 .../_components/site-navigation-item.tsx      | 10 +++++++---
 .../_components/site-navigation.tsx           |  8 ++++----
 apps/web/app/(marketing)/layout.tsx           |  4 ++--
 apps/web/app/(marketing)/page.tsx             |  2 +-
 .../makerkit/top-loading-bar-indicator.tsx    |  2 +-
 6 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 650488582..7cb85c34b 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -1,21 +1,28 @@
 import type { User } from '@supabase/supabase-js';
 
-import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
-import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
+import { SiteHeaderAccountSection } from './site-header-account-section';
+import { SiteNavigation } from './site-navigation';
+
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'border-b border-gray-100 dark:border-border'}>
+    <div
+      className={
+        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/20'
+      }
+    >
       <div className={'px-4 lg:px-8'}>
-        <div className="flex h-14 items-center justify-between">
-          <div className={'flex w-6/12 items-center space-x-8'}>
+        <div className="grid h-14 grid-cols-3 items-center">
+          <div>
             <AppLogo />
+          </div>
 
+          <div className={'order-first md:order-none'}>
             <SiteNavigation />
           </div>
 
-          <div className={'flex flex-1 items-center justify-end space-x-1'}>
+          <div className={'flex items-center justify-end space-x-1'}>
             <SiteHeaderAccountSection user={props.user ?? null} />
           </div>
         </div>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 607c17b94..67bca5bbb 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -9,9 +9,13 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-[0.9em] font-medium`, {
-    'hover:underline': !isActive,
-  });
+  return cn(
+    `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors`,
+    {
+      'hover:border-border': !isActive,
+      'dark:bg-secondary bg-gray-50': isActive,
+    },
+  );
 };
 
 export function SiteNavigationItem({
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index afa458666..d51593951 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -43,15 +43,15 @@ export function SiteNavigation() {
 
   return (
     <>
-      <div className={'hidden items-center lg:flex'}>
+      <div className={'hidden items-center justify-center md:flex'}>
         <NavigationMenu>
-          <NavigationMenuList className={'space-x-4'}>
+          <NavigationMenuList className={'space-x-1'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>
       </div>
 
-      <div className={'flex items-center lg:hidden'}>
+      <div className={'flex justify-start sm:items-center md:hidden'}>
         <MobileDropdown />
       </div>
     </>
@@ -62,7 +62,7 @@ function MobileDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger aria-label={'Open Menu'}>
-        <Menu className={'h-9'} />
+        <Menu className={'h-8 w-8'} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className={'w-full'}>
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index eddf235ae..260c7e727 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -8,13 +8,13 @@ async function SiteLayout(props: React.PropsWithChildren) {
   const user = await getUser();
 
   return (
-    <div className={'flex flex-col'}>
+    <>
       <SiteHeader user={user} />
 
       {props.children}
 
       <SiteFooter />
-    </div>
+    </>
   );
 }
 
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 6f73bc2ec..bd00a799a 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -20,7 +20,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
-    <div className={'flex flex-col space-y-24 py-16'}>
+    <div className={'mt-4 flex flex-col space-y-24 py-16'}>
       <div className={'container mx-auto flex flex-col space-y-20'}>
         <div
           className={
diff --git a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
index 301b8aad2..ebbaf2c82 100644
--- a/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
+++ b/packages/ui/src/makerkit/top-loading-bar-indicator.tsx
@@ -27,10 +27,10 @@ export function TopLoadingBarIndicator() {
 
   return (
     <LoadingBar
+      className={'bg-primary'}
       height={4}
       waitingTime={0}
       shadow
-      className={'bg-primary'}
       color={''}
       ref={ref}
     />