Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c53c37611a | |||
| f7d82c0958 |
@@ -1,18 +1,23 @@
|
|||||||
import clsx from 'clsx'
|
import clsx from 'clsx';
|
||||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
import { KTIcon, toAbsoluteUrl } from '../../../helpers';
|
||||||
import {HeaderNotificationsMenu, HeaderUserMenu, Search, ThemeModeSwitcher} from '../../../partials'
|
import {
|
||||||
import {useLayout} from '../../core'
|
HeaderNotificationsMenu,
|
||||||
|
HeaderUserMenu,
|
||||||
|
Search,
|
||||||
|
ThemeModeSwitcher,
|
||||||
|
} from '../../../partials';
|
||||||
|
import { useLayout } from '../../core';
|
||||||
|
|
||||||
const itemClass = 'ms-1 ms-md-4'
|
const itemClass = 'ms-1 ms-md-4';
|
||||||
const btnClass =
|
const btnClass =
|
||||||
'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px'
|
'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px';
|
||||||
const userAvatarClass = 'symbol-35px'
|
const userAvatarClass = 'symbol-35px';
|
||||||
const btnIconClass = 'fs-2'
|
const btnIconClass = 'fs-2';
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const {config} = useLayout()
|
const { config } = useLayout();
|
||||||
return (
|
return (
|
||||||
<div className='app-navbar flex-shrink-0'>
|
<div className="app-navbar flex-shrink-0">
|
||||||
{/* <div className={clsx('app-navbar-item align-items-stretch', itemClass)}>
|
{/* <div className={clsx('app-navbar-item align-items-stretch', itemClass)}>
|
||||||
<Search />
|
<Search />
|
||||||
</div> */}
|
</div> */}
|
||||||
@@ -43,33 +48,42 @@ const Navbar = () => {
|
|||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
<div className={clsx('app-navbar-item', itemClass)}>
|
<div className={clsx('app-navbar-item', itemClass)}>
|
||||||
<ThemeModeSwitcher toggleBtnClass={clsx('btn-active-light-primary btn-custom')} />
|
<ThemeModeSwitcher
|
||||||
|
toggleBtnClass={clsx('btn-active-light-primary btn-custom')}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={clsx('app-navbar-item', itemClass)}>
|
<div className={clsx('app-navbar-item', itemClass)}>
|
||||||
<div
|
<div
|
||||||
className={clsx('cursor-pointer symbol', userAvatarClass)}
|
className={clsx('cursor-pointer symbol', userAvatarClass)}
|
||||||
data-kt-menu-trigger="{default: 'click'}"
|
data-kt-menu-trigger="{default: 'click'}"
|
||||||
data-kt-menu-attach='parent'
|
data-kt-menu-attach="parent"
|
||||||
data-kt-menu-placement='bottom-end'
|
data-kt-menu-placement="bottom-end"
|
||||||
>
|
>
|
||||||
<img src={toAbsoluteUrl('media/avatars/300-3.jpg')} alt='' />
|
<img
|
||||||
|
src={toAbsoluteUrl('media/avatars/300-3.jpg')}
|
||||||
|
alt=""
|
||||||
|
style={{ cursor: 'auto' }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<HeaderUserMenu />
|
{/* <HeaderUserMenu /> */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{config.app?.header?.default?.menu?.display && (
|
{config.app?.header?.default?.menu?.display && (
|
||||||
<div className='app-navbar-item d-lg-none ms-2 me-n3' title='Show header menu'>
|
<div
|
||||||
|
className="app-navbar-item d-lg-none ms-2 me-n3"
|
||||||
|
title="Show header menu"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className='btn btn-icon btn-active-color-primary w-35px h-35px'
|
className="btn btn-icon btn-active-color-primary w-35px h-35px"
|
||||||
id='kt_app_header_menu_toggle'
|
id="kt_app_header_menu_toggle"
|
||||||
>
|
>
|
||||||
<KTIcon iconName='text-align-left' className={btnIconClass} />
|
<KTIcon iconName="text-align-left" className={btnIconClass} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export {Navbar}
|
export { Navbar };
|
||||||
|
|||||||
Reference in New Issue
Block a user