Top bar distinction feature (#1643)

* feat: Add visual distinction between top bar and cards (#1422)

* removed shadow from header

* feat: Add visual distinction between top bar and cards (#1422)

* fix: removed bar from header and applied it to GeneralLayouts.tsx for th

components/Header/Header.tsx

@@ -13,7 +13,7 @@ export const Header: FC = () => {
   const { results } = useResults()
 
   return (
-    <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
+    <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark border-b border-b-light-primary dark:border-b-dark-primary">
       <div className="bg-light-primary h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
         <Link href="/" aria-label="LinksHub Logo">
           <Logo className="text-3xl" />

layouts/GeneralLayout.tsx

@@ -8,9 +8,12 @@ import { SkipLink } from 'components/SkipLink/SkipLink'
 import { useContext } from 'react'
 import { IContext } from 'types'
 import { GlobalContext } from 'context/GlobalContext'
+import clsx from 'clsx'
+import { usePathname } from 'next/navigation'
 
 const GeneralLayout = ({ children }: { children: ReactNode }) => {
   const { sidebar } = useContext<IContext>(GlobalContext)
+  const pathname = usePathname()
 
   return (
     <>
@@ -26,7 +29,12 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
           <Aside />
         </nav>
         <main
-          className="h-full px-4 lg:ml-[290px] lg:w-[calc(100%-290px)]"
+          className={clsx(
+            'h-full px-4 lg:ml-[290px] lg:w-[calc(100%-290px)]',
+
+            pathname != '/' &&
+              'lg:border-t lg:border-t-theme-primary lg:dark:border-t-theme-secondary transition-color ease-in-out duration-200'
+          )}
           id="main"
         >
           {children}

package.json

@@ -18,6 +18,7 @@
     "@types/react": "18.0.31",
     "@types/react-dom": "18.0.11",
     "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.3",
     "daisyui": "^2.51.5",
     "eslint": "8.37.0",