Individual style files for core layout

Responsive block and text added Use responsive width hook added Update footer structure Global style for layouts General fixes
Luiyit · Jul 3, 2023 · 5ab47cf · 5ab47cf
1 parent f15bf6a
commit 5ab47cf
Show file tree

Hide file tree

Showing 20 changed files with 473 additions and 282 deletions.
diff --git a/core/components/base/layouts/auth_layout.tsx b/core/components/base/layouts/auth_layout.tsx
@@ -3,11 +3,11 @@ import { Col, Layout, Row } from 'antd';
 import { ComponentProps } from '@interfaces/util'
 import { AuthLayoutStyle, AuthContentImage } from './styled'
 
-interface ContentLayoutProps extends ComponentProps{
+interface AuthLayoutProps extends ComponentProps{
   imageUrl?: string
 }
 
-const ContentLayout: React.FC<ContentLayoutProps> = ({ children, imageUrl }) => {
+const AuthLayout: React.FC<AuthLayoutProps> = ({ children, imageUrl }) => {
 
   return (
     <React.Fragment>
@@ -30,4 +30,4 @@ const ContentLayout: React.FC<ContentLayoutProps> = ({ children, imageUrl }) =>
   )
 }
 
-export default ContentLayout;
+export default AuthLayout;
diff --git a/core/components/base/layouts/footer.tsx b/core/components/base/layouts/footer.tsx
@@ -3,33 +3,23 @@ import { Layout } from 'antd';
 import lc from '@app/config/layout';
 const { Footer: AntFooter } = Layout;
 import { ComponentProps } from '@interfaces/util'
-import { Div, Flex } from '@styled_comps/blocks'
+import { Div } from '@styled_comps/blocks'
 import { footerStyle } from './styles'
 import Container from '@styled_comps/container'
-import { useTheme } from '@core/providers/theme';
-import Text from '@styled_comps/texts';
-import brand from '@app/config/brand';
+import FooterBar from './footer_bar';
 
 interface FooterProps extends ComponentProps{
   useContainer?: boolean;
 }
 
 const Footer: React.FC<FooterProps> = ({ useContainer }) => {
-  const { token } = useTheme()
   const HeaderContainer = useContainer ? Container : Div;
   return (
     <React.Fragment>
       {lc.footer.useFooterWithSider && (
         <AntFooter style={footerStyle}>
-          <HeaderContainer height="100%">
-            <Flex alignItems='center' justifyContent="space-between" height="100%">
-              <Text fontSize={`${token.fontSizeSM}px`} padding="5px 0">
-                © Copyright 2023 {brand.name} All rights reserved.
-              </Text>
-              <Text fontSize={`${token.fontSizeSM}px`} padding="5px 0">
-                {brand.contactEmail}
-              </Text>
-            </Flex>
+          <HeaderContainer height="100%" padding="0 15px">
+            <FooterBar />
           </HeaderContainer>          
         </AntFooter>
       )}

diff --git a/core/components/base/layouts/footer_bar.tsx b/core/components/base/layouts/footer_bar.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Layout, Tooltip } from 'antd';
+import { Flex } from '@styled_comps/blocks'
+import { useTheme } from '@core/providers/theme';
+import Text from '@styled_comps/texts';
+import brand from '@app/config/brand';
+import { MailOutlined } from '@ant-design/icons';
+import GhostBlock from '@styled_comps/ghost_block';
+import lc from '@app/config/layout';
+
+const FooterBar = () => {
+  const { token } = useTheme()
+  return (
+    <Flex alignItems='center' justifyContent="space-between" height={lc.footer.heightInPx}>
+      <Text padding="5px 0">
+        © Copyright 2023 {brand.name} All rights reserved.
+      </Text>
+      <Text padding="5px 0">
+        <GhostBlock displayUntil='md'>
+          <Tooltip placement="top" title={brand.contactEmail}>
+            <MailOutlined />
+          </Tooltip >
+        </GhostBlock>
+
+        <GhostBlock displayFrom='md'>
+          { brand.contactEmail }
+        </GhostBlock>
+      </Text>
+    </Flex>
+  )
+}
+
+export default FooterBar
diff --git a/core/components/base/layouts/header.tsx b/core/components/base/layouts/header.tsx
@@ -1,14 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, Switch } from 'antd';
+import { Layout } from 'antd';
 const { Header: AntHeader } = Layout;
 import { ComponentProps } from '@interfaces/util'
-import { headerStyle } from './styles'
 import Menu from '@base_comps/menu'
 import lc from '@app/config/layout';
-import brand from '@app/config/brand';
-import { Div, Flex } from '@styled_comps/blocks';
+import { Div } from '@styled_comps/blocks';
 import { displayTypes, alignTypes } from '@styled_comps/interfaces';
-import Image from 'next/image'
 import Link from 'next/link'
 import type { MenuProps as AntMenuProps } from 'antd';
 
@@ -28,19 +25,17 @@ interface HeaderProps extends ComponentProps{
   menuTheme?: AntMenuProps['theme'],
   useContainer?: boolean,
   disableDarkMode?: boolean;
+  logo: React.ReactNode
+  favIcon: React.ReactNode
+  fixed?: boolean
 }
 
-const Header: React.FC<HeaderProps> = ({ menuItems, profileMenuItems, showLogo, menuTheme, useContainer, disableDarkMode }) => {
-  const [opacity, setOpacity] = useState<number>(lc.header.fixed.baseOpacity)
+const Header: React.FC<HeaderProps> = ({ menuItems, profileMenuItems, showLogo, menuTheme, useContainer, disableDarkMode, logo, favIcon, fixed }) => {
+  const baseOpacity = lc.header.fixed?.baseOpacity || 1;
+  const [opacity, setOpacity] = useState<number>(baseOpacity)
   const opacityRef = React.useRef(opacity);
   const HeaderContainer = useContainer ? Container : Div;
 
-  const logo = brand.renderLogo ? brand.renderLogo({ className: "main-logo" }) : <Image className="main-logo" src={brand.logo} alt={brand.name} height={lc.header.height * 0.75} />
-
-  const favIcon = brand.renderFav ? 
-    brand.renderFav(lc.header.height - 10, { className: "main-fav-logo" }) : 
-    <Image className="main-fav-logo" src={brand.favLogo} alt={brand.name} height={lc.header.height - 10} />
-
   const { dark } = useTheme();
   const darkTheme = dark && !disableDarkMode
 
@@ -62,14 +57,14 @@ const Header: React.FC<HeaderProps> = ({ menuItems, profileMenuItems, showLogo,
   }
 
   useEffect(() => { 
-    if (!lc.header.fixed) return;
+    if (!fixed) return;
 
     window.addEventListener('scroll', listenScrollEvent)
     return () => window.removeEventListener('scroll', listenScrollEvent)
   }, [])
 
   const dynamicStyle = {
-    ...(!!lc.header.fixed ? { backgroundColor: hexToRgba(lc.header.fixed.bgColor, opacity) } : {})
+    ...(fixed ? { backgroundColor: hexToRgba(lc.header.fixed.bgColor, opacity) } : {})
   }
 
   return (

diff --git a/...omponents/base/layouts/content_layout.tsx → core/components/base/layouts/main_layout.tsx b/...omponents/base/layouts/content_layout.tsx → core/components/base/layouts/main_layout.tsx
@@ -4,42 +4,54 @@ import Header from '@base_comps/layouts/header'
 import Footer from '@base_comps/layouts/footer'
 import Content from '@base_comps/layouts/content'
 import { ComponentProps } from '@interfaces/util'
-import { ContentLayoutStyle } from './styled'
+import MainLayoutStyle from './style/main_style'
 import { generateMenu } from '@core/utils/menu'
 import { MenuType, MenuGeneratorType } from "@core/types/menu";
 import { useSession } from '@core/providers/session';
 import lc from '@app/config/layout';
+import { theme } from 'antd'
+const { useToken } = theme;
+import { useTheme } from '@root/core/providers/theme';
+import { getBrandAssets } from '@core/utils/header'
 
-interface ContentLayoutProps extends ComponentProps{
+interface MainLayoutProps extends ComponentProps{
   template?: 'full-vav' | 'full-sider'
   headerMenu?: MenuType[] | MenuGeneratorType
   profileMenu?: MenuType[] | MenuGeneratorType
   hideHeader?: boolean
   hideFooter?: boolean
+  fixedHeader?: boolean
 }
 
-const ContentLayout: React.FC<ContentLayoutProps> = ({ children, headerMenu, profileMenu, hideHeader, hideFooter }) => {
+const MainLayout: React.FC<MainLayoutProps> = ({ children, headerMenu, profileMenu, hideHeader, hideFooter, fixedHeader }) => {
   const { user } = useSession()
+  const { token } = useToken()
+  const { dark } = useTheme()
+
   const menuItems = generateMenu(headerMenu, user);
   const profileMenuItems = generateMenu(profileMenu, user);
-
+  const { logo, favIcon} = getBrandAssets("main", dark)
+
   return (
     <React.Fragment>
-      <ContentLayoutStyle/>
+      <MainLayoutStyle colorText={token.colorText} />
       <Layout className={`ant-full-content-template ${!!lc.header.fixed ? 'fixed-header' : ''}`}>
         {!hideHeader && (
           <Header 
             menuItems={ menuItems } 
-            showLogo 
             profileMenuItems={profileMenuItems}
             useContainer={lc.header.useContainer}
             disableDarkMode={lc.header.disableDarkMode}
+            fixed={fixedHeader}
+            logo={logo}
+            favIcon={favIcon}
+            showLogo 
           />
         )}
         <Content 
           headerHidden={hideHeader} 
           footerHidden={hideFooter} 
-          disableDarkMode={lc.contentLayout.disableDarkMode}
+          disableDarkMode={lc.mainLayout.disableDarkMode}
         >
           { children }
         </Content>
@@ -50,4 +62,4 @@ const ContentLayout: React.FC<ContentLayoutProps> = ({ children, headerMenu, pro
   )
 }
 
-export default ContentLayout;
+export default MainLayout;
diff --git a/core/components/base/layouts/sider.tsx b/core/components/base/layouts/sider.tsx
@@ -4,31 +4,23 @@ const { Sider: AntSider } = Layout;
 import { ComponentProps } from '@interfaces/util'
 import { siderStyle } from './styles'
 import lc from '@app/config/layout';
-import brand from '@app/config/brand';
 import Menu from '@base_comps/menu'
 import { Div } from '@styled_comps/blocks';
-import Image from 'next/image'
 import Link from 'next/link'
 import { MenuType } from '@core/types/menu';
 import { useTheme } from '@core/providers/theme';
 
 interface SiderProps extends ComponentProps{
-  menuItems?: MenuType[],
+  menuItems?: MenuType[]
   showLogo?: boolean
+  logo: React.ReactNode
+  favIcon: React.ReactNode
 }
 
-const Sider: React.FC<SiderProps> = ({ menuItems, showLogo }) => {
+const Sider: React.FC<SiderProps> = ({ menuItems, showLogo, logo, favIcon }) => {
   const [collapsed, setCollapsed] = useState(false);
   const { dark } = useTheme();
 
-  const logo = brand.renderLogo ? 
-    brand.renderLogo({ className: "main-logo" }): 
-    <Image className="main-logo" src={brand.logo} alt={brand.name} height={lc.header.height * 0.75} />
-
-  const favIcon = brand.renderFav ? 
-    brand.renderFav(lc.header.height - 20, { className: "main-fav-logo" }) : 
-    <Image className="main-fav-logo" src={brand.favLogo} alt={brand.name} height={lc.header.height - 10} />
-
   return (
     <React.Fragment>
       <AntSider 
@@ -44,7 +36,7 @@ const Sider: React.FC<SiderProps> = ({ menuItems, showLogo }) => {
       >
         {showLogo && (
           <Div padding='5px' textAlign='center' height={`${lc.header.height}px`}>
-            <Link href='/' style={{display: "inline-block", fontSize: 0}}>
+            <Link className='logo-link' href='/'>
               { logo }
               { favIcon }
             </Link>

diff --git a/core/components/base/layouts/sider_layout.tsx b/core/components/base/layouts/sider_layout.tsx
@@ -5,11 +5,17 @@ import Sider from '@base_comps/layouts/sider'
 import Footer from '@base_comps/layouts/footer'
 import Content from '@base_comps/layouts/sider_content'
 import { ComponentProps } from '@interfaces/util'
-import { SiderLayoutStyle } from './styled';
+import SiderLayoutStyle from './style/sider_style';
 import { generateMenu } from '@core/utils/menu'
+import { getBrandAssets } from '@core/utils/header'
 import { MenuType, MenuGeneratorType } from "@core/types/menu";
 import { useSession } from '@core/providers/session';
 import lc from '@app/config/layout';
+import { theme } from 'antd'
+const { useToken } = theme;
+import Image from 'next/image'
+import brand from '@app/config/brand';
+import { useTheme } from '@root/core/providers/theme';
 
 interface SiderLayoutProps extends ComponentProps{
   template?: 'full-vav' | 'full-sider'
@@ -23,34 +29,52 @@ interface SiderLayoutProps extends ComponentProps{
 const SiderLayout: React.FC<SiderLayoutProps> = ({ children, siderMenu, headerMenu, profileMenu, template = 'full-vav', hideHeader, hideFooter }) => {
 
   const useFullSider = template === 'full-sider'
+  const { dark } = useTheme()
   const { user } = useSession()
+  const { token } = useToken()
+
   const siderMenuItems = generateMenu(siderMenu, user);
   const headerMenuItems = generateMenu(headerMenu, user);
   const profileMenuItems = generateMenu(profileMenu, user);
+
+  const { logo, favIcon} = getBrandAssets("sider", dark)
 
   return (
     <React.Fragment>
-      <SiderLayoutStyle />
+      <SiderLayoutStyle colorText={token.colorText} />
       <Layout className={`ant-${template}-template`}>
         {!useFullSider && !hideHeader && (
           <Header 
             menuItems={headerMenuItems} 
             profileMenuItems={profileMenuItems} 
             useContainer={lc.header.useContainerOnSider} 
+            logo={logo}
+            favIcon={favIcon}
             showLogo 
           />
         )}
-        {useFullSider && <Sider menuItems={siderMenuItems} showLogo />}
+        {useFullSider && <Sider 
+          menuItems={siderMenuItems} 
+          logo={logo}
+          favIcon={favIcon}
+          showLogo 
+        />}
 
         <Layout>
           {useFullSider && !hideHeader && (
             <Header 
               menuItems={headerMenuItems} 
               profileMenuItems={profileMenuItems} 
               useContainer={lc.header.useContainerOnSider} 
+              logo={logo}
+              favIcon={favIcon}
             />
           )}
-          {!useFullSider && <Sider menuItems={siderMenuItems} />}
+          {!useFullSider && <Sider 
+            menuItems={siderMenuItems} 
+            logo={logo}
+            favIcon={favIcon}
+          />}
 
           <Content headerHidden={hideHeader} footerHidden={hideFooter}>
             { children }

diff --git a/core/components/base/layouts/style/global_style.ts b/core/components/base/layouts/style/global_style.ts
@@ -0,0 +1,16 @@
+import lc, { breakpoints } from '@app/config/layout';
+import styled, { createGlobalStyle  } from 'styled-components';
+import hexToRgba from 'hex-to-rgba';
+
+const globalLayoutStyle = createGlobalStyle`
+  .ant-layout{
+    .ant-layout-header {
+      .ant-menu{
+        background: transparent;
+        border-bottom: none;
+      }
+    }
+  }
+`
+
+export default globalLayoutStyle;