chore: add appbar

examples/kendo-react-freemium/src/components/AppBarComponent.tsx

@@ -1,46 +1,75 @@
 import { Button } from '@progress/kendo-react-buttons';
-import { TextBox } from '@progress/kendo-react-inputs';
+import { InputPrefix, InputSeparator, TextBox } from '@progress/kendo-react-inputs';
 import { AppBar, AppBarSection, Avatar } from "@progress/kendo-react-layout";
-import { Badge } from '@progress/kendo-react-indicators';
+import { Badge, BadgeContainer } from '@progress/kendo-react-indicators';
+import { Popover } from '@progress/kendo-react-tooltip';
 import { SvgIcon } from '@progress/kendo-react-common';
-// import logo from '@assets/templates/react-freemium/logo.svg';
-// import compactLogo from '@assets/templates/react-freemium/compact-logo.svg';
-import { bellIcon, searchIcon } from '@progress/kendo-svg-icons';
+import logo from '../assets/logo.svg';
+import compactLogo from '../assets/compact-logo.svg';
+import { bellIcon, logoutIcon, searchIcon, slidersIcon } from '@progress/kendo-svg-icons';
+import React from 'react';
 
 export default function AppBarComponent() {
+    const anchor = React.useRef<HTMLDivElement>(null);
+    const [show, setShow] = React.useState(false);
     return (
-        <AppBar positionMode="sticky" className="bg-surface-alt !p-4">
+        <AppBar positionMode="sticky" className="bg-surface-alt p-4" themeColor='inherit'>
             <AppBarSection className="grow gap-4">
-                <a href="#">
-                    {/* <img src={logo.src} alt="Logo" className="hidden md:flex" />
-                    <img src={compactLogo.src} alt="Logo" className="flex md:hidden" /> */}
+                <a href="/">
+                    <img src={logo} alt="Logo" className="hidden md:flex" />
+                    <img src={compactLogo} alt="Logo" className="flex md:hidden" />
                 </a>
             </AppBarSection>
 
             <AppBarSection className="grow md:grow-0 !hidden sm:!inline-flex">
-                    <TextBox prefix={
-                        <SvgIcon icon={searchIcon} />
-                    }
+                <TextBox prefix={() => (
+                        <>
+                            <InputPrefix>
+                                <SvgIcon icon={searchIcon} />
+                            </InputPrefix>
+                            <InputSeparator />
+                        </>
+                    )}
                         placeholder="Search"
                         fillMode="solid"
                         className="!w-75"
                     />
             </AppBarSection>
 
             <AppBarSection className="sm:!hidden">
-                <Button fillMode="flat" icon="search" />
+                <Button fillMode="flat" svgIcon={searchIcon} />
             </AppBarSection>
 
             <AppBarSection className="gap-2">
-                <div className="k-badge-container">
-                    <Button svgIcon={bellIcon} fillMode="flat" />
-                    <Badge rounded="full" position="inside" align={{ vertical: 'top', horizontal: 'end' }} themeColor="primary" />
+                <div onClick={() => setShow(!show)} ref={anchor}>
+                    <Avatar rounded="full" type="text" themeColor="primary">JP</Avatar>
                 </div>
+                <Popover
+                    show={show}
+                    anchor={anchor.current}
+                    position={'bottom'}
+                    style={{width: '120px'}}
+                >
+                   <div className="k-list k-list-md">
+                    <div className="k-list-content">
+                        <ul className="k-list-ul">
+                            <li className="k-list-item">
+                                <SvgIcon icon={slidersIcon}/>
+                                <span className="k-list-item-text">Settings</span>
+                            </li>
+                            <li className="k-list-item">
+                                <SvgIcon icon={logoutIcon}/>
+                                <span className="k-list-item-text">Log out</span>
+                            </li>
+                            </ul>
+                        </div>
+                    </div>
+                </Popover>
                 <span className="k-appbar-separator border-border"></span>
-                <Avatar rounded="full" type="text" themeColor="primary">JP</Avatar>
-            {/* Popover with Image and Text */}
-
-            {/* End of Popover with Icon and Text */}
+                <BadgeContainer>
+                    <Button svgIcon={bellIcon} fillMode="flat" />
+                    <Badge rounded="full" position="inside" align={{ vertical: 'top', horizontal: 'end' }} themeColor="primary" />
+                </BadgeContainer>
             </AppBarSection>
         </AppBar>
     );