fix: sharebutton visible on desktop

demo/src/Components/DocPage/index.stories.tsx

@@ -14,7 +14,7 @@ import {
 import {configure as configureUikit} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 
-import {updateBodyClassName} from '../utils';
+import {updateBodyClassName, useMobile} from '../utils';
 
 import {getContent} from './data';
 import './index.scss';
@@ -224,6 +224,7 @@ const DocPageDemo = (
     const subscribe = useSubscribe();
     const bookmarks = useBookmarks();
     const notification = useNotification();
+    const mobileView = useMobile();
     const search = useSearchResults(args['Search'] || '');
     const pdf = usePdf(args['Pdf'] || '');
 
@@ -246,8 +247,8 @@ const DocPageDemo = (
         theme,
         textSize,
         singlePage,
+        isMobile: mobileView,
     };
-
     Object.assign(
         props,
         ...[

demo/src/Components/LeadingPage/index.stories.tsx

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 import {DocLeadingPage, DocLeadingPageData, Theme} from '@diplodoc/components';
 import cn from 'bem-cn-lite';
 
-import {updateBodyClassName} from '../utils';
+import {updateBodyClassName, useMobile} from '../utils';
 
 import pageContent from './page.json';
 
@@ -14,19 +14,20 @@ type Args = {
 };
 
 const DocLeadingPageDemo = (args: Args) => {
-    const isMobile = args['Mobile'];
     const theme = args['Theme'];
     const router = {pathname: '/docs/compute'};
+    const mobileView = useMobile();
 
     useEffect(() => {
         updateBodyClassName(theme);
     }, [theme]);
 
     return (
-        <div className={isMobile === 'true' ? 'mobile' : 'desktop'}>
+        <div className={mobileView ? 'mobile' : 'desktop'}>
             <div className={layoutBlock('content')}>
                 <DocLeadingPage
                     {...(pageContent as DocLeadingPageData)}
+                    isMobile={mobileView}
                     wideFormat={true}
                     router={router}
                 />

demo/src/Components/utils.ts

@@ -1,4 +1,5 @@
 import {Theme} from '@diplodoc/components';
+import {useCallback, useEffect, useState} from 'react';
 
 export function updateBodyClassName(theme: Theme) {
     const bodyEl = document.body;
@@ -10,3 +11,31 @@ export function updateBodyClassName(theme: Theme) {
     bodyEl.classList.toggle('g-root_theme_light', theme === 'light');
     bodyEl.classList.toggle('g-root_theme_dark', theme === 'dark');
 }
+
+const isBrowser = () => typeof document !== 'undefined';
+
+function getMobileView() {
+    if (!isBrowser()) {
+        return false;
+    }
+
+    return document.body.clientWidth < 768;
+}
+
+export function useMobile() {
+    const [mobileView, setMobileView] = useState<boolean>(getMobileView());
+
+    const onResizeHandler = useCallback(() => {
+        setMobileView(getMobileView());
+    }, []);
+
+    useEffect(onResizeHandler, [onResizeHandler]);
+
+    useEffect(() => {
+        window.addEventListener('resize', onResizeHandler);
+
+        return () => window.removeEventListener('resize', onResizeHandler);
+    }, [onResizeHandler]);
+
+    return mobileView;
+}

src/components/DocLeadingPage/DocLeadingPage.tsx

@@ -9,6 +9,7 @@ import {DocPageTitle} from '../DocPageTitle';
 import {HTML} from '../HTML';
 import {Text} from '../Text';
 import {Notification, NotificationProps} from '../Notification';
+import {ShareButton} from '../ShareButton';
 
 import './DocLeadingPage.scss';
 
@@ -25,6 +26,7 @@ export interface DocLeadingPageProps extends DocLeadingPageData, NotificationPro
     tocTitleIcon?: React.ReactNode;
     useMainTag?: boolean;
     legacyToc?: boolean;
+    isMobile?: boolean;
 }
 
 export interface DocLinkProps {
@@ -118,6 +120,7 @@ export const DocLeadingPage: React.FC<DocLeadingPageProps> = ({
     legacyToc,
     notification,
     notificationCb,
+    isMobile,
 }) => {
     const modes = {
         'regular-page-width': !wideFormat,
@@ -138,6 +141,7 @@ export const DocLeadingPage: React.FC<DocLeadingPageProps> = ({
             <DocLayout.Center>
                 <Notification notification={notification} notificationCb={notificationCb} />
                 <ContentWrapper className={b('main')} useMainTag={useMainTag}>
+                    {isMobile && <ShareButton className={b('share-button')} title={title} />}
                     <DocPageTitle stage={toc.stage} className={b('title')}>
                         <HTML>{title}</HTML>
                     </DocPageTitle>

src/components/DocPage/DocPage.scss

@@ -184,11 +184,6 @@
         &:hover::before {
             background-color: transparent;
         }
-
-        // ShareButton in title is currently only available on mobile devices.
-        @media (min-width: map.get(variables.$screenBreakpoints, 'md')) {
-            display: none;
-        }
     }
 
     &__content {

src/components/DocPage/DocPage.tsx

@@ -78,6 +78,7 @@ export interface DocPageProps extends DocPageData, DocSettings, NotificationProp
     pdfLink?: string;
     onMiniTocItemClick?: (event: MouseEvent) => void;
     useMainTag?: boolean;
+    isMobile?: boolean;
 }
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
@@ -403,9 +404,9 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
     }
 
     private renderTitle() {
-        const {title, headerHeight, meta, bookmarkedPage, onChangeBookmarkPage} = this.props;
+        const {title, meta, bookmarkedPage, onChangeBookmarkPage, isMobile} = this.props;
         const withBookmarks = onChangeBookmarkPage;
-        const withShare = Number(headerHeight) > 0 && !this.showMiniToc;
+        const withShare = isMobile;
 
         if (!title) {
             return null;