good time to merge and test with Ish

G7DAO · Jan 9, 2025 · d3183d9 · d3183d9
1 parent b3a1846
commit d3183d9
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 27 deletions.
diff --git a/webapps/world-builder-dashboard/src/components/landing/Footer.module.css b/webapps/world-builder-dashboard/src/components/landing/Footer.module.css
@@ -11,27 +11,69 @@
     background: url('../../assets/ftwotf.png') lightgray 50% / cover no-repeat;
 }
 
+.footerMobile {
+    display: flex;
+    padding: 40px 24px 24px 24px;
+    justify-content: left;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 12px 12px 0px 0px;
+    border: 1px solid var(--Gray-true-500, #727272);
+    background: url('../../assets/ftwotf.png') lightgray 50% / cover no-repeat;
+}
+
 .footerContent {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 20px;
+    gap: 40px;
     align-self: stretch;
 }
 
+.footerContentMobile {
+    display: flex;
+    flex-direction: column;
+    min-width: 295px;
+    align-items: flex-start;
+    gap: 40px;
+}
+
 .footerLinks {
     display: flex;
     align-items: flex-start;
     gap: 120px;
 }
 
+.footerLinksMobile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    align-self: stretch;
+}
+
+.footerLinksMobileExpanded {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+}
+
 .footerSection {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
 }
 
+.footerSectionHeaderContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+}
+
 .footerSectionHeader {
     color: #FFF;
     /* Text xl Bold */

diff --git a/webapps/world-builder-dashboard/src/components/landing/Footer.tsx b/webapps/world-builder-dashboard/src/components/landing/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './Footer.module.css'
 import IconDiscord from '@/assets/IconDiscord'
 import IconX from '@/assets/IconX'
@@ -7,17 +7,25 @@ import IconLinkedIn from '@/assets/IconLinkedIn'
 import IconForkTheWorld from '@/assets/IconForkTheWorld'
 import { useNavigate } from 'react-router-dom'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
+import { useMediaQuery } from 'summon-ui/mantine'
+import IconChevronDown from '@/assets/IconChevronDown'
 
 
 const Footer: React.FC = () => {
     const navigate = useNavigate()
+    const smallView = useMediaQuery('(max-width: 750px)')
     const { setSelectedNetworkType } = useBlockchainContext()
     const footerIcons = [
         { component: <IconDiscord />, navigate: () => window.open('/discord', '_blank') },
         { component: <IconX />, navigate: () => window.open('https://x.com/g7_dao', '_blank') },
         { component: <IconGitHub />, navigate: () => window.open('https://github.com/G7DAO', '_blank') },
         { component: <IconLinkedIn />, navigate: () => window.open('https://www.linkedin.com/company/g7dao', '_blank') },
     ];
+    const [collapsedSections, setCollapsedSections] = useState<{ [key: number]: boolean }>({ 0: true, 1: true, 2: true })
+
+    const toggleSection = (index: number) => {
+        setCollapsedSections(prev => ({ ...prev, [index]: !prev[index] }))
+    }
 
     const footerSections = [
         {
@@ -58,32 +66,72 @@ const Footer: React.FC = () => {
     }
 
     return (
-        <div className={styles.layoutFooter}>
-            <div className={styles.footer}>
-                <div className={styles.footerContent}>
-                    <IconForkTheWorld />
-                    <div className={styles.footerLinks}>
-                        {footerSections.map((section, index) => (
-                            <div className={styles.footerSection} key={index}>
-                                <div className={styles.footerSectionHeader}>{section.header}</div>
-                                {section.links.map((link, linkIndex) => (
-                                    <div onClick={() => navigateLink(link)} className={styles.footerSectionLink} key={linkIndex}>
-                                        {link.name}
+        <>
+            {!smallView && (
+                <div className={styles.layoutFooter}>
+                    <div className={styles.footer}>
+                        <div className={styles.footerContent}>
+                            <IconForkTheWorld />
+                            <div className={styles.footerLinks}>
+                                {footerSections.map((section, index) => (
+                                    <div className={styles.footerSection} key={index}>
+                                        <div className={styles.footerSectionHeader}>{section.header}</div>
+                                        {section.links.map((link, linkIndex) => (
+                                            <div onClick={() => navigateLink(link)} className={styles.footerSectionLink} key={linkIndex}>
+                                                {link.name}
+                                            </div>
+                                        ))}
+                                    </div>
+                                ))}
+                            </div>
+                            <div className={styles.footerIcons}>
+                                {footerIcons.map((icon, index) => (
+                                    <div key={index} onClick={icon.navigate} className={styles.footerIcon}>
+                                        {icon.component}
                                     </div>
                                 ))}
                             </div>
-                        ))}
+                        </div>
                     </div>
-                    <div className={styles.footerIcons}>
-                        {footerIcons.map((icon, index) => (
-                            <div key={index} onClick={icon.navigate} className={styles.footerIcon}>
-                                {icon.component}
+                </div>
+            )}
+            {smallView && (
+                <div className={styles.layoutFooter}>
+                    <div className={styles.footerMobile}>
+                        <div className={styles.footerContentMobile}>
+                            <IconForkTheWorld />
+                            <div className={styles.footerLinksMobile}>
+                                {footerSections.map((section, index) => (
+                                    <div className={styles.footerSection} key={index}>
+                                        <div className={styles.footerSectionHeaderContainer} onClick={() => toggleSection(index)}>
+                                            <div className={styles.footerSectionHeader}>{section.header}</div>
+                                            <IconChevronDown 
+                                                stroke='white' 
+                                                style={{ transform: collapsedSections[index] ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease' }} 
+                                            />
+                                        </div>
+                                        {!collapsedSections[index] && ( // Show links only if not collapsed
+                                            section.links.map((link, linkIndex) => (
+                                                <div onClick={() => navigateLink(link)} className={styles.footerSectionLink} key={linkIndex}>
+                                                    {link.name}
+                                                </div>
+                                            ))
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                            <div className={styles.footerIcons}>
+                                {footerIcons.map((icon, index) => (
+                                    <div key={index} onClick={icon.navigate} className={styles.footerIcon}>
+                                        {icon.component}
+                                    </div>
+                                ))}
                             </div>
-                        ))}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
+            )}
+        </>
     )
 }
 

diff --git a/webapps/world-builder-dashboard/src/components/landing/Landing.module.css b/webapps/world-builder-dashboard/src/components/landing/Landing.module.css
@@ -47,7 +47,7 @@ body {
 .navbarSticky {
   position: sticky;
   z-index: 1005;
-  top: 24px;
+  top: 0px;
   padding-top: 24px;
   padding: 12px 12px 12px 16px;
   align-items: flex-start;
@@ -807,7 +807,7 @@ body {
   .navbarSticky {
     position: sticky;
     z-index: 1005;
-    top: 0;
+    top: 0px;
     padding-top: 24px;
     padding: 12px 12px 12px 16px;
     align-items: flex-start;

diff --git a/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx b/webapps/world-builder-dashboard/src/components/landing/Navbar.tsx
@@ -1,6 +1,6 @@
 // Navbar.tsx
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import styles from './Landing.module.css'
 import IconGame7 from '@/assets/IconGame7'
 import IconGame7Logo from '@/assets/IconGame7Logo'
@@ -28,6 +28,7 @@ const NAVBAR_ITEMS = [
 
 const Navbar: React.FC<NavbarProps> = ({ navbarOpen, smallView, setIsNavbarOpen, startBuilding, navigateLink, isSticky }) => {
   const navigate = useNavigate()
+  const location = useLocation()
   return (
     <>
       <div className={`${styles.navbarContainer} ${isSticky ? styles.navbarSticky : ''}`}>
@@ -42,7 +43,7 @@ const Navbar: React.FC<NavbarProps> = ({ navbarOpen, smallView, setIsNavbarOpen,
                 {NAVBAR_ITEMS.map((item, index) => (
                   <div
                     key={index}
-                    className={item.name === 'Home' ? styles.navbarItemHome : styles.navbarItem}
+                    className={((location.pathname === '/' || location.pathname === '') && item.name === 'Home') ? styles.navbarItemHome : styles.navbarItem}
                     onClick={() => {
                       navigateLink(item)
                     }}

diff --git a/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx b/webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx
@@ -11,6 +11,7 @@ import Navbar from '@/components/landing/Navbar'
 import NetworkEssentials from '@/components/landing/NetworksEssentials'
 import { useBlockchainContext } from '@/contexts/BlockchainContext'
 import backgroundImage from "@/assets/G7LandingPageBGDark.jpg";
+import Footer from '@/components/landing/Footer'
 
 const LandingPage: React.FC = () => {
   const navigate = useNavigate()
@@ -93,6 +94,7 @@ const LandingPage: React.FC = () => {
               )}
             </div>
           </div>
+          <Footer />
         </div>
       </>
       )}

diff --git a/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.module.css b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.module.css
@@ -127,6 +127,7 @@ body {
   height: 100svh;
   padding-left: 24px;
   padding-right: 24px;
+  padding-top: 24px;
   flex-direction: column;
   align-items: center;
   background: #171717;

diff --git a/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx b/webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx
@@ -50,7 +50,6 @@ const LandingPage: React.FC<LegalPageProps> = ({legalContent}) => {
               navigateLink={navigateLink}
               isSticky={true}
             />
-            {/* <div className={styles.mainLayout}> */}
             <div className={styles.legalHeader}>
               <div className={styles.headerContainer}>
                 <div className={styles.titleHeader}>
@@ -79,7 +78,6 @@ const LandingPage: React.FC<LegalPageProps> = ({legalContent}) => {
           </div>
         </div>
       </div>
-      {/* </div> */}
     </>
   )
 }