diff --git a/client/layout/global-sidebar/footer.tsx b/client/layout/global-sidebar/footer.tsx
new file mode 100644
index 0000000000000..c093ffc074f81
--- /dev/null
+++ b/client/layout/global-sidebar/footer.tsx
@@ -0,0 +1,62 @@
+import { LocalizeProps } from 'i18n-calypso';
+import { FC } from 'react';
+import AsyncLoad from 'calypso/components/async-load';
+import Gravatar from 'calypso/components/gravatar';
+import SidebarFooter from 'calypso/layout/sidebar/footer';
+import { UserData } from 'calypso/lib/user/user';
+
+const CustomReaderIcon = () => (
+
+);
+export const GlobalSidebarFooter: FC< {
+ translate: LocalizeProps[ 'translate' ];
+ user?: UserData;
+} > = ( { translate, user } ) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+};
diff --git a/client/layout/global-sidebar/index.jsx b/client/layout/global-sidebar/index.jsx
index 1c6f67ba1b846..78d4c2a8a5a7e 100644
--- a/client/layout/global-sidebar/index.jsx
+++ b/client/layout/global-sidebar/index.jsx
@@ -4,13 +4,16 @@ import { useSelector } from 'react-redux';
import GlobalSidebarHeader from 'calypso/layout/global-sidebar/header';
import useSiteMenuItems from 'calypso/my-sites/sidebar/use-site-menu-items';
import { getIsRequestingAdminMenu } from 'calypso/state/admin-menu/selectors';
+import { getCurrentUser } from 'calypso/state/current-user/selectors';
import Sidebar from '../sidebar';
+import { GlobalSidebarFooter } from './footer';
import './style.scss';
const GlobalSidebar = ( { children, onClick = undefined, className = '', ...props } ) => {
const menuItems = useSiteMenuItems();
const isRequestingMenu = useSelector( getIsRequestingAdminMenu );
const translate = useTranslate();
+ const currentUser = useSelector( getCurrentUser );
/**
* If there are no menu items and we are currently requesting some,
@@ -40,6 +43,7 @@ const GlobalSidebar = ( { children, onClick = undefined, className = '', ...prop
{ children }
+
);
};
diff --git a/client/layout/global-sidebar/menu-items/help-center/help-center.jsx b/client/layout/global-sidebar/menu-items/help-center/help-center.jsx
new file mode 100644
index 0000000000000..f85510ae9b855
--- /dev/null
+++ b/client/layout/global-sidebar/menu-items/help-center/help-center.jsx
@@ -0,0 +1,52 @@
+//import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { HelpCenter } from '@automattic/data-stores';
+import {
+ useDispatch as useDataStoreDispatch,
+ useSelect as useDateStoreSelect,
+} from '@wordpress/data';
+import { Icon, help } from '@wordpress/icons';
+import classnames from 'classnames';
+//import { useRef } from 'react';
+//import { useSelector } from 'react-redux';
+//import { getSectionName } from 'calypso/state/ui/selectors';
+import SidebarMenuItem from '../menu-item';
+
+const HELP_CENTER_STORE = HelpCenter.register();
+
+const SidebarHelpCenter = ( { tooltip, tooltipPlacement } ) => {
+ //const helpIconRef = useRef();
+ //const sectionName = useSelector( getSectionName );
+
+ const helpCenterVisible = useDateStoreSelect(
+ ( select ) => select( HELP_CENTER_STORE ).isHelpCenterShown(),
+ []
+ );
+ const { setShowHelpCenter } = useDataStoreDispatch( HELP_CENTER_STORE );
+
+ const handleToggleHelpCenter = () => {
+ // TODO: track this event when sidebar dev is ready
+ // recordTracksEvent( `calypso_inlinehelp_${ helpCenterVisible ? 'close' : 'show' }`, {
+ // force_site_id: true,
+ // location: 'help-center',
+ // section: sectionName,
+ // } );
+
+ setShowHelpCenter( ! helpCenterVisible );
+ };
+
+ return (
+ <>
+ }
+ />
+
+ );
+};
+
+export default SidebarHelpCenter;
diff --git a/client/layout/global-sidebar/menu-items/menu-item.jsx b/client/layout/global-sidebar/menu-items/menu-item.jsx
index a3dba42c2bd48..610c38a1953d7 100644
--- a/client/layout/global-sidebar/menu-items/menu-item.jsx
+++ b/client/layout/global-sidebar/menu-items/menu-item.jsx
@@ -9,6 +9,7 @@ const SidebarMenuItem = forwardRef(
tipTarget,
onClick,
tooltip,
+ tooltipPlacement,
icon,
className,
isActive,
@@ -45,7 +46,7 @@ const SidebarMenuItem = forwardRef(
'is-active': isActive,
'has-unseen': hasUnseen,
'sidebar__item--always-show-content': alwaysShowContent,
- 'tooltip tooltip-bottom': tooltip,
+ [ `tooltip tooltip-${ tooltipPlacement || 'bottom' }` ]: tooltip,
} );
const attributes = {
diff --git a/client/layout/global-sidebar/style.scss b/client/layout/global-sidebar/style.scss
index 05a1a400903b9..263a289bb6ec6 100644
--- a/client/layout/global-sidebar/style.scss
+++ b/client/layout/global-sidebar/style.scss
@@ -7,6 +7,7 @@
position: relative;
top: 0;
transition: all 220ms ease-out;
+ background-color: var(--studio-black);
ul {
height: 100%;
@@ -41,6 +42,14 @@
right: unset;
}
}
+ .tooltip-top {
+ &::after {
+ right: unset;
+ bottom: unset;
+ left: 0;
+ top: -30px;
+ }
+ }
.sidebar__header {
align-items: center;
@@ -121,6 +130,37 @@
}
}
+ .sidebar__footer {
+ display: flex;
+ align-items: center;
+ padding: 16px 24px 16px 24px;
+ border-color: var(--studio-gray-90);
+ border-top-style: solid;
+ border-top-width: 1px;
+ .sidebar__menu-icon {
+ margin-right: 0;
+ }
+ .sidebar__footer-link {
+ display: flex;
+ align-items: center;
+ margin-left: 20px;
+ height: 40px;
+ &:first-child {
+ margin-left: 4px;
+ }
+ }
+ .sidebar__item-help {
+ display: flex;
+ align-items: center;
+ margin-left: 20px;
+ height: 40px;
+ cursor: pointer;
+ svg {
+ fill: var(--studio-white);
+ }
+ }
+ }
+
.sidebar-notifications {
.sidebar__menu-icon.sidebar_svg-notifications {
fill: var(--color-sidebar-background);