EJ2-981297: Hamburger icon added to the sidebar header area with suitable styles and used our icon component to visualize the icon

Author: Satheeshkumar0195

Employee_Managment_App/package.json

@@ -3,27 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@syncfusion/ej2-base": "25.1.35",
-    "@syncfusion/ej2-buttons": "25.1.35",
-    "@syncfusion/ej2-calendars": "25.1.35",
-    "@syncfusion/ej2-data": "25.1.35",
-    "@syncfusion/ej2-documenteditor": "25.1.35",
-    "@syncfusion/ej2-dropdowns": "25.1.35",
-    "@syncfusion/ej2-grids": "25.1.35",
-    "@syncfusion/ej2-lists": "25.1.35",
-    "@syncfusion/ej2-navigations": "25.1.35",
-    "@syncfusion/ej2-pivotview": "25.1.35",
-    "@syncfusion/ej2-react-base": "25.1.35",
-    "@syncfusion/ej2-react-buttons": "25.1.35",
-    "@syncfusion/ej2-react-calendars": "25.1.35",
-    "@syncfusion/ej2-react-dropdowns": "25.1.35",
-    "@syncfusion/ej2-react-grids": "25.1.35",
-    "@syncfusion/ej2-react-inputs": "25.1.35",
-    "@syncfusion/ej2-react-lists": "25.1.35",
-    "@syncfusion/ej2-react-navigations": "25.1.35",
-    "@syncfusion/ej2-react-popups": "25.1.35",
-    "@syncfusion/ej2-schedule": "25.1.35",
-    "@syncfusion/ej2-splitbuttons": "25.1.35",
+    "@syncfusion/ej2-base": "31.1.17",
+    "@syncfusion/ej2-buttons": "31.1.17",
+    "@syncfusion/ej2-calendars": "31.1.17",
+    "@syncfusion/ej2-data": "31.1.17",
+    "@syncfusion/ej2-documenteditor": "31.1.17",
+    "@syncfusion/ej2-dropdowns": "31.1.17",
+    "@syncfusion/ej2-grids": "31.1.17",
+    "@syncfusion/ej2-lists": "31.1.17",
+    "@syncfusion/ej2-navigations": "31.1.17",
+    "@syncfusion/ej2-pivotview": "31.1.17",
+    "@syncfusion/ej2-react-base": "31.1.17",
+    "@syncfusion/ej2-react-buttons": "31.1.17",
+    "@syncfusion/ej2-react-calendars": "31.1.17",
+    "@syncfusion/ej2-react-dropdowns": "31.1.17",
+    "@syncfusion/ej2-react-grids": "31.1.17",
+    "@syncfusion/ej2-react-inputs": "31.1.17",
+    "@syncfusion/ej2-react-lists": "31.1.17",
+    "@syncfusion/ej2-react-navigations": "31.1.17",
+    "@syncfusion/ej2-react-popups": "31.1.17",
+    "@syncfusion/ej2-schedule": "31.1.17",
+    "@syncfusion/ej2-splitbuttons": "31.1.17",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

Employee_Managment_App/public/index.html

@@ -6,8 +6,9 @@
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
       rel="stylesheet"
     />
+    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-icons/styles/tailwind3.css" rel="stylesheet" />
     <link
-      href="https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css"
+      href="https://cdn.syncfusion.com/ej2/31.1.17/tailwind3.css"
       rel="stylesheet"
     />
     <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>

Employee_Managment_App/src/App.tsx

@@ -16,7 +16,10 @@ function App() {
         <div className="xyz-management-content" style={{ width: '100%' }}>
           <div className="row">
             <div className="col-md-2 sidebar">
-            <div className="title">NexGen7 Software</div>
+              <div className='sidebar-brand'>
+                <div className="title">NexGen7 Software</div>
+                <span className="e-icons e-line-very-small"></span>
+              </div>
               <ul className="nav flex-column">
                 <li className="nav-item">
                   <NavLink className="nav-link" to="/">