feat: redesign the header component

Author: edmoiseenkov

block-explorer/app/layout.tsx

@@ -1,8 +1,6 @@
 // "use client";
 import ServiceWorkerRegistration from '@/components/ServiceWorkerRegistration';
-import Container from '@/components/container';
 import QueryProvider from '@/components/layouts/query-provider';
-import MainSearch from '@/components/main-search';
 import ProgressBarWrapper from '@/components/progress-bar-wrapper';
 import SiteFooter from '@/components/site-footer';
 import { SiteHeader } from '@/components/site-header';
@@ -65,9 +63,6 @@ export default async function RootLayout({ children }: RootLayoutProps) {
           <QueryProvider>
             <div className="relative flex min-h-screen flex-col justify-between">
               <SiteHeader />
-              <Container className="lg:hidden">
-                <MainSearch />
-              </Container>
               {children}
               <SiteFooter />
             </div>

block-explorer/components/main-search.tsx

@@ -1,16 +1,19 @@
 'use client';
 
-import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { ChangeEvent, KeyboardEvent as ReactKeyboardEvent, useRef, useState } from 'react';
 
 import { performSearchMainSearch } from '@/lib/helpers';
-import { CornerDownLeft, Search } from 'lucide-react';
+import { useKeyDown } from '@/lib/hooks/useKeyDown.ts';
+import { RiSearchLine } from '@remixicon/react';
 
 import { Input } from './ui/input';
 
 export default function MainSearch() {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const [value, setValue] = useState('');
 
-  const handlePress = async (e: KeyboardEvent) => {
+  const handlePress = async (e: ReactKeyboardEvent) => {
     if (e?.key === 'Enter') {
       await performSearchMainSearch(value);
       setValue('');
@@ -21,17 +24,31 @@ export default function MainSearch() {
     setValue(e.target.value);
   };
 
+  const handleFocus = (event?: KeyboardEvent) => {
+    if (event && document.activeElement !== document.body) return;
+    event?.preventDefault();
+    event?.stopPropagation();
+    setTimeout(() => inputRef.current?.focus());
+  };
+
+  useKeyDown('/', handleFocus);
+
   return (
     <div className="relative">
-      <Search className="absolute left-2.5 top-2.5 -z-10 size-5 text-muted-foreground" />
+      <RiSearchLine className="absolute left-4 top-3 -z-10 size-4 text-muted-foreground" />
       <Input
-        onChange={handleChangeValue}
-        value={value}
+        ref={inputRef}
+        className="px-10"
         placeholder="Search by address / txn hash / block..."
+        value={value}
+        onChange={handleChangeValue}
         onKeyDown={handlePress}
-        className="px-10"
       />
-      <CornerDownLeft className="absolute right-2.5 top-2.5 -z-10 m-auto size-5 text-muted-foreground" />
+      <div className="absolute right-2.5 top-2.5 -z-10 m-auto flex size-5 items-center justify-center rounded-[4px] bg-[#F5F5F5] text-muted-foreground dark:bg-[#1C1C1C]">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path d="M8.06061 2.33337H9.33334L5.9394 11.6667H4.66667L8.06061 2.33337Z" fill="currentColor" />
+        </svg>
+      </div>
     </div>
   );
 }

block-explorer/components/navigation.tsx

@@ -112,14 +112,24 @@ export function Navigation() {
 export const MobileMenu = () => {
   const [open, setOpen] = useState<boolean>(false);
 
+  const pathname = usePathname();
+
+  const isHomePage = pathname === '/';
+
   return (
     <Fragment>
       <div className="block lg:hidden">
         <div className="p-1 duration-300 animate-in animate-out fade-in fade-out" onClick={() => setOpen(!open)}>
           {open ? <RiCloseLargeLine className="size-6" /> : <RiMenuLine className="size-6" />}
         </div>
       </div>
-      <div className={cn([open ? 'absolute left-0 top-[64px] !m-0 w-full' : 'hidden'])}>
+      <div
+        className={cn(
+          'absolute left-0 top-[64px] !m-0 w-full',
+          !open && 'hidden',
+          isHomePage ? 'top-[96px]' : 'top-[128px]',
+        )}
+      >
         <Card className="rounded-b-2xl rounded-t-none dark:bg-black">
           <CardContent className="p-2">
             <div className="flex flex-col gap-0.5">
@@ -156,6 +166,7 @@ export const MobileMenu = () => {
                                 key={i}
                                 href={subitem.href}
                                 className="cursor-pointer rounded-[4px] px-3 py-2 text-[14px]/[20px] font-semibold"
+                                onClick={() => setOpen(false)}
                               >
                                 {subitem.title}
                               </Link>

block-explorer/components/site-header.tsx

@@ -11,9 +11,9 @@ import { Badge } from './ui/badge';
 export function SiteHeader() {
   return (
     <Fragment>
-      <header className="z-40 flex w-full flex-col bg-white py-4 dark:bg-black">
+      <header className="z-40 flex w-full flex-col bg-white dark:bg-black">
         <SiteTopBar />
-        <div className="container flex items-center justify-between gap-4 space-x-4 px-4 pt-0 sm:space-x-0 lg:px-8 lg:pt-4">
+        <div className="container flex items-center justify-between gap-4 space-x-4 p-4 sm:space-x-0 lg:px-8">
           <Link href="/" className="flex items-center gap-2">
             <Image
               src="/site-logos/rootscan-logo.png"

block-explorer/components/site-top-bar.tsx

@@ -12,20 +12,20 @@ export const SiteTopBar = () => {
   const isHomePage = pathname === '/';
 
   return (
-    <div className="hidden border-b pb-4 lg:block">
-      <div className="container">
+    <div className="border-b pb-[11px] pt-3">
+      <div className="container px-4 lg:px-8">
         <div className="flex items-center justify-between gap-4">
-          <div className="flex w-full select-none items-center gap-2 text-xs text-primary/80">
+          <div className="hidden w-full select-none items-center gap-2 text-xs text-primary/80 lg:flex">
             <OnlyMainnet>
               <RootPrice />
             </OnlyMainnet>
-            {isHomePage && <div className="flex-1" />}
+            {isHomePage && <div className="hidden lg:flex-1" />}
             <RiGasStationLine className="size-4 text-muted-foreground" />{' '}
             <span className="text-muted-foreground">EVM Gas: </span>
             <span>7500 Gwei</span>
           </div>
           {!isHomePage && (
-            <div className="hidden max-w-2xl grow lg:block">
+            <div className="w-full grow lg:max-w-[656px]">
               <MainSearch />
             </div>
           )}

block-explorer/lib/hooks/useKeyDown.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const useKeyDown = (
+  key: string,
+  callback: (event: KeyboardEvent) => void
+) => {
+  const callbackRef = React.useRef(callback)
+  callbackRef.current = callback
+
+  React.useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        callbackRef.current(event)
+      }
+    }
+    document.addEventListener('keydown', handleKeydown)
+    return () => {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }, [])
+}