Add Havij Times page and refactor header component for improved navig…

…ation
frontChapter · Nov 24, 2024 · 6f21399 · 6f21399
1 parent a8ee3fc
commit 6f21399
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 116 deletions.
diff --git a/src/app/havij-times/page.tsx b/src/app/havij-times/page.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const HavijTimes: React.FC = () => {
+  return (
+    <div>
+      <h1>Havij Times</h1>
+      <p>Welcome to the Havij Times page!</p>
+    </div>
+  )
+}
+
+export default HavijTimes
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -496,79 +496,7 @@ export default function Home() {
             habitant morbi tristique senectus et netus et malesuada fames ac
             turpis egestas. Praesent posuere ultrices imperdiet.
           </div>
-          <div className='flex gap-4 items-center flex-col sm:flex-row'>
-            <a
-              className='rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5'
-              href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              <Image
-                className='dark:invert'
-                src='/havij/vercel.svg'
-                alt='Vercel logomark'
-                width={20}
-                height={20}
-              />
-              Deploy now
-            </a>
-            <a
-              className='rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44'
-              href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              Read our docs
-            </a>
-          </div>
         </main>
-        <footer className='row-start-3 flex gap-6 flex-wrap items-center justify-center'>
-          <a
-            className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-            href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Image
-              aria-hidden
-              src='/havij/file.svg'
-              alt='File icon'
-              width={16}
-              height={16}
-            />
-            Learn
-          </a>
-          <a
-            className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-            href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Image
-              aria-hidden
-              src='/havij/window.svg'
-              alt='Window icon'
-              width={16}
-              height={16}
-            />
-            Examples
-          </a>
-          <a
-            className='flex items-center gap-2 hover:underline hover:underline-offset-4'
-            href='https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Image
-              aria-hidden
-              src='/havij/globe.svg'
-              alt='Globe icon'
-              width={16}
-              height={16}
-            />
-            Go to nextjs.org →
-          </a>
-        </footer>
       </div>
     </>
   )

diff --git a/src/components/ui/header.tsx b/src/components/ui/header.tsx
@@ -1,4 +1,5 @@
 'use client'
+
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -33,12 +34,25 @@ import {
 } from './dropdown-menu'
 import { Sheet, SheetContent, SheetTrigger } from './sheet'
 
-const navigationItems = [
+interface SubMenuItem {
+  title: string
+  href: string
+  description?: string
+}
+
+interface NavigationItem {
+  title: string
+  href: string
+  titleEn?: string
+  icon?: React.ReactNode
+  submenu?: SubMenuItem[]
+}
+
+const navigationItems: NavigationItem[] = [
   {
     title: 'صفحه اصلی',
     href: '/',
     titleEn: 'Home',
-    primary: true,
     icon: <HomeIcon />,
   },
   {
@@ -97,7 +111,35 @@ const navigationItems = [
   },
 ]
 
-const Header = () => {
+const ListItem: React.FC<{
+  className?: string
+  title: string
+  href: string
+  description?: string
+}> = ({ className, title, href, description }) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          href={href}
+          className={cn(
+            'block select-none space-y-1 text-right rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+            className
+          )}
+        >
+          <div className='text-sm font-medium leading-none'>{title}</div>
+          {description && (
+            <p className='line-clamp-2 text-sm leading-snug text-muted-foreground'>
+              {description}
+            </p>
+          )}
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+const Header: React.FC = () => {
   const pathname = usePathname()
   const [isOpen, setIsOpen] = React.useState(false)
 
@@ -132,8 +174,8 @@ const Header = () => {
                     className={cn(
                       'text-lg font-medium transition-colors hover:text-orange-500 py-2',
                       pathname === item.href
-                        ? 'text-orange-500'
-                        : 'text-muted-foreground'
+                        ? 'bg-orange-500 text-white me-1'
+                        : ''
                     )}
                   >
                     {item.title}
@@ -166,32 +208,30 @@ const Header = () => {
                             key={submenu.title}
                             title={submenu.title}
                             href={submenu.href}
-                          >
-                            {submenu.description}
-                          </ListItem>
+                            description={submenu.description}
+                          />
                         ))}
                       </ul>
                     </NavigationMenuContent>
                   </NavigationMenuItem>
                 ) : (
                   <NavigationMenuItem key={item.title}>
-                    <Link
-                      href={item.href}
-                      legacyBehavior
-                      passHref
-                    >
+                    <Link href={item.href}>
                       <NavigationMenuLink
                         className={cn(
                           navigationMenuTriggerStyle(),
                           'rounded-lg',
-                          item.primary && 'bg-orange-500 text-white me-1'
+                          pathname === item.href ||
+                            pathname.startsWith(`${item.href}/`)
+                            ? 'bg-orange-500 text-white me-1'
+                            : ''
                         )}
                       >
                         {item?.icon && (
                           <span className='[&>svg]:size-4 me-2'>
-                            {item?.icon}
+                            {item.icon}
                           </span>
-                        )}{' '}
+                        )}
                         {item.title}
                       </NavigationMenuLink>
                     </Link>
@@ -243,32 +283,4 @@ const Header = () => {
   )
 }
 
-const ListItem = React.forwardRef<
-  React.ElementRef<'a'>,
-  React.ComponentPropsWithoutRef<'a'>
->(({ className, title, href, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <Link
-          passHref
-          href={href || ''}
-          ref={ref}
-          className={cn(
-            'block select-none space-y-1 text-right rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-            className
-          )}
-          {...props}
-        >
-          <div className='text-sm font-medium leading-none'>{title}</div>
-          <p className='line-clamp-2 text-sm leading-snug text-muted-foreground'>
-            {children}
-          </p>
-        </Link>
-      </NavigationMenuLink>
-    </li>
-  )
-})
-ListItem.displayName = 'ListItem'
-
 export default Header