more update added to layout design

2025-04-06 13:33:43 +01:00
parent a19942b12b
commit 06a0d4d7cd
15 changed files with 359 additions and 29 deletions
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import Icons from '../../Icons'
+import Orders from './Orders'
+import Tickets from './Tickets'
+import Tasks from './Tasks'
+
+export default function RightAsideBar() {
+
+    let [active, setActive] = useState('orders')
+
+    const handleActiveMenu = ({target:{name}}) => {
+        let lowerStr = name.toLowerCase()
+        setActive(lowerStr)
+    }
+
+  return (
+    <div className='w-full h-full flex flex-col gap-8'>
+        {/* Menu */}
+        <div className='grid grid-cols-3 gap-8'>
+            <button name='orders' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
+                <Icons name='dashboard' className='text-3xl' />
+            </button>
+            <button name='tickets' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
+                <Icons name='settings' className='text-3xl' />
+            </button>
+            <button name='tasks' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
+                <Icons name='dashboard' className='text-3xl' />
+            </button>
+        </div>
+
+        {/* Body */}
+        {active == 'orders' && <Orders />}
+        {active == 'tickets' && <Tickets />}
+        {active == 'tasks' && <Tasks />}
+    </div>
+  )
+}