Skip to content

Commit d517ca9

Browse files
ameen4455ameen4455
authored
Merge pull request #7 from ameen4455/Navbar
Added navbar
2 parents 6a40ae6 + 7d21b32 commit d517ca9

File tree

5 files changed

+81
-40
lines changed

5 files changed

+81
-40
lines changed

‎src/components/common/Layout.js‎

Lines changed: 77 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
77
import { Navigation } from ".";
88
import { Footer } from ".";
99
import config from "../../utils/siteConfig";
10+
import { useState } from "react";
1011

1112
// Styles
1213
//import "../../styles/app.css";
@@ -20,6 +21,7 @@ import config from "../../utils/siteConfig";
2021
*
2122
*/
2223
const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
24+
const [isOpen, setIsOpen] = useState(false);
2325
const site = data.allGhostSettings.edges[0].node;
2426
const localData = data.site.siteMetadata;
2527
const twitterUrl = site.twitter
@@ -37,62 +39,100 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
3739
<body className={bodyClass} />
3840
</Helmet>
3941

42+
{isOpen && (
43+
<div className="w-full h-full lg:hidden bg-bg-light-grey fixed top-0 z-50">
44+
<img
45+
src="/images/icons/close.png"
46+
onClick={() => setIsOpen(false)}
47+
className="h-10 mt-4 ml-4 cursor-pointer"
48+
/>
49+
<nav id="site-nav" className="flex flex-col mt-8 items-center">
50+
{/* The navigation items as setup in Ghost */}
51+
<Navigation
52+
data={localData.navigation}
53+
navClass="inline-block py-7 px-8 text-body-grey hover:opacity-100 hover:no-underline"
54+
/>
55+
</nav>
56+
</div>
57+
)}
58+
4059
<div className="flex flex-col justify-between">
4160
<div className="viewport-top">
4261
{/* The main header section on top of the screen */}
43-
<header
44-
className="bg-center bg-cover py-5 text-white bg-bg-black"
45-
46-
>
47-
<div id="container" className="my-0 mx-auto px-3.5">
62+
<header className="bg-center bg-cover py-5 text-white bg-bg-black">
63+
<div className="md:mx-auto max-w-screen-xl px-4">
4864
<div className="flex items-center justify-between" id="site-mast">
49-
<div id="site-mast-left">
50-
<Link to="/">
51-
{isHome ? (
52-
null
53-
) : (
54-
<img
55-
id="site-logo"
56-
className="h-12 ml-5 md:ml-48 "
57-
src="/images/logo.svg"
58-
alt={site.title}
59-
/>
60-
)}
61-
</Link>
65+
<Link to="/">
66+
{isHome ? null : (
67+
<img
68+
id="site-logo"
69+
className="h-12"
70+
src="/images/logo.svg"
71+
alt={site.title}
72+
/>
73+
)}
74+
</Link>
75+
76+
<div className="lg:hidden">
77+
<img
78+
onClick={() => setIsOpen(true)}
79+
src="/images/icons/menu.png"
80+
className="h-10 cursor-pointer"
81+
/>
6282
</div>
63-
<div id="site-mast-right" className="flex items-center last:pr-0">
64-
<nav id="site-nav" className="flex items-center justify-between mx-0 mb-0 mt-4 pr-48">
65-
<div className="site-nav-left">
66-
{/* The navigation items as setup in Ghost */}
67-
<Navigation data={localData.navigation} navClass="inline-block py-1 px-8 text-body-grey hover:opacity-100 hover:no-underline" />
68-
</div>
83+
<div
84+
id="site-mast-right"
85+
className="lg:flex items-center hidden"
86+
>
87+
<nav id="site-nav" className="flex items-center">
88+
{/* The navigation items as setup in Ghost */}
89+
<Navigation
90+
data={localData.navigation}
91+
navClass="inline-block py-1 px-8 text-body-grey hover:opacity-100 hover:no-underline"
92+
/>
6993
</nav>
7094
</div>
7195
</div>
7296
{isHome ? (
73-
<div id="site-banner" className="my-0 ml-5 md:ml-48 mx-auto">
74-
<img src="/images/logo.svg" className="h-28 mt-28"/>
75-
<h1 id=" site-banner-title" className="mt-12 font-bold text-2xl leading-7 not-italic max-w-lg">{localData.description}</h1>
76-
<p id="site-banner-desc" className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic">{localData.subDescription}</p>
77-
<p id="site-banner-desc" className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic mb-14">{localData.cta}</p>
97+
<div id="site-banner" className="my-0 mx-auto">
98+
<img src="/images/logo.svg" className="h-28 mt-28" />
99+
<h1
100+
id=" site-banner-title"
101+
className="mt-12 font-bold text-2xl leading-7 not-italic max-w-lg"
102+
>
103+
{localData.description}
104+
</h1>
105+
<p
106+
id="site-banner-desc"
107+
className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic"
108+
>
109+
{localData.subDescription}
110+
</p>
111+
<p
112+
id="site-banner-desc"
113+
className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic mb-14"
114+
>
115+
{localData.cta}
116+
</p>
78117
<div id="action" className="mb-40">
79-
<button class="bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">Donate</button>
80-
<button class="border border-iff-orange hover:text-white text-iff-orange font-normal text-xl leading-6 not-italic py-2 ml-8 rounded w-36 h-14">Subscribe</button>
118+
<button class="bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
119+
Donate
120+
</button>
121+
<button class="border border-iff-orange hover:text-white text-iff-orange font-normal text-xl leading-6 not-italic py-2 ml-8 rounded w-36 h-14">
122+
Subscribe
123+
</button>
81124
</div>
82-
83125
</div>
84126
) : null}
85127
</div>
86128
</header>
87129

88130
<main id="site-main">
89131
{/* All the main content gets inserted here, index.js, post.js */}
90-
{children}
132+
{children}
91133
</main>
92134
</div>
93135
<Footer />
94-
95-
96136
</div>
97137
</>
98138
);
@@ -120,7 +160,7 @@ const DefaultLayoutSettingsQuery = (props) => (
120160
}
121161
}
122162
site {
123-
...LocalSettingsFields
163+
...LocalSettingsFields
124164
}
125165
file(relativePath: { eq: "ghost-icon.png" }) {
126166
childImageSharp {
@@ -134,3 +174,4 @@ const DefaultLayoutSettingsQuery = (props) => (
134174
);
135175

136176
export default DefaultLayoutSettingsQuery;
177+

‎src/components/common/Navigation.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Navigation = ({ data, navClass }) => (
3535
);
3636
}
3737
})}
38-
<div className={navClass}>
38+
{/* <div className={navClass}>
3939
<div class="relative flex items-center h-8 rounded-full focus-within:shadow-lg bg-bg-dark-grey overflow-hidden">
4040
<div class="grid place-items-center h-full w-12 text-gray-300">
4141
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -49,7 +49,7 @@ const Navigation = ({ data, navClass }) => (
4949
id="search"
5050
placeholder="Search" />
5151
</div>
52-
</div>
52+
</div> */}
5353
</>
5454
);
5555

‎src/pages/about_us.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { Layout } from "../components/common";
44

55
const Index = () => {
66
return (
7-
<>
7+
<Layout>
88
<TopSection />
99
<ImpactsAndProgress />
1010
<PeopleAtIff />
11-
</>
11+
</ Layout>
1212
);
1313
};
1414

‎static/images/icons/close.png‎

650 Bytes
Loading

‎static/images/icons/menu.png‎

295 Bytes
Loading

0 commit comments

Comments
 (0)