App component update; support reduced-motion

pages/next.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Head from 'next/head'
+
 import { App } from '../src/components/App'
 import { Page } from '../src/components/Page'
 import menuModel from '../src/models/menu'
@@ -13,19 +14,18 @@ const Index = (props) => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         menuPadding={true}
+        layout={'thin'}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <div className={'content content_thin'}>
-            <Page
-                showSocialShare={true}
-            >
-                {props.content}
-            </Page>
-        </div>
+        <Page
+            showSocialShare={true}
+        >
+            {props.content}
+        </Page>
     </App>
 )
 

src/components/App/index.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react'
 import dynamic from 'next/dynamic'
+import cx from 'classnames'
+
 import { Footer } from '../Footer'
 import Comments from '../Comments'
+import { useReducedMotion } from '../../hooks/useReducedMotion'
 
 const Header = dynamic(() => import('./Header'), {
     ssr: false,
@@ -9,31 +12,46 @@ const Header = dynamic(() => import('./Header'), {
 
 import '../../style/style.scss'
 
-export const App = ({ children, menu, showAuthor, menuPadding }) => (
-    <div className="body-wrapper theme-default">
-        <header>
-            <div className="navigation">
-                <div className="navigation__body">
-                    <Header
-                        menuItems={menu.items}
-                    />
+export interface IAppProps {
+    menu: any
+    showAuthor: boolean
+    menuPadding: boolean
+    layout?: 'full' | 'wide' | 'thin'
+}
+
+export const App: React.FC<IAppProps> = props => {
+    const layout = props.layout ? props.layout : 'full'
+    const motionDisabled = useReducedMotion()
+    
+    return (
+        <div className="body-wrapper theme-default">
+            <header>
+                <div className="navigation">
+                    <div className="navigation__body">
+                        <Header
+                            menuItems={props.menu.items}
+                        />
+                    </div>
                 </div>
-            </div>
-        </header>
+            </header>
 
-        <main className="body-wrapper__content">
-            <section className={`content content_full ${menuPadding ? 'content--padding-top--menu' : ''}`}>
-                {children}
-            </section>
+            <main className="body-wrapper__content">
+                <section className={cx('content', `content_${layout}`, {
+                    'content--padding-top--menu': props.menuPadding,
+                    'reduced-motion': motionDisabled,
+                })}>
+                    {props.children}
+                </section>
 
-            <Comments />
-        </main>
+                <Comments />
+            </main>
 
-        <Footer
-            showAuthor={showAuthor}
-            address=" г. Шлиссельбург ул. 18 января д. 3"
-            telephone="+7 (81362) 76-312"
-            email="hudozka@gmail.com"
-        />
-    </div>
-)
+            <Footer
+                showAuthor={props.showAuthor}
+                address=" г. Шлиссельбург ул. 18 января д. 3"
+                telephone="+7 (81362) 76-312"
+                email="hudozka@gmail.com"
+            />
+        </div>
+    )
+}

src/style/content.scss

@@ -40,6 +40,10 @@
   animation: smallSlideInFromTop 350ms ease-out;
 }
 
+.content.reduced-motion {
+  animation: none;
+}
+
 @media screen and (max-width: var(--mobile-width)) {
   --content-mobile: 95%;