Merge pull request #6266 from weseek/feat/gw7831-add-bookmarks-item-on-sidebar

feat: add bookmark item on the sidebar

packages/app/src/components/Sidebar/Bookmarks.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+const Bookmarks: FC = () => {
+  const { t } = useTranslation('');
+
+  // TODO Add bookmarks item
+
+  return (
+    <div className="grw-sidebar-content-header p-3">
+      <h3 className="mb-0">{t('Bookmarks')}</h3>
+    </div>
+  );
+
+};
+
+export default Bookmarks;

packages/app/src/components/Sidebar/SidebarContents.tsx

@@ -2,9 +2,11 @@ import React, { FC } from 'react';
 
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useCurrentSidebarContents } from '~/stores/ui';
-import RecentChanges from './RecentChanges';
+
+import Bookmarks from './Bookmarks';
 import CustomSidebar from './CustomSidebar';
 import PageTree from './PageTree';
+import RecentChanges from './RecentChanges';
 import Tag from './Tag';
 
 type Props = {
@@ -24,6 +26,9 @@ const SidebarContents: FC<Props> = (props: Props) => {
     case SidebarContentsType.TAG:
       Contents = Tag;
       break;
+    case SidebarContentsType.BOOKMARKS:
+      Contents = Bookmarks;
+      break;
     default:
       Contents = PageTree;
   }

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -89,6 +89,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
         <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onItemSelected={onItemSelected} />
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
         {/* eslint-enable max-len */}
+        <PrimaryItem contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmark" onItemSelected={onItemSelected} />
       </div>
       <div className="grw-sidebar-nav-secondary-container">
         {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}

packages/app/src/interfaces/ui.ts

@@ -5,6 +5,7 @@ export const SidebarContentsType = {
   RECENT: 'recent',
   TREE: 'tree',
   TAG: 'tag',
+  BOOKMARKS: 'bookmarks',
 } as const;
 export const AllSidebarContentsType = Object.values(SidebarContentsType);
 export type SidebarContentsType = typeof SidebarContentsType[keyof typeof SidebarContentsType];