feat(layout): add popover for new journal entry

lang/default.json

@@ -1905,6 +1905,9 @@
   "Xi40U9": {
     "defaultMessage": "This action cannot be undone. Are you sure you want to delete this collection?"
   },
+  "Xj0yv9": {
+    "defaultMessage": "Write Articles"
+  },
   "XlfiKR": {
     "defaultMessage": "Must be between 2-20 characters long. Only letters letters, numbers and underline are allowed."
   },
@@ -2911,6 +2914,9 @@
     "defaultMessage": "announcements",
     "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
   },
+  "subQNF": {
+    "defaultMessage": "New Journal"
+  },
   "sy+pv5": {
     "defaultMessage": "Email"
   },

lang/en.json

@@ -1905,6 +1905,9 @@
   "Xi40U9": {
     "defaultMessage": "This action cannot be undone. Are you sure you want to delete this collection?"
   },
+  "Xj0yv9": {
+    "defaultMessage": "Write Articles"
+  },
   "XlfiKR": {
     "defaultMessage": "Must be between 2-20 characters long. Only letters letters, numbers and underline are allowed."
   },
@@ -2911,6 +2914,9 @@
     "defaultMessage": "announcements",
     "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
   },
+  "subQNF": {
+    "defaultMessage": "New Journal"
+  },
   "sy+pv5": {
     "defaultMessage": "Email"
   },

lang/zh-Hans.json

@@ -1905,6 +1905,9 @@
   "Xi40U9": {
     "defaultMessage": "操作无法撤销，确认删除选集吗？"
   },
+  "Xj0yv9": {
+    "defaultMessage": "写文章"
+  },
   "XlfiKR": {
     "defaultMessage": "2-20 个字符，仅支持英文小写字母、数字或下划线"
   },
@@ -2911,6 +2914,9 @@
     "defaultMessage": "社区公告",
     "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
   },
+  "subQNF": {
+    "defaultMessage": "发动态"
+  },
   "sy+pv5": {
     "defaultMessage": "邮箱"
   },

lang/zh-Hant.json

@@ -1905,6 +1905,9 @@
   "Xi40U9": {
     "defaultMessage": "操作無法撤銷，確認刪除選集嗎？"
   },
+  "Xj0yv9": {
+    "defaultMessage": "寫文章"
+  },
   "XlfiKR": {
     "defaultMessage": "2-20 個字元，僅支持英文小寫字母、數字或下劃線"
   },
@@ -2911,6 +2914,9 @@
     "defaultMessage": "社區公告",
     "description": "src/components/Dialogs/BillboardDialog/Content.tsx"
   },
+  "subQNF": {
+    "defaultMessage": "發動態"
+  },
   "sy+pv5": {
     "defaultMessage": "電子郵件"
   },

src/components/Layout/SideNav/Activity.tsx

@@ -0,0 +1,28 @@
+import { FormattedMessage } from 'react-intl'
+
+import { ReactComponent as IconComment } from '@/public/static/icons/24px/comment.svg'
+import { ReactComponent as IconEdit } from '@/public/static/icons/24px/edit.svg'
+import { PATHS } from '~/common/enums'
+import { Icon } from '~/components/Icon'
+import { Menu } from '~/components/Menu'
+
+const ActivityPopover: React.FC = () => {
+  return (
+    <Menu>
+      <Menu.Item
+        text={<FormattedMessage defaultMessage="New Journal" id="subQNF" />}
+        icon={<Icon icon={IconComment} size={20} />}
+        is="link"
+      />
+
+      <Menu.Item
+        text={<FormattedMessage defaultMessage="Write Articles" id="Xj0yv9" />}
+        icon={<Icon icon={IconEdit} size={20} />}
+        href={PATHS.ME_DRAFT_NEW}
+        is="link"
+      />
+    </Menu>
+  )
+}
+
+export default ActivityPopover

src/components/Layout/SideNav/index.tsx

@@ -94,7 +94,7 @@ const SideNavMenu = () => {
             activeIcon={<Icon icon={IconNavUserActive} size={32} />}
             active={isInMe}
             canScrollTop={false}
-            aira-haspopup="menu"
+            aria-haspopup="menu"
             ref={ref}
             testId={TEST_ID.SIDE_NAV_MY_PAGE}
           />

src/stories/components/ActivityPopover/ActivityPopover.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { ReactComponent as IconNavCreate } from '@/public/static/icons/24px/nav-create.svg'
+import { Dropdown, Icon } from '~/components'
+import Activity from '~/components/Layout/SideNav/Activity'
+import NavListItem from '~/components/Layout/SideNav/NavListItem'
+
+export default {
+  title: 'Components/Layout/SideNav/Activity',
+  component: Activity,
+} satisfies Meta<typeof Activity>
+
+const Template: StoryFn = () => {
+  return (
+    <Dropdown
+      content={
+        <section>
+          <Activity />
+        </section>
+      }
+      placement="right-start"
+      offset={[-16, 16]}
+    >
+      {({ openDropdown, ref }) => (
+        <NavListItem
+          onClick={openDropdown}
+          name={<FormattedMessage defaultMessage="My Page" id="enMIYK" />}
+          icon={<Icon icon={IconNavCreate} size={32} />}
+          activeIcon={<Icon icon={IconNavCreate} size={32} />}
+          active={false}
+          canScrollTop={false}
+          aria-haspopup="menu"
+          ref={ref}
+        />
+      )}
+    </Dropdown>
+  )
+}
+
+export const Popover = Template.bind({})