Skip to content

Commit 1467bfb

Browse files
Samiur-SiliconOrchardSamiur-SiliconOrchard
committed
main-layout & header, footer components makes
1 parent fde60f2 commit 1467bfb

File tree

5 files changed

+203
-6
lines changed

5 files changed

+203
-6
lines changed

‎src/components/common/Footers.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {
2+
FacebookOutlined, InstagramOutlined, TwitterOutlined, YoutubeOutlined
3+
} from '@ant-design/icons';
4+
import { Button, Layout, Typography } from 'antd';
5+
import React from 'react';
6+
7+
const { Footer } = Layout;
8+
const { Text } = Typography;
9+
10+
function Footers() {
11+
return (
12+
<Footer className='flex flex-col items-center justify-between md:flex-row px-2 md:px-12 lg:px-24'>
13+
<div className='flex flex-col items-center justify-center md:items-start md:justify-start'>
14+
<Text>{`©️ ${new Date().getFullYear()} ERC-20 Token. All rights reserved.`}</Text>
15+
16+
<div>
17+
<Button type='link'>How to buy?</Button>
18+
<Button type='link'>Privacy and Policy</Button>
19+
<Button type='link'>Terms and Condition</Button>
20+
</div>
21+
</div>
22+
23+
<div className='space-x-4 md:space-x-2'>
24+
<Button type='dashed' shape='circle' icon={<FacebookOutlined />} size='middle' />
25+
<Button type='dashed' shape='circle' icon={<InstagramOutlined />} size='middle' />
26+
<Button type='dashed' shape='circle' icon={<TwitterOutlined />} size='middle' />
27+
<Button type='dashed' shape='circle' icon={<YoutubeOutlined />} size='middle' />
28+
</div>
29+
</Footer>
30+
);
31+
}
32+
33+
export default Footers;

‎src/components/common/Headers.jsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Button, Layout } from 'antd';
2+
import React, { useRef } from 'react';
3+
import { Link } from 'react-router-dom';
4+
5+
const { Header } = Layout;
6+
7+
function Headers() {
8+
const navbarRef = useRef(null);
9+
const hamburgerRef = useRef(null);
10+
11+
const handleToggleNavbar = () => {
12+
navbarRef.current.classList.toggle('flex');
13+
navbarRef.current.classList.toggle('hidden');
14+
hamburgerRef.current.classList.toggle('open');
15+
};
16+
17+
return (
18+
<Header className='h-20 relative container mx-auto'>
19+
{/* flex container */}
20+
<div className='flex items-center justify-between pt-6 md:pt-2'>
21+
{/* header logo */}
22+
<div>
23+
<Link to='/'>
24+
<h1 className='header-logo'>REACT BOILERPLATE</h1>
25+
</Link>
26+
</div>
27+
28+
{/* navbar menu */}
29+
<div className='hidden space-x-4 md:flex'>
30+
<Link to='/'>
31+
<span className='navbar-menu-item'>Home</span>
32+
</Link>
33+
<Link to='/dashboard'>
34+
<span className='navbar-menu-item'>Dashboard </span>
35+
</Link>
36+
<Link to='/services'>
37+
<span className='navbar-menu-item'>Services</span>
38+
</Link>
39+
<Link to='/portfolio'>
40+
<span className='navbar-menu-item'>Portfolio</span>
41+
</Link>
42+
<Link to='/contact'>
43+
<span className='navbar-menu-item'>Contact</span>
44+
</Link>
45+
</div>
46+
47+
{/* login/register button */}
48+
<Link to='/auth/login'>
49+
<Button className='hidden font-bold md:block' type='primary' size='large' shape='round'>
50+
CLICK TO LOGIN
51+
</Button>
52+
</Link>
53+
54+
{/* hamburger icon */}
55+
<button
56+
className='block hamburger md:hidden focus:outline-none'
57+
onClick={handleToggleNavbar}
58+
ref={hamburgerRef}
59+
id='menu-btn'
60+
type='button'
61+
>
62+
<span className='hamburger-top' />
63+
<span className='hamburger-middle' />
64+
<span className='hamburger-bottom' />
65+
</button>
66+
</div>
67+
68+
{/* mobile menu */}
69+
<div className='md:hidden'>
70+
<div
71+
id='menu'
72+
ref={navbarRef}
73+
className='bg-backgroundColorBlack absolute flex-col items-center hidden self-end font-bold mt-6 left-6 right-6 sm:w-auto sm:self-center'
74+
>
75+
<Link to='/'>
76+
<span className='mobile-menu-item'>Home</span>
77+
</Link>
78+
<Link to='/dashboard'>
79+
<span className='mobile-menu-item'>dashboard</span>
80+
</Link>
81+
<Link to='/services'>
82+
<span className='mobile-menu-item'>Services</span>
83+
</Link>
84+
<Link to='/contact'>
85+
<span className='mobile-menu-item'>Contact</span>
86+
</Link>
87+
<Link to='/auth/login'>
88+
<span className='mobile-menu-item'>Login</span>
89+
</Link>
90+
</div>
91+
</div>
92+
</Header>
93+
);
94+
}
95+
96+
export default Headers;

‎src/components/layout/MainLayout.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Layout } from 'antd';
2+
import React from 'react';
3+
import Footers from '../common/Footers';
4+
import Headers from '../common/Headers';
5+
6+
const { Content } = Layout;
7+
8+
function MainLayout({ children }) {
9+
return (
10+
<Layout>
11+
<Headers />
12+
<Content className='min-h-[75vh]'>{ children }</Content>
13+
<Footers />
14+
</Layout>
15+
);
16+
}
17+
18+
export default MainLayout;

‎src/pages/Home.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
2+
import MainLayout from '../components/layout/MainLayout';
23

34
function Home() {
45
window.document.title = 'React App — Home';
56

67
return (
7-
<div className='min-h-screen bg-gray-gradient'>
8+
<MainLayout>
89
<h1 className='text-center text-2xl text-gradient font-bold pt-5'>
910
Welcome! JavaScript React App Boilerplate !!!
1011
</h1>
11-
</div>
12+
</MainLayout>
1213
);
1314
}
1415

‎src/styles.css‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ body {
4141
background: linear-gradient(125.17deg, #272727 0%, #11101d 100%);
4242
}
4343

44+
.white-gradient {
45+
background: rgba(255, 255, 255, 0.6);
46+
filter: blur(750px);
47+
}
4448
.blue-gradient {
4549
background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%);
4650
filter: blur(123px);
@@ -49,10 +53,6 @@ body {
4953
background: linear-gradient(90deg, #f4c4f3 0%, #fc67fa 100%);
5054
filter: blur(900px);
5155
}
52-
.white-gradient {
53-
background: rgba(255, 255, 255, 0.6);
54-
filter: blur(750px);
55-
}
5656

5757
/** Boilerplate Built-In Gradient Colors End */
5858

@@ -98,3 +98,52 @@ body {
9898
}
9999

100100
/** And Design Customize End */
101+
102+
/** Boilerplate Header Style Start */
103+
104+
.header-logo {
105+
@apply text-2xl text-textColorWhite font-bold uppercase transition-all duration-100 hover:text-textColorWhiteHover;
106+
}
107+
108+
.navbar-menu-item {
109+
@apply text-textColorWhite font-bold uppercase transition-all duration-100 hover:text-textColorWhiteHover;
110+
}
111+
112+
.mobile-menu-item {
113+
@apply text-textColorWhite uppercase hover:text-textColorWhiteHover;
114+
}
115+
116+
/* hamburger button */
117+
.hamburger {
118+
@apply cursor-pointer w-[24px] h-[24px] transition-all duration-100 relative;
119+
}
120+
121+
.hamburger-top,
122+
.hamburger-middle,
123+
.hamburger-bottom {
124+
@apply absolute top-0 left-0 w-[24px] h-[2px] bg-backgroundColorWhite rotate-0 transition-all duration-100;
125+
}
126+
127+
.hamburger-middle {
128+
transform: translateY(7px);
129+
}
130+
.hamburger-bottom {
131+
transform: translateY(14px);
132+
}
133+
134+
.open {
135+
transform: rotate(90deg);
136+
transform: translateY(0px);
137+
}
138+
139+
.open .hamburger-top {
140+
transform: rotate(45deg) translateY(6px) translate(6px);
141+
}
142+
.open .hamburger-middle {
143+
display: none;
144+
}
145+
.open .hamburger-bottom {
146+
transform: rotate(-45deg) translateY(6px) translate(-6px);
147+
}
148+
149+
/** Boilerplate Header Style Start */

0 commit comments

Comments
 (0)