Skip to content

Commit 3bc23d9

Browse files
author
DEVfancybear
committed
create component sidebar
1 parent f89ceb0 commit 3bc23d9

File tree

1 file changed

+156
-0
lines changed

1 file changed

+156
-0
lines changed

src/components/ShopSideBar.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from "react";
2+
const ShopSidebar = () => {
3+
return (
4+
<div className="leftbar p-r-20 p-r-0-sm">
5+
<h4 className="m-text14 p-b-7">Categories</h4>
6+
<ul className="p-b-54">
7+
<li className="p-t-4">
8+
<a href="#" className="s-text13 active1">
9+
All
10+
</a>
11+
</li>
12+
<li className="p-t-4">
13+
<a href="#" className="s-text13">
14+
Women
15+
</a>
16+
</li>
17+
<li className="p-t-4">
18+
<a href="#" className="s-text13">
19+
Men
20+
</a>
21+
</li>
22+
<li className="p-t-4">
23+
<a href="#" className="s-text13">
24+
Kids
25+
</a>
26+
</li>
27+
<li className="p-t-4">
28+
<a href="#" className="s-text13">
29+
Accesories
30+
</a>
31+
</li>
32+
</ul>
33+
34+
<h4 className="m-text14 p-b-32">Filters</h4>
35+
<div className="filter-price p-t-22 p-b-50 bo3">
36+
<div className="m-text15 p-b-17">Price</div>
37+
<div className="wra-filter-bar">
38+
<div id="filter-bar" />
39+
</div>
40+
<div className="flex-sb-m flex-w p-t-16">
41+
<div className="w-size11">
42+
<button className="flex-c-m size4 bg7 bo-rad-15 hov1 s-text14 trans-0-4">
43+
Filter
44+
</button>
45+
</div>
46+
<div className="s-text3 p-t-10 p-b-10">
47+
Range: $<span id="value-lower">610</span> - $
48+
<span id="value-upper">980</span>
49+
</div>
50+
</div>
51+
</div>
52+
<div className="filter-color p-t-22 p-b-50 bo3">
53+
<div className="m-text15 p-b-12">Color</div>
54+
<ul className="flex-w">
55+
<li className="m-r-10">
56+
<input
57+
className="checkbox-color-filter"
58+
id="color-filter1"
59+
type="checkbox"
60+
name="color-filter1"
61+
/>
62+
<label
63+
className="color-filter color-filter1"
64+
htmlFor="color-filter1"
65+
/>
66+
</li>
67+
<li className="m-r-10">
68+
<input
69+
className="checkbox-color-filter"
70+
id="color-filter2"
71+
type="checkbox"
72+
name="color-filter2"
73+
/>
74+
<label
75+
className="color-filter color-filter2"
76+
htmlFor="color-filter2"
77+
/>
78+
</li>
79+
<li className="m-r-10">
80+
<input
81+
className="checkbox-color-filter"
82+
id="color-filter3"
83+
type="checkbox"
84+
name="color-filter3"
85+
/>
86+
<label
87+
className="color-filter color-filter3"
88+
htmlFor="color-filter3"
89+
/>
90+
</li>
91+
<li className="m-r-10">
92+
<input
93+
className="checkbox-color-filter"
94+
id="color-filter4"
95+
type="checkbox"
96+
name="color-filter4"
97+
/>
98+
<label
99+
className="color-filter color-filter4"
100+
htmlFor="color-filter4"
101+
/>
102+
</li>
103+
<li className="m-r-10">
104+
<input
105+
className="checkbox-color-filter"
106+
id="color-filter5"
107+
type="checkbox"
108+
name="color-filter5"
109+
/>
110+
<label
111+
className="color-filter color-filter5"
112+
htmlFor="color-filter5"
113+
/>
114+
</li>
115+
<li className="m-r-10">
116+
<input
117+
className="checkbox-color-filter"
118+
id="color-filter6"
119+
type="checkbox"
120+
name="color-filter6"
121+
/>
122+
<label
123+
className="color-filter color-filter6"
124+
htmlFor="color-filter6"
125+
/>
126+
</li>
127+
<li className="m-r-10">
128+
<input
129+
className="checkbox-color-filter"
130+
id="color-filter7"
131+
type="checkbox"
132+
name="color-filter7"
133+
/>
134+
<label
135+
className="color-filter color-filter7"
136+
htmlFor="color-filter7"
137+
/>
138+
</li>
139+
</ul>
140+
</div>
141+
<div className="search-product pos-relative bo4 of-hidden">
142+
<input
143+
className="s-text7 size6 p-l-23 p-r-50"
144+
type="text"
145+
name="search-product"
146+
placeholder="Search Products..."
147+
/>
148+
<button className="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
149+
<i className="fs-12 fa fa-search" aria-hidden="true" />
150+
</button>
151+
</div>
152+
</div>
153+
);
154+
};
155+
156+
export default ShopSidebar;

0 commit comments

Comments
 (0)