Add "hide the footer" option

Author: k.golikov

src/hooks/useAppSettings.ts

@@ -7,7 +7,8 @@ import { useEffect, useMemo } from 'react';
 const initialState: AppSettings = {
     theme: SpecialAppTheme.AUTO,
     isErudaEnabled: false,
-    doShowHiddenMenuItems: false
+    doShowHiddenMenuItems: false,
+    isFooterHidden: false
 };
 
 export const useAppSettingsState = () => {

src/layouts/appLayout/AppLayout.tsx

@@ -5,16 +5,24 @@ import styles from './AppLayout.module.scss';
 import AppHeader from './components/appHeader/AppHeader';
 import AppSider from './components/appSider/AppSider';
 import AppFooter from './components/appFooter/AppFooter';
+import useAppSettings from '../../hooks/useAppSettings';
+import useAppLocation from '../../hooks/useAppLocation';
+import { routes } from '../../constants/router/routes';
 
 const AppLayout: FunctionComponent = ({ children }) => {
+    const { isFooterHidden } = useAppSettings();
+    const appRoute = useAppLocation();
+
+    const isFooterShown = !isFooterHidden || appRoute === routes.root;
+
     return (
         <Layout className={styles.container}>
             <AppHeader />
             <Layout className={styles.mainLayout}>
                 <AppSider />
                 <Content className={styles.contentContainer}>{children}</Content>
             </Layout>
-            <AppFooter />
+            {isFooterShown && <AppFooter />}
         </Layout>
     );
 };

src/layouts/appLayout/components/appFooter/AppFooter.module.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/main';
+
 .container {
     background: #212121 !important;
     color: white !important;
@@ -8,10 +10,31 @@
     align-items: center;
     gap: 16px;
 
+    padding-left: 26px;
+    padding-right: 26px;
+
+    justify-content: space-between;
+
+    @include mediaSM {
+        justify-content: flex-start;
+    }
+
+    @include mediaLG {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+
     .copyright {
         margin-right: 10px;
     }
 
+    .socials {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 16px;
+    }
+
     .link {
         &,
         & > * {

src/layouts/appLayout/components/appFooter/AppFooter.tsx

@@ -1,23 +1,28 @@
-import React from 'react';
-import { Footer } from 'antd/lib/layout/layout';
+import React, { FunctionComponent } from 'react';
+import { BasicProps, Footer } from 'antd/lib/layout/layout';
 import styles from './AppFooter.module.scss';
 import moment from 'moment';
 import ExternalLink from '../../../../components/ExternalLink';
 import { GithubFilled } from '@ant-design/icons';
 import { ReactComponent as TelegramLogoDark } from '../../../../assets/img/telegram-logo-dark-2.svg';
+import classNames from 'classnames';
 
 const currentYear = moment().year();
 
-const AppFooter = () => {
+type Props = BasicProps;
+
+const AppFooter: FunctionComponent<Props> = ({ className, ...props }) => {
     return (
-        <Footer className={styles.container}>
+        <Footer className={classNames(styles.container, className)} {...props}>
             <div className={styles.copyright}>Kirill Golikov © {currentYear}</div>
-            <ExternalLink href="https://github.com/MRGRD56">
-                <GithubFilled className={styles.link} />
-            </ExternalLink>
-            <ExternalLink href="https://t.me/MRGRD56">
-                <TelegramLogoDark className={styles.link} />
-            </ExternalLink>
+            <div className={styles.socials}>
+                <ExternalLink href="https://github.com/MRGRD56">
+                    <GithubFilled className={styles.link} />
+                </ExternalLink>
+                <ExternalLink href="https://t.me/MRGRD56">
+                    <TelegramLogoDark className={styles.link} />
+                </ExternalLink>
+            </div>
         </Footer>
     );
 };

src/layouts/pages/pageContainer/PageContainer.tsx

@@ -11,6 +11,7 @@ export enum PageTag {
 }
 
 export interface PageContainerProps extends Omit<SpaceProps, 'title'> {
+    contentClassName?: string;
     title?: ReactNode;
     description?: ReactNode;
     titleExtra?: ReactNode;
@@ -35,8 +36,18 @@ const getTagNodes = (key: number | string): Readonly<Record<PageTag, ReactNode>>
 const renderTag = (tag: PageTag, index: number) => getTagNodes(index)[tag];
 
 const PageContainer: FunctionComponent<PageContainerProps> = (props) => {
-    const { title, description, titleExtra, tags, noPadding, noContentPadding, children, className, ...restProps } =
-        props;
+    const {
+        title,
+        description,
+        titleExtra,
+        tags,
+        noPadding,
+        noContentPadding,
+        children,
+        className,
+        contentClassName,
+        ...restProps
+    } = props;
 
     const renderedTags = useMemo(() => tags?.map(renderTag), [tags]);
 
@@ -61,7 +72,7 @@ const PageContainer: FunctionComponent<PageContainerProps> = (props) => {
             )}
             {description && <Paragraph>{description}</Paragraph>}
 
-            <div className={styles.contentContainer}>{children}</div>
+            <div className={classNames(styles.contentContainer, contentClassName)}>{children}</div>
         </div>
     );
 };

src/pages/rootPage/RootPage.module.scss

@@ -9,3 +9,21 @@
         opacity: 1;
     }
 }
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.contentContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.footer {
+    margin-left: -15px;
+    margin-right: -15px;
+    margin-bottom: -8px;
+}

src/pages/rootPage/RootPage.tsx

@@ -4,21 +4,30 @@ import PageContainer, { PageTag } from '../../layouts/pages/pageContainer/PageCo
 import { ReactComponent as ForkMeOnGitHub } from './assets/forkMeOnGitHub.svg';
 import styles from './RootPage.module.scss';
 import ExternalLink from '../../components/ExternalLink';
+import { Col } from 'antd';
 
 const RootPage: FunctionComponent = () => {
+    // const {isFooterHidden} = useAppSettings();
+
     return (
         <>
             <ExternalLink className={styles.forkMeOnGitHub} href="https://github.com/MRGRD56/mrgrd56.github.io">
                 <ForkMeOnGitHub />
             </ExternalLink>
 
-            <PageContainer tags={[PageTag.WIP]}>
-                <Paragraph>
-                    Hello! Maybe one day I will write something here 🙂 <br />
-                    But you can check out other sections, look at the menu on the{' '}
-                    <span className="d-none d-lg-inline">left</span>
-                    <span className="d-lg-none">right</span>!
-                </Paragraph>
+            <PageContainer tags={[PageTag.WIP]} contentClassName={styles.container}>
+                <Col className={styles.contentContainer}>
+                    <Paragraph>
+                        Hello! Maybe one day I will write something here 🙂 <br />
+                        But you can check out other sections, look at the menu on the{' '}
+                        <span className="d-none d-lg-inline">left</span>
+                        <span className="d-lg-none">right</span>!
+                    </Paragraph>
+                </Col>
+
+                {/*{isFooterHidden && (*/}
+                {/*    <AppFooter className={styles.footer}/>*/}
+                {/*)}*/}
             </PageContainer>
         </>
     );

src/pages/settingsPage/SettingsPage.tsx

@@ -53,6 +53,10 @@ const SettingsPage: FunctionComponent = () => {
                     />
                     <span className="ms-3">Show hidden menu items</span>
                 </label>
+                <label>
+                    <Switch checked={appSettings.isFooterHidden} onChange={handleAppSettingChange('isFooterHidden')} />
+                    <span className="ms-3">Hide the footer</span>
+                </label>
             </Col>
         </PageContainer>
     );

src/types/AppSettings.ts

@@ -4,6 +4,7 @@ interface AppSettings {
     theme: SelectableAppTheme;
     isErudaEnabled: boolean;
     doShowHiddenMenuItems: boolean;
+    isFooterHidden: boolean;
 }
 
 export default AppSettings;