revamp template

src/layouts/demo2/header/Header.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import { Container } from '@/components/container';
+import { HeaderLogo, HeaderTopbar } from '.';
+import { useDemo2Layout } from '../';
+import { useEffect } from 'react';
+import { toAbsoluteUrl } from '@/utils';
+
+const Header = () => {
+  const { headerSticky } = useDemo2Layout();
+
+  useEffect(() => {
+    if (headerSticky) {
+      document.body.setAttribute('data-sticky-header', 'on');
+    } else {
+      document.body.removeAttribute('data-sticky-header');
+    }
+  }, [headerSticky]);
+
+  return (
+    <header
+      className={clsx(
+        'flex items-center transition-[height] shrink-0  h-[--tw-header-height] bg-[length:600px]  bg-no-repeat',
+        headerSticky &&
+          'transition-[height] fixed z-10 top-0 left-0 right-0 shadow-sm backdrop-blur-md bg-white/70 dark:bg-coal-500/70 dark:border-b dark:border-b-coal-100'
+      )}
+      style={{
+        backgroundImage: `url('${toAbsoluteUrl('/media/images/2600x1200/bg-14.png')}')`
+      }}
+    >
+      <Container className="flex justify-between items-center lg:gap-4">
+        <HeaderLogo />
+        <HeaderTopbar />
+      </Container>
+    </header>
+  );
+};
+
+export { Header };

src/layouts/demo2/header/HeaderLogo.tsx

@@ -0,0 +1,104 @@
+import { Link, useLocation } from 'react-router-dom';
+import { KeenIcon } from '@/components/keenicons';
+import { toAbsoluteUrl } from '@/utils';
+import {
+  Menu,
+  MenuArrow,
+  MenuIcon,
+  MenuItem,
+  MenuLink,
+  MenuSub,
+  MenuTitle,
+  MenuToggle
+} from '@/components/menu';
+import { MENU_ROOT } from '@/config';
+import { useEffect, useState } from 'react';
+import { useLanguage } from '@/i18n';
+
+const HeaderLogo = () => {
+  const { pathname } = useLocation();
+  const { isRTL } = useLanguage();
+  const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]);
+
+  useEffect(() => {
+    MENU_ROOT.forEach((item) => {
+      if (item.rootPath && pathname.includes(item.rootPath)) {
+        setSelectedMenuItem(item);
+      }
+    });
+  }, [pathname]);
+
+  return (
+    // <div className="flex items-center gap-2 lg:gap-5 2xl:-ml-[60px]">
+    <div className="flex items-center gap-2 lg:gap-5">
+      <Link to="/" className="shrink-0">
+        {/* <img
+          src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
+          className="dark:hidden min-h-[42px]"
+          alt="logo"
+        />
+        <img
+          src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
+          className="hidden dark:inline-block min-h-[42px]"
+          alt="logo"
+        /> */}
+        <img
+          src={toAbsoluteUrl('/media/app/bri_tl_logo.png')}
+          className="dark:hidden h-10"
+          alt="logo"
+        />
+        <img
+          src={toAbsoluteUrl('/media/app/bri_tl_logo.png')}
+          className="hidden dark:inline-block min-h-[42px]"
+          alt="logo"
+        />
+      </Link>
+
+      <div className="flex items-center">
+        <h3 className="text-gray-700 text-base hidden md:block">Brillian Apps</h3>
+        <span className="text-sm text-gray-400 font-medium px-2.5 hidden md:inline">/</span>
+
+        <Menu className="menu-default">
+          <MenuItem
+            toggle="dropdown"
+            trigger="hover"
+            dropdownProps={{
+              placement: isRTL() ? 'bottom-end' : 'bottom-start',
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 10] // [skid, distance]
+                  }
+                }
+              ]
+            }}
+          >
+            <MenuToggle className="text-gray-900 font-medium">
+              {selectedMenuItem.title}
+              <MenuArrow>
+                <KeenIcon icon="down" />
+              </MenuArrow>
+            </MenuToggle>
+            <MenuSub className="menu-default w-48">
+              {MENU_ROOT.map((item, index) => (
+                <MenuItem key={index} className={item === selectedMenuItem ? 'active' : ''}>
+                  <MenuLink path={item.path}>
+                    {item.icon && (
+                      <MenuIcon>
+                        <KeenIcon icon={item.icon} />
+                      </MenuIcon>
+                    )}
+                    <MenuTitle>{item.title}</MenuTitle>
+                  </MenuLink>
+                </MenuItem>
+              ))}
+            </MenuSub>
+          </MenuItem>
+        </Menu>
+      </div>
+    </div>
+  );
+};
+
+export { HeaderLogo };

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+import { KeenIcon } from '@/components/keenicons';
+import { toAbsoluteUrl } from '@/utils';
+import { Menu, MenuItem, MenuToggle } from '@/components';
+import { DropdownUser } from '@/partials/dropdowns/user';
+import { useLanguage } from '@/i18n';
+
+const HeaderTopbar = () => {
+  const itemChatRef = useRef<any>(null);
+  const itemUserRef = useRef<any>(null);
+  const itemNotificationsRef = useRef<any>(null);
+  const { isRTL } = useLanguage();
+
+  const handleDropdownChatShow = () => {
+    window.dispatchEvent(new Event('resize'));
+  };
+
+  return (
+    <div className="flex items-center gap-3.5">
+      <Menu>
+        <MenuItem
+          ref={itemUserRef}
+          toggle="dropdown"
+          trigger="click"
+          dropdownProps={{
+            placement: isRTL() ? 'bottom-start' : 'bottom-end',
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [20, 10] // [skid, distance]
+                }
+              }
+            ]
+          }}
+        >
+          <MenuToggle className="btn btn-icon rounded-full">
+            <img
+              className="size-9 rounded-full justify-center border border-gray-500 shrink-0"
+              src={toAbsoluteUrl('/media/avatars/blank.png')}
+              alt=""
+            />
+          </MenuToggle>
+          {DropdownUser({ menuItemRef: itemUserRef })}
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export { HeaderTopbar };

src/layouts/demo2/header/index.ts

@@ -0,0 +1,3 @@
+export * from './Header';
+export * from './HeaderLogo';
+export * from './HeaderTopbar';