Merge branch 'layout' into master

package.json

@@ -9,16 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "animate.css": "4.1.1",
+    "classnames": "2.5.1",
     "next": "13.5.6",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-feather": "2.0.10"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "typescript": "^5"
   }
 }

src/app/page.tsx

@@ -1,3 +1,10 @@
+import LayoutWrapper from '../layout/components/layout-wrapper';
+import Footer from '../layout/components/footer';
+
 export default function Home() {
-  return <div>main</div>;
+  return (
+    <LayoutWrapper layout='VerticalLayout' transition='fadeIn'>
+      <div>main</div>
+    </LayoutWrapper>
+  );
 }

src/layout/components/footer.tsx

@@ -0,0 +1,26 @@
+// ** Icons Import
+import { Heart } from 'react-feather';
+
+function Footer() {
+  return (
+    <p className='clearfix mb-0'>
+      <span className='float-md-left d-block d-md-inline-block mt-25'>
+        COPYRIGHT © {new Date().getFullYear()}{' '}
+        <a
+          href='https://1.envato.market/pixinvent_portfolio'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Pixinvent
+        </a>
+        <span className='d-none d-sm-inline-block'>, All rights Reserved</span>
+      </span>
+      <span className='float-md-right d-none d-md-block'>
+        Hand-crafted & Made with
+        <Heart size={14} />
+      </span>
+    </p>
+  );
+}
+
+export default Footer;

src/layout/components/layout-wrapper.tsx

@@ -0,0 +1,109 @@
+// ** React Imports
+import { Fragment, useEffect, ReactNode } from 'react';
+
+// ** Third Party Components
+import classnames from 'classnames';
+
+// ** Store & Actions
+// import { useSelector, useDispatch } from 'react-redux'
+// import { handleContentWidth, handleMenuCollapsed, handleMenuHidden } from '@store/actions/layout'
+
+// ** Styles
+import 'animate.css/animate.css';
+
+interface Props {
+  children: ReactNode;
+  layout: string;
+  transition: string;
+  wrapperClass?: string;
+  appLayout?: string;
+  routeMeta?: {
+    authRoute: boolean;
+    naveLink: string;
+  };
+}
+
+function LayoutWrapper(props: Props) {
+  // ** Props
+  const {
+    layout,
+    children,
+    appLayout = '',
+    wrapperClass = '',
+    transition,
+    routeMeta
+  } = props;
+
+  // ** Store Vars
+  //   const dispatch = useDispatch()
+  //   const store = useSelector(state => state)
+  //   const navbarStore = store.navbar
+  //   const contentWidth = store.layout.contentWidth
+
+  //** Vars
+  const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment;
+
+  // ** Clean Up Function
+  //   const cleanUp = () => {
+  //     if (routeMeta) {
+  //       if (routeMeta.contentWidth) {
+  //         dispatch(handleContentWidth('full'))
+  //       }
+  //       if (routeMeta.menuCollapsed) {
+  //         dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed))
+  //       }
+  //       if (routeMeta.menuHidden) {
+  //         dispatch(handleMenuHidden(!routeMeta.menuHidden))
+  //       }
+  //     }
+  //   }
+
+  // ** ComponentDidMount
+  //   useEffect(() => {
+  //     if (routeMeta) {
+  //       if (routeMeta.contentWidth) {
+  //         dispatch(handleContentWidth(routeMeta.contentWidth))
+  //       }
+  //       if (routeMeta.menuCollapsed) {
+  //         dispatch(handleMenuCollapsed(routeMeta.menuCollapsed))
+  //       }
+  //       if (routeMeta.menuHidden) {
+  //         dispatch(handleMenuHidden(routeMeta.menuHidden))
+  //       }
+  //     }
+  //     return () => cleanUp()
+  //   }, [])
+
+  return (
+    <div
+      className={classnames('app-content content overflow-hidden', {
+        [wrapperClass]: wrapperClass
+        // 'show-overlay': navbarStore.query.length
+      })}
+    >
+      <div className='content-overlay'></div>
+      <div className='header-navbar-shadow' />
+      <div
+        className={classnames({
+          'content-wrapper': !appLayout,
+          'content-area-wrapper': appLayout,
+          // 'container p-0': contentWidth === 'boxed',
+          [`animate__animated animate__${transition}`]:
+            transition !== 'none' && transition.length
+        })}
+      >
+        <Tag
+          /*eslint-disable */
+          {...(layout === 'HorizontalLayout' && !appLayout
+            ? { className: classnames({ 'content-body': !appLayout }) }
+            : {})}
+          /*eslint-enable */
+        >
+          {children}
+        </Tag>
+      </div>
+    </div>
+  );
+}
+
+export default LayoutWrapper;