revamp template

src/partials/navbar/NavbarDropdown.tsx

@@ -0,0 +1,118 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  MenuLabel,
+  MenuSub,
+  MenuTitle,
+  MenuToggle
+} from '@/components/menu';
+import { KeenIcon } from '@/components/keenicons';
+import { useLanguage } from '@/i18n';
+import { ModalShareProfile } from '../modals/share-profile';
+import { ModalGiveAward } from '../modals/give-award';
+import { ModalReportUser } from '../modals/report-user';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+
+const NavbarDropdown = () => {
+  const itemRef = useRef<any>(null);
+  const { isRTL } = useLanguage();
+
+  const [ShareProfileModalOpen, setShareProfileModalOpen] = useState(false);
+  const handleSettingsModalOpen = () => {
+    setShareProfileModalOpen(true);
+    itemRef.current?.hide();
+  };
+  const handleShareProfileModalClose = () => {
+    setShareProfileModalOpen(false);
+  };
+
+  const [giveAwardModalOpen, setGiveAwardModalOpen] = useState(false);
+  const handleGiveAwardModalOpen = () => {
+    setGiveAwardModalOpen(true);
+    itemRef.current?.hide();
+  };
+  const handleGiveAwardModalClose = () => {
+    setGiveAwardModalOpen(false);
+  };
+
+  const [reportUserModalOpen, setReportUserModalOpen] = useState(false);
+  const handleReportUserModalOpen = () => {
+    setReportUserModalOpen(true);
+    itemRef.current?.hide();
+  };
+  const handleReportUserModalClose = () => {
+    setReportUserModalOpen(false);
+  };
+
+  return (
+    <Fragment>
+      <Menu className="items-stretch">
+        <MenuItem
+          ref={itemRef}
+          toggle="dropdown"
+          trigger="click"
+          dropdownProps={{
+            placement: isRTL() ? 'bottom-start' : 'bottom-end',
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
+                }
+              }
+            ]
+          }}
+        >
+          <MenuToggle className="btn btn-sm btn-icon btn-light">
+            <KeenIcon icon="dots-vertical" />
+          </MenuToggle>
+          <MenuSub className="menu-default" rootClassName="w-full max-w-[220px]">
+            <MenuItem onClick={handleSettingsModalOpen}>
+              <MenuLabel>
+                <MenuIcon>
+                  <KeenIcon icon="coffee" />
+                </MenuIcon>
+                <MenuTitle>Share Profile</MenuTitle>
+              </MenuLabel>
+            </MenuItem>
+            <MenuItem onClick={handleGiveAwardModalOpen}>
+              <MenuLabel>
+                <MenuIcon>
+                  <KeenIcon icon="award" />
+                </MenuIcon>
+                <MenuTitle>Give Award</MenuTitle>
+              </MenuLabel>
+            </MenuItem>
+            <MenuItem>
+              <MenuLabel>
+                <MenuIcon>
+                  <KeenIcon icon="chart-line" />
+                </MenuIcon>
+                <MenuTitle>Stay Updated</MenuTitle>
+                <label className="switch switch-sm">
+                  <input type="checkbox" value="1" name="check" />
+                </label>
+              </MenuLabel>
+            </MenuItem>
+            <MenuItem onClick={handleReportUserModalOpen}>
+              <MenuLabel>
+                <MenuIcon>
+                  <KeenIcon icon="information-2" />
+                </MenuIcon>
+                <MenuTitle>Report User</MenuTitle>
+              </MenuLabel>
+            </MenuItem>
+          </MenuSub>
+        </MenuItem>
+      </Menu>
+
+      <ModalShareProfile open={ShareProfileModalOpen} onOpenChange={handleShareProfileModalClose} />
+      <ModalGiveAward open={giveAwardModalOpen} onOpenChange={handleGiveAwardModalClose} />
+      <ModalReportUser open={reportUserModalOpen} onOpenChange={handleReportUserModalClose} />
+    </Fragment>
+  );
+};
+
+export { NavbarDropdown };