diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx
index 7329d361474..27dc31344f8 100644
--- a/webapp/src/components/sidebar/sidebarBoardItem.tsx
+++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx
@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback, useRef, useState} from 'react'
-import {useIntl} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
import {generatePath, useHistory, useRouteMatch} from 'react-router-dom'
import {Board} from '../../blocks/board'
@@ -43,6 +43,8 @@ import {Archiver} from '../../archiver'
import SeparatorOption from '../../widgets/menu/separatorOption'
+import CreateCategory from '../../components/createCategory/createCategory'
+
const iconForViewType = (viewType: IViewType): JSX.Element => {
switch (viewType) {
case 'board': return
@@ -80,6 +82,7 @@ const SidebarBoardItem = (props: Props) => {
const dispatch = useAppDispatch()
const myAllBoards = useAppSelector(getMySortedBoards)
const currentBoardID = useAppSelector(getCurrentBoardId)
+ const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false)
const generateMoveToCategoryOptions = (boardID: string) => {
return props.allCategories.map((category) => (
@@ -245,7 +248,9 @@ const SidebarBoardItem = (props: Props) => {
id='createNewCategory'
icon={}
name={intl.formatMessage({id: 'SidebarCategories.CategoryMenu.CreateNew', defaultMessage: 'Create New Category'})}
- onClick={() => {}}
+ onClick={() => {
+ setShowCreateCategoryModal(true)
+ }}
/>
{!me?.is_guest &&
@@ -308,6 +313,16 @@ const SidebarBoardItem = (props: Props) => {
))}
+ {showCreateCategoryModal &&
+ setShowCreateCategoryModal(false)}
+ title={(
+
+ )}
+ />}
>
)
}