Merge pull request #36 from Brahmware:add-rajhans

Update: Responsive footer
Brahmware · Oct 7, 2023 · 77ec978 · 77ec978
2 parents eb6bb7f + c47fa65
commit 77ec978
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 35 deletions.
diff --git a/src/containers/Flamingo/NavBar/LinkHome/index.tsx b/src/containers/Flamingo/NavBar/LinkHome/index.tsx
@@ -1,11 +1,30 @@
 import { styled, useMediaQuery, useTheme } from '@mui/material';
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
 import React from 'react';
 import IMSLogoFull from '@icons/logo/IMSLogoFull';
 import IMSLogoMedium from '@icons/logo/IMSLogoMedium';
 import IMSLogoSmall from '@icons/logo/IMSLogoSmall';
 
-const Logo = styled(Link)(({ theme }) => ({
+interface LinkHomeProps extends Omit<LinkProps, 'href'> {
+  children?: React.ReactNode;
+};
+
+const LinkHome: React.FC<LinkHomeProps> = (props) => {
+
+  return (
+    <Link
+      {...props}
+      href="/"
+      scroll
+    >
+      <IMSLogoFull />
+      <IMSLogoMedium />
+      <IMSLogoSmall />
+    </Link>
+  )
+}
+
+export default styled(LinkHome)(({ theme }) => ({
   width: theme.Widths.navbar.linkHome,
   height: '100%',
   display: 'flex',
@@ -19,21 +38,5 @@ const Logo = styled(Link)(({ theme }) => ({
 
   '@media (max-width: 765px)': {
     width: theme.Widths.navbar.linkHomeSmall,
-  }
-}));
-
-const LinkHome = () => {
-
-  return (
-    <Logo
-      href="/"
-      scroll
-    >
-      <IMSLogoFull />
-      <IMSLogoMedium />
-      <IMSLogoSmall />
-    </Logo>
-  )
-}
-
-export default LinkHome
+  },
+}));
diff --git a/src/containers/Flamingo/NavBar/index.tsx b/src/containers/Flamingo/NavBar/index.tsx
@@ -78,7 +78,7 @@ const Navbar: FC = () => {
       open={isOpen}
     >
       <BarContent className='bar-content'>
-        <LinkHome />
+        <LinkHome onClick={() => setIsOpen(false)} />
         <ShowLive />
         <Toolbar />
       </BarContent>

diff --git a/src/containers/Flamingo/NavMenu/Megamenu/NavGroups/NavList.tsx b/src/containers/Flamingo/NavMenu/Megamenu/NavGroups/NavList.tsx
@@ -13,7 +13,7 @@ const NavList = ({ items, ...props }: NavListProps) => {
       {...props}
       className={props.className + ' nav__item'}
     >
-      {items.map(({ title, link }, index) => (
+      {items?.map(({ title, link }, index) => (
         <GroupItem
           key={index}
           title={title}

diff --git a/src/containers/Footer/Privacy/index.tsx b/src/containers/Footer/Privacy/index.tsx
@@ -9,6 +9,10 @@ const StyledLink = styled(Link)(({ theme }) => ({
   '&:first-of-type': {
     marginLeft: 0,
   },
+
+  '@media screen and (max-width: 960px)': {
+    margin: theme.Spaces.xxs + ' ' + theme.Spaces.xs,
+  },
 }));
 
 interface PrivacyProps extends BoxProps {
@@ -80,5 +84,4 @@ export default styled(Privacy)(({ theme }) => ({
     justifyContent: 'center',
     alignSelf: 'center',
   },
-
 }));
diff --git a/src/containers/Footer/TechProvider/index.tsx b/src/containers/Footer/TechProvider/index.tsx
@@ -47,7 +47,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
   },
 
   '@media screen and (max-width: 510px)': {
-    display: 'none',
+    height: '1px',
+    width: '1rem',
+    backgroundColor: theme.palette.divider,
+    margin: theme.Spaces.xxs + ' 0'
   },
 }));
 

diff --git a/src/helpers/NavMapProvider.tsx b/src/helpers/NavMapProvider.tsx
@@ -15,7 +15,7 @@ interface NavMapProviderProps {
 }
 
 export const NavMapProvider: React.FC<NavMapProviderProps> = ({ children }) => {
-  const [data, setData] = React.useState<NavMap[]>();
+  const [data, setData] = React.useState<NavMap[]>([]);
 
   const fetchData = React.useCallback(async () => {
     const response = await fetch('/api/website/navigation-map');

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -7,24 +7,23 @@ import { styled } from '@mui/material';
 import Footer from '@containers/Footer';
 import { NavMapProvider } from '@helpers/NavMapProvider';
 
-const StyledMain = styled('main')<MainLayoutProps>(({ theme }) => ({
-  width: '100%',
-  height: '100%',
-}));
 
 const MainLayout: React.FC<MainLayoutProps> = ({ children, ...props }) => {
   return (
     <NavMapProvider>
       <NavigationMenuStateProvider>
         <Navbar />
         <NavMenu />
-        <StyledMain {...props}>
+        <main {...props}>
           {children}
-        </StyledMain>
+        </main>
         <Footer />
       </NavigationMenuStateProvider>
     </NavMapProvider>
   )
 };
 
-export default MainLayout;
+export default styled(MainLayout)(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+}));
diff --git a/src/pages/join/index.tsx b/src/pages/join/index.tsx
@@ -9,9 +9,7 @@ const Join: NextPage = () => {
       <Head>
         <title>Join IMS : Indian Media Syndicate</title>
       </Head>
-      <MainLayout>
-        <h1>Join</h1>
-      </MainLayout>
+      <h1>Join</h1>
     </React.Fragment>
   );
 };