Add Global sidebar footer (#87576)

* Port the Global Sidebar Footer from the PR: #86766 * Port Help Center from the PR: #86766 * JS to TS * Add Global Sidebar Footer * Remove help icon * Add tooltips * Add background-color
Automattic · Feb 19, 2024 · 256fb64 · 256fb64
1 parent 0714648
commit 256fb64
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 1 deletion.
diff --git a/client/layout/global-sidebar/footer.tsx 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 = () => (
+	<svg
+		className="sidebar__menu-icon sidebar_svg-reader"
+		fill="none"
+		height="24"
+		viewBox="4 4 24 24"
+		width="24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<clipPath id="a">
+			<path d="m4 11.2002h24v10.2857h-24z"></path>
+		</clipPath>
+		<g clipPath="url(#a)">
+			<path
+				d="m4.94437 16.8443-.94437-.0656v-1.4979l1.05696-.0515c.73758-2.4238 2.27248-3.924 4.78852-4.0248 2.48152-.0961 4.13592 1.2541 5.05502 3.6099.3317-.1946.7077-.297 1.0903-.297s.7586.1024 1.0903.297c.9604-2.3863 2.6355-3.7505 5.1722-3.6005 2.4632.1406 3.9591 1.6408 4.6828 4.0177l1.057.0492v1.444c-.0528.0304-.0873.0726-.1149.0679-.6893-.1054-.9007.211-1.0615.8861-.586 2.4589-2.7872 3.9732-5.3538 3.7927-2.2977-.1618-4.2302-2.1097-4.5381-4.5475-.0359-.2323-.1505-.4444-.3239-.5995-.1734-.155-.3945-.2431-.625-.249-.2239.01-.4376.0984-.6051.2505-.1674.152-.2783.3582-.314.5839-.3332 2.5785-2.3506 4.4983-4.8115 4.5756-2.60796.0821-4.67824-1.608-5.20213-4.245-.01149-.1313-.05974-.2509-.0988-.3962zm5.05505 3.0942c.93708.0075 1.83898-.3643 2.50778-1.034.6689-.6696 1.0503-1.5824 1.0606-2.5384.0049-.9553-.3621-1.8736-1.0204-2.5531s-1.5541-1.0646-2.4905-1.0708c-.93734-.0075-1.83926.3647-2.50784 1.0349s-1.04921 1.5836-1.05831 2.5398c-.00302.4737.08568.9433.261 1.382.17532.4386.43381.8376.76065 1.1741s.7156.6038 1.14397.7866c.42836.1829.88789.2776 1.35223.2789zm11.96208 0c.9375 0 1.8366-.3798 2.4997-1.0558.6631-.6761 1.0359-1.593 1.0365-2.5494-.0048-.956-.381-1.871-1.046-2.5446-.665-.6735-1.5646-1.0507-2.5017-1.0488-.9374 0-1.8366.3797-2.4997 1.0557-.6631.6761-1.0359 1.5931-1.0365 2.5494.0021.4744.0958.9437.2757 1.3811s.4424.8344.7727 1.1683.7219.5982 1.1523.7777c.4304.1796.8912.2709 1.3562.2687z"
+				fill="#fff"
+			></path>
+		</g>
+	</svg>
+);
+export const GlobalSidebarFooter: FC< {
+	translate: LocalizeProps[ 'translate' ];
+	user?: UserData;
+} > = ( { translate, user } ) => {
+	return (
+		<SidebarFooter>
+			<a
+				href="/read"
+				className="sidebar__footer-link tooltip tooltip-top"
+				title={ translate( 'Reader' ) }
+				data-tooltip={ translate( 'Reader' ) }
+			>
+				<CustomReaderIcon />
+			</a>
+			<a
+				href="/me"
+				className="sidebar__footer-link tooltip tooltip-top"
+				title={ translate( 'Profile' ) }
+				data-tooltip={ translate( 'Profile' ) }
+			>
+				<Gravatar user={ user } size={ 20 } imgSize={ 20 } />
+			</a>
+			<AsyncLoad
+				require="./menu-items/help-center/help-center"
+				tooltip={ translate( 'Help' ) }
+				tooltipPlacement="top"
+				placeholder={
+					<div className="link-help">
+						<span className="help"></span>
+					</div>
+				}
+			/>
+		</SidebarFooter>
+	);
+};
diff --git 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 }
 				</Sidebar>
 			</div>
+			<GlobalSidebarFooter user={ currentUser } translate={ translate } />
 		</div>
 	);
 };

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
@@ -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 (
+		<>
+			<SidebarMenuItem
+				onClick={ handleToggleHelpCenter }
+				className={ classnames( 'sidebar__item-help', {
+					'is-active': helpCenterVisible,
+				} ) }
+				tooltip={ tooltip }
+				tooltipPlacement={ tooltipPlacement }
+				icon={ <Icon icon={ help } size={ 28 } /> }
+			/>
+		</>
+	);
+};
+
+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
@@ -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
@@ -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);