🚚 Move new-frontend to frontend (#652)

frontend/src/components/Common/SidebarItems.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'
+import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi'
+import { Link } from '@tanstack/react-router'
+import { useQueryClient } from 'react-query'
+
+import { UserOut } from '../../client'
+
+const items = [
+  { icon: FiHome, title: 'Dashboard', path: '/' },
+  { icon: FiBriefcase, title: 'Items', path: '/items' },
+  { icon: FiSettings, title: 'User Settings', path: '/settings' },
+]
+
+interface SidebarItemsProps {
+  onClose?: () => void
+}
+
+const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
+  const queryClient = useQueryClient()
+  const textColor = useColorModeValue('ui.main', '#E2E8F0')
+  const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
+  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+
+  const finalItems = currentUser?.is_superuser
+    ? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }]
+    : items
+
+  const listItems = finalItems.map((item) => (
+    <Flex
+      as={Link}
+      to={item.path}
+      w="100%"
+      p={2}
+      key={item.title}
+      activeProps={{
+        style: {
+          background: bgActive,
+          borderRadius: '12px',
+        },
+      }}
+      color={textColor}
+      onClick={onClose}
+    >
+      <Icon as={item.icon} alignSelf="center" />
+      <Text ml={2}>{item.title}</Text>
+    </Flex>
+  ))
+
+  return (
+    <>
+      <Box>{listItems}</Box>
+    </>
+  )
+}
+
+export default SidebarItems