Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tailwind to mainLayOut and NavBar #75

Closed
wants to merge 4 commits into from
Closed

Add tailwind to mainLayOut and NavBar #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f08906
add tailwind to mainLayOut and NavBar
Jan 31, 2024
16346d0
Use a standard size
Feb 12, 2024
2e2b148
used a different name without the ant part
Feb 12, 2024
dcfe5b2
Merge branch 'main' into tailwind
mayura-andrew Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/components/Layout/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { type ReactNode } from 'react';
import { Layout } from 'antd';

import FooterComponent from './Footer/Footer';
import styles from './MainLayout.module.css';
import Navbar from './Navbar/Navbar';

const { Header, Footer, Content } = Layout;
Expand All @@ -14,11 +13,11 @@ interface LayoutProps {

const MainLayout: React.FC<LayoutProps> = ({ children }) => (
<Layout>
<Header className={styles.antLayoutHeader}>
<Header className="bg-white z-[1000] shadow-sm ">
<Navbar />
</Header>
<Content className={styles.antLayoutContent}>{children}</Content>
<Footer className={styles.antLayoutFooter}>
<Content className=" bg-white">{children}</Content>
<Footer className=" bg-['#F8FDFF']">
<FooterComponent />
</Footer>
</Layout>
Expand Down
60 changes: 32 additions & 28 deletions src/components/Layout/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import {
FacebookFilled,
} from '@ant-design/icons';
import { Button, Col, Row, Space, Typography } from 'antd';

import styles from './Navbar.module.css';
import MenuDrawer from '../MenuDrawer/MenuDrawer';
import LoginModal from '../../LoginModal';
import RegisterModal from '../../RegisterModal';
Expand Down Expand Up @@ -68,106 +66,112 @@ const Navbar: React.FC = () => {

return (
<>
<Row align={'middle'} justify={'start'}>
<Row align={'middle'} justify={'start'}
className='max-w-[1350px] mx-auto flex items-center w-full py-2 px-auto'
>
<Col xs={20} md={2} lg={4} xl={4} xxl={4}>
<img
className={styles.navbarLogoContainer}
className=" w-[80px] sm:w-[95px] lg:w-[154px]"
src="./scholarx-logo.png"
/>
</Col>
<AlignRightOutlined
className={styles.menuIcon}
onClick={() => {
setOpenMenu(true);
}}
/>

<Col md={16} lg={12} xl={14} xxl={16}>
<Space direction="horizontal">
<div className={styles.navbarItemContainer}>
{/* navbarItemContainer */}
<div className="hidden xl:flex gap-7">
<a href="https://sefglobal.org/">
<Text className={styles.antTypography}>Home</Text>
<Text className="antTypography text-primary text-sm font-light">Home</Text>
</a>
<a href="" target="_blank" rel="noreferrer">
<Text className={styles.antTypography}>About</Text>
<Text className="antTypography text-primary text-sm font-light">About</Text>
</a>
<a href="" target="_blank" rel="noreferrer">
<Text className={styles.antTypography}>Initiatives</Text>
<Text className="antTypography text-primary text-sm font-light">Initiatives</Text>
</a>
<a href="" target="_blank" rel="noreferrer">
<Text className={styles.antTypography}>Join Us</Text>
<Text className="antTypography text-primary text-sm font-light">Join Us</Text>
</a>
<Button
className="mr-5 mb-5 w-40 h-9 font-sans text-black-400 py-1 px-4 rounded"
className="w-40 h-9 font-sans text-black-400 rounded mt-3"
onClick={handleMentorRegistration}
>
Become a Mentor
</Button>
</div>
</Space>
</Col>
<Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>
{/* socialMediaContainer */}
<Col md={4} lg={4} xl={3} className="hidden xl:flex">
<Space direction="horizontal">
<a
href="https://www.facebook.com/sustainableeducationfoundation/"
target="_blank"
rel="noreferrer"
>
<Button className={styles.antButton} shape="circle">
<FacebookFilled className={styles.antIcon} />
<Button className="antButton" shape="circle">
<FacebookFilled className="text-base text-icon-color" />
</Button>
</a>
<a
href="https://twitter.com/goasksef"
target="_blank"
rel="noreferrer"
>
<Button className={styles.antButton} shape="circle">
<TwitterOutlined className={styles.antIcon} />
<Button className="antButton" shape="circle">
<TwitterOutlined className=" text-base text-icon-color" />
</Button>
</a>
<a
href="https://www.linkedin.com/company/sefglobal/"
target="_blank"
rel="noreferrer"
>
<Button className={styles.antButton} shape="circle">
<LinkedinFilled className={styles.antIcon} />
<Button className="antButton" shape="circle">
<LinkedinFilled className="text-base text-icon-color" />
</Button>
</a>
<a
href="https://www.instagram.com/sefglobal/"
target="_blank"
rel="noreferrer"
>
<Button className={styles.antButton} shape="circle">
<InstagramOutlined className={styles.antIcon} />
<Button className="antButton" shape="circle">
<InstagramOutlined className="text-base text-icon-color" />
</Button>
</a>
{user === null ? (
<>
<Button
className={styles.loginButton}
className="antTypography loginButton"
onClick={handleLoginModalOpen}
>
Login
</Button>
<Button
className={styles.loginButton}
className="antTypography loginButton"
onClick={handleRegisterModalOpen}
>
Register
</Button>
</>
) : (
<Button
className={styles.loginButton}
className="antTypography loginButton"
onClick={handleLogoutModalOpen}
>
Logout
</Button>
)}
</Space>
</Col>
<AlignRightOutlined
// menu icon
className=" text-base flex justify-end xl:hidden mx-auto"
onClick={() => {
setOpenMenu(true);
}}
/>
</Row>
<MenuDrawer
openMenu={openMenu}
Expand Down
7 changes: 4 additions & 3 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ export const theme = {
extend: {
colors: {
'primary-blue': '#1677FF',
'darkmod-blue': '#3D317C', //dark moderate blue
'desatdark-blue':'#6D7893', //desaturated dark blue
},
'icon-color': '#525F7F',
'primary': '#6D7893'
'darkmod-blue': '#3D317C',
'desatdark-blue':'#6D7893',
},
};
export const plugins = [];
Loading