Merge pull request #32 from SyncfusionExamples/999984-Employee-D8

999984: Fix for Employee Management Reported Issue

Author: BalajiSGrid

Employee_Managment_App/src/App.tsx

@@ -151,6 +151,7 @@ function App() {
           isOpen={sbIsOpen}
           type={sbType as any}
           position="Left"
+          className='app-nav-sidebar'
           showBackdrop={!isDesktop}
           closeOnDocumentClick={!isDesktop}
           open={() => {

Employee_Managment_App/src/components/EmployeeInfo.tsx

@@ -235,14 +235,12 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
                             <TabItemDirective header={headerText[0]} content={content0} />
                             {employeeData &&
                                 userInfo &&
-                                (userInfo.Name === employeeData.Name ||
-                                    userInfo.Name === employeeData.TeamLead) && (
+                                (userInfo.Name === employeeData.Name) && (
                                     <TabItemDirective header={headerText[1]} content={content1} />
                                 )}
                             {employeeData &&
                                 userInfo &&
-                                (userInfo.Name === employeeData.Name ||
-                                    userInfo.Name === employeeData.TeamLead) && (
+                                (userInfo.Name === employeeData.Name) && (
                                     <TabItemDirective header={headerText[2]} content={content2} />
                                 )}
                             {employeeData &&

Employee_Managment_App/src/components/TopNav.tsx

@@ -63,7 +63,6 @@ const TopNav: React.FC<TopNavProps> = ({
   const [query, setQuery] = useState('');
   const [avatarMenuOpen, setAvatarMenuOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
-  const [createMenuOpen, setCreateMenuOpen] = useState(false);
   const [panelOpen, setPanelOpen] = useState(false);
   const [panelTab, setPanelTab] = useState<'notifications' | 'announcements'>('announcements');
 
@@ -80,14 +79,10 @@ const TopNav: React.FC<TopNavProps> = ({
       if (avatarRef.current && !avatarRef.current.contains(ev.target as Node)) {
         setAvatarMenuOpen(false);
       }
-      if (createRef.current && !createRef.current.contains(ev.target as Node)) {
-        setCreateMenuOpen(false);
-      }
     };
     const handleEsc = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         setAvatarMenuOpen(false);
-        setCreateMenuOpen(false);
         setMobileSearchOpen(false);
         setPanelOpen(false);
       }
@@ -203,36 +198,6 @@ const TopNav: React.FC<TopNavProps> = ({
               </svg>
             </ButtonComponent>
 
-            <div className="btn-create-group" ref={createRef}>
-              <ButtonComponent
-                cssClass="btn-create"
-                type="button"
-                onClick={() => setCreateMenuOpen((o) => !o)}
-                aria-haspopup="menu"
-                aria-expanded={createMenuOpen}
-                title="Create"
-                iconCss="e-icons e-chevron-down-fill"
-                iconPosition="Right"
-              >
-                <span>Create</span>
-              </ButtonComponent>
-
-              {createMenuOpen && (
-                <ul className="create-menu" role="menu">
-                  <li role="menuitem">
-                    <ButtonComponent type="button" onClick={onCreate}>
-                      Create Leave
-                    </ButtonComponent>
-                  </li>
-                  <li role="menuitem">
-                    <ButtonComponent type="button" onClick={onCreate}>
-                      Create Permission
-                    </ButtonComponent>
-                  </li>
-                </ul>
-              )}
-            </div>
-
             <button className="icon-btn e-icons e-multiple-comment" type="button" onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();

Employee_Managment_App/src/index.css

@@ -54154,6 +54154,9 @@ ejs-sidebar {
   visibility: hidden;
   will-change: transform;
 }
+.e-sidebar.app-nav-sidebar {
+  overflow: hidden;
+}
 
 .e-sidebar.e-right.e-open,
 .e-sidebar.e-left.e-open {