Skip to content

Commit 500c3df

Browse files
rupali-yadavrupali-yadav
committed
sidebar setup
1 parent 50a4137 commit 500c3df

10 files changed

Lines changed: 114 additions & 42 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev",
6+
"start": "next dev",
77
"build": "next build",
8-
"start": "next start",
8+
"start-prod": "next start",
99
"lint": "next lint",
1010
"export": "next export",
1111
"storybook": "start-storybook -p 6006",

‎pages/_BLOG_SETUP.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ export const RUPALI: IAuthor = {
2121
export const PRIMARY_NAV = {
2222
// max size 40x40px for default and max width 80px for centered or text
2323
logo: '',
24-
type: NavbarLayouts.DEFAULT,
24+
type: NavbarLayouts.CENTERED,
2525
width: ContainerWidths.DEFAULT,
2626
showThemeSwitch: true,
2727
showSearch: true,
28-
links: [
28+
navLinks: [
2929
{
3030
label: 'Home',
3131
path: '/'
@@ -34,28 +34,28 @@ export const PRIMARY_NAV = {
3434
label: 'About',
3535
path: '/'
3636
},
37-
{
38-
label: 'Contact',
39-
path: '/'
40-
},
4137
{
4238
// for categoriest dont add path and add type: dropdown
4339
label: 'Categories',
4440
type: 'dropdown'
4541
},
42+
{
43+
label: 'Contact',
44+
path: '/'
45+
},
4646
],
47-
socials: [
47+
social: [
4848
{
49-
link: '',
50-
type: ''
49+
link: '/',
50+
icon: 'a'
5151
},
5252
{
53-
link: '',
54-
type: ''
53+
link: '/',
54+
icon: 'b'
5555
},
5656
{
57-
link: '',
58-
type: ''
57+
link: '/',
58+
icon: 'c'
5959
},
6060
]
6161
}

‎pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Home: NextPage = () => {
1616

1717
return (
1818
<div className={combineClasses(classes.home_layout_wrapper, theme === THEMES.DARK ? "bg-darkBlue font-spaceGray" : "bg-offWhite font-spaceGray")}>
19-
<Navbar container={ContainerWidths.DEFAULT} type={NavbarLayouts.DEFAULT} />
19+
<Navbar />
2020
<div className="container">
2121
<FeaturedArticle article={ARTICLES_LIST[0].preview} path={ARTICLES_LIST[0].path} />
2222
{/* main article taking full width*/}

‎src/components/Navbar/Centered.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,25 @@ const CenteredNavbar = ({
1616
return (
1717
<nav className={combineClasses(classes.navbar, classes.shadow, scrolled ? classes.hideNav : " ", theme === THEMES.DARK ? classes.dark : null, "py-10")}>
1818
<div className={combineClasses(classes.navbar__container, container, "px-15")}>
19-
<div
20-
className={combineClasses(classes.mobileBurgerToggle, "mr-10", openSidebar ? classes.mobileBurgerToggle__close : ' ')}
21-
onClick={() => toggleSideMenu()}>
22-
<span></span>
19+
<div className="d-flex ">
20+
<div
21+
className={combineClasses(classes.mobileBurgerToggle, "mr-10", openSidebar ? classes.mobileBurgerToggle__close : ' ')}
22+
onClick={() => toggleSideMenu()}>
23+
<span></span>
24+
</div>
25+
<div className={combineClasses(classes.search_icon_wrapper, 'pt-4')} onClick={() => openSearch()}>
26+
<button>
27+
<img src={(THEME_ICONS as any)[theme].search} width="100%" alt="" />
28+
</button>
29+
</div>
2330
</div>
2431

2532
<Link href="/">
2633
<a className={combineClasses(classes.logo, 'd-mob-none')}></a>
2734
</Link>
2835

2936
<div className="d-flex align-center">
30-
<div className={classes.search_icon_wrapper} onClick={() => openSearch()}>
31-
<button>
32-
<img src={(THEME_ICONS as any)[theme].search} width="100%" alt="" />
33-
</button>
34-
</div>
37+
3538
<button className={combineClasses(classes.theme_switch, "pl-10 pr-0")} onClick={changeTheme}>
3639
<img src={(THEME_ICONS as any)[theme].themeToggle} width="100%" alt="" />
3740
</button>

‎src/components/Navbar/NavSideBar.tsx‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Link from 'next/link';
12
import { useEffect } from 'react';
23
import { THEMES } from '../../shared/enums';
34
import { addBodyNoScroll, combineClasses, removeBodyNoScroll } from '../../utils/utils';
@@ -6,10 +7,11 @@ import classes from './Navbar.module.scss';
67
interface IProps {
78
openSidebar: boolean;
89
theme: THEMES;
9-
closeNavSidebar: () => void
10+
closeNavSidebar: () => void;
11+
navSetup: any;
1012
}
1113

12-
const NavSidebar = ({ openSidebar = false, theme = THEMES.LIGHT, closeNavSidebar }: IProps) => {
14+
const NavSidebar = ({ openSidebar = false, theme = THEMES.LIGHT, closeNavSidebar, navSetup }: IProps) => {
1315

1416
useEffect(() => {
1517
openSidebar
@@ -22,6 +24,8 @@ const NavSidebar = ({ openSidebar = false, theme = THEMES.LIGHT, closeNavSidebar
2224
};
2325
}, [openSidebar]);
2426

27+
// const CATEGORIES = getCategories();
28+
2529

2630
return (
2731
<>
@@ -31,9 +35,42 @@ const NavSidebar = ({ openSidebar = false, theme = THEMES.LIGHT, closeNavSidebar
3135

3236
<aside className={combineClasses(classes.nav_sidebar_wrapper, classes.shadow, openSidebar && classes.open, theme === THEMES.DARK && classes.dark)}>
3337
<div className={combineClasses('d-flex align-center justify-space-between', classes.navSidebarHeader)} onClick={closeNavSidebar}>
34-
<p className='mt-0 mb-0'>menu</p>
38+
<p className='mt-0 mb-0 pt-4 font-light'>menu</p>
3539
<div className={classes.sideNavCloseIcon}><span></span></div>
3640
</div>
41+
<hr />
42+
<div className='my-15'>
43+
{
44+
navSetup.navLinks.map((each: any) => (
45+
each.type !== 'dropdown' ? (
46+
<Link href={each.path}>
47+
<a className='font-16 font-medium d-block my-15'>{each.label}</a>
48+
</Link>
49+
) : <p className='font-16 font-medium'>
50+
{each.label}
51+
</p>
52+
))
53+
}
54+
</div>
55+
<hr />
56+
<div className='my-15'>
57+
<p className='mb-10 font-light'>Follow us : </p>
58+
{
59+
navSetup.social.map((each: any) => (
60+
<a href={each.link} target="_blank" rel="noopener noreferrer" className='font-16 font-medium d-inline-block mr-20 flex-wrap'>{each.icon}</a>
61+
))
62+
}
63+
</div>
64+
<hr />
65+
<div className='my-15'>
66+
<p className='font-14 font-light font-spaceGray mb-5'>Copyright © 2022</p>
67+
<Link href="">
68+
<a className='font-14 font-light font-spaceGray pr-10'>Privacy Policy</a>
69+
</Link>
70+
<Link href="">
71+
<a className='font-14 font-light font-spaceGray'>Terms and Conditions</a>
72+
</Link>
73+
</div>
3774
</aside>
3875
</>
3976
)

���src/components/Navbar/Navbar.module.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,20 +153,19 @@
153153
left: 0;
154154
width: 100%;
155155
height: 100vh;
156-
max-width: 380px;
156+
max-width: 300px;
157157
background-color: $white;
158158
transition: all 0.5s ease-in-out;
159159
transform: translateX(-110%);
160160
z-index: 13;
161161
color: $black;
162-
padding: 10px 15px;
162+
padding: 20px 15px 10px;
163163

164164
&.open {
165165
transform: translateX(0%);
166166
}
167167

168168
.navSidebarHeader {
169-
border-bottom: solid 1px $spaceGray;
170169
padding-bottom: 10px;
171170
margin-bottom: 10px;
172171
}
@@ -209,4 +208,8 @@
209208
}
210209
}
211210
}
211+
212+
@include mobile{
213+
max-width: 380px;
214+
}
212215
}

‎src/components/Navbar/index.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import { useEffect, useState } from "react";
55
import { addBodyNoScroll, getTheme, isMobileDevice, removeBodyNoScroll } from "../../utils/utils";
66
import NavSidebar from './NavSideBar';
77
import Search from "../Search";
8+
import { PRIMARY_NAV } from "../../../pages/_BLOG_SETUP"
89

910
interface iNavbar {
10-
type?: NavbarLayouts;
11-
showSocialMedia?: boolean
12-
container?: ContainerWidths;
13-
// setShowSearch?: any
11+
showSocialMedia?: boolean;
12+
container?:ContainerWidths;
1413
}
1514

16-
const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, container = ContainerWidths.DEFAULT }: iNavbar) => {
15+
const Navbar = ({ showSocialMedia = true, container = ContainerWidths.DEFAULT }: iNavbar) => {
1716
const [theme, setTheme] = useState(THEMES.LIGHT);
1817
const [isMobile, setIsMobile] = useState(false);
1918
const [openSidebar, setOpenSidebar] = useState(false);
@@ -72,7 +71,7 @@ const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, containe
7271
<>
7372
{
7473
isMobile ? <SimpleNavbar
75-
container={container}
74+
container={ContainerWidths.DEFAULT}
7675
showSocial={showSocialMedia}
7776
openSearch={openSearch}
7877
scrolled={scrolled}
@@ -82,11 +81,11 @@ const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, containe
8281
openSidebar={openSidebar}
8382
/> :
8483
(() => {
85-
switch (type) {
84+
switch (PRIMARY_NAV.type) {
8685
case NavbarLayouts.DEFAULT:
8786
return (
8887
<SimpleNavbar
89-
container={container}
88+
container={container || PRIMARY_NAV.width}
9089
showSocial={showSocialMedia}
9190
openSearch={openSearch}
9291
scrolled={scrolled}
@@ -98,7 +97,7 @@ const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, containe
9897
case NavbarLayouts.CENTERED:
9998
return (
10099
<CenteredNavbar
101-
container={container}
100+
container={container || PRIMARY_NAV.width}
102101
showSocial={showSocialMedia}
103102
openSearch={openSearch}
104103
scrolled={scrolled}
@@ -110,7 +109,7 @@ const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, containe
110109
default:
111110
return (
112111
<SimpleNavbar
113-
container={container}
112+
container={container || PRIMARY_NAV.width}
114113
showSocial={showSocialMedia}
115114
openSearch={openSearch}
116115
scrolled={scrolled}
@@ -124,7 +123,7 @@ const Navbar = ({ type = NavbarLayouts.DEFAULT, showSocialMedia = true, containe
124123
})()
125124
}
126125

127-
<NavSidebar openSidebar={openSidebar} theme={theme} closeNavSidebar={() => setOpenSidebar(false)} />
126+
<NavSidebar openSidebar={openSidebar} theme={theme} closeNavSidebar={() => setOpenSidebar(false)} navSetup={PRIMARY_NAV} />
128127
{showSearch && <Search setShowSearch={setShowSearch} />}
129128
</>
130129
)

‎src/styles/utils/_flexbox.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ $displays: flex, inline-flex, block, inline, inline-block;
22
$directions: row, column, row-r, column-r;
33
$justifys: start, end, center, space-between, space-around, space-evenly;
44
$aligns: start, end, center, baseline, stretch;
5+
$wraps: wrap, no-wrap;
6+
7+
// flex wraps
8+
@each $each in $wraps {
9+
.flex-#{$each} {
10+
flex-wrap: $each;
11+
}
12+
}
513

614
// display flex
715
// d-flex, d-inline-flex, d-block

‎src/styles/utils/_misc.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727
z-index: 12;
2828
}
2929

30+
hr{
31+
background: none;
32+
border: none;
33+
border-top: solid 1px $spaceGray;
34+
}
35+
3036
@-webkit-keyframes fadeIn {
3137
0% {
3238
opacity: 0;
@@ -42,4 +48,8 @@
4248
100% {
4349
opacity: 0.4;
4450
}
51+
}
52+
53+
.cursor-pointer {
54+
cursor: pointer;
4555
}

‎src/utils/utils.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,16 @@ export const getArticleDetails = () => {
6666
const router = useRouter()
6767
const articlePath = router.pathname;
6868
return ARTICLES.filter(each => each.path === articlePath)[0]
69+
}
70+
71+
export const getCategories = (): string[] => {
72+
let categories:string[] = [];
73+
const splits = ARTICLES.map(each => each.path.split('/'));
74+
splits.forEach(each => {
75+
const lastItem = each.length;
76+
if(each.indexOf('blog') + 1 !== lastItem - 1){
77+
categories.push(each[each.indexOf('blog') + 1])
78+
}
79+
})
80+
return categories
6981
}

0 commit comments

Comments
 (0)