Skip to content

Commit 5638139

Browse files
witty123witty123
authored
Merge pull request #208 from vdvibhu20/nav-accounts
Nav accounts
2 parents 1c7b5fe + 892f944 commit 5638139

File tree

9 files changed

+199
-4
lines changed

9 files changed

+199
-4
lines changed

‎examples/components/nav-account.hbs

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<header>
2+
<nav class="main-nav">
3+
<span class="hamburger-parent">
4+
<i class="hamburger fas fa-bars"></i>
5+
</span>
6+
<span class="logo-parent">
7+
<a class="logo-link" href="/">
8+
<img src="/images/online-logo.png" alt="online-logo" class="nav-logo pointer">
9+
</a>
10+
</span>
11+
12+
<div class="round-img">
13+
<img src="/images/code-red.svg" alt="">
14+
</div>
15+
16+
<div class="card">
17+
<div class="top-offset"></div>
18+
<div class="nav-info">
19+
<div class="flex-row justify-content-end">
20+
<span class="pointer red">MY PROFILE</span>
21+
</div>
22+
<div class="separator"></div>
23+
24+
<div class="flex-row justify-content-end">
25+
<span class="pointer">MY ADDRESSES</span>
26+
</div>
27+
28+
<div class="separator"></div>
29+
30+
<div class="flex-row justify-content-end">
31+
<span class="pointer">MY APPS</span>
32+
</div>
33+
34+
<div class="separator"></div>
35+
<div class="flex-row justify-content-end">
36+
<span class="pointer">MY CLIENTS</span>
37+
</div>
38+
<div class="separator"></div>
39+
<div class="flex-row justify-content-end faded">
40+
<span class="pointer">LOGOUT</span>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<ul class="nav-list">
46+
<a href="https://codingblocks.com/classroom-courses">
47+
<li class="nav-items pointer">
48+
CLASSROOM COURSES
49+
</li>
50+
</a>
51+
52+
<a href="https://online.codingblocks.com/">
53+
<li class="nav-items pointer">
54+
ONLINE COURSES
55+
</li>
56+
</a>
57+
58+
<a href="https://hack.codingblocks.com/">
59+
<li class="nav-items pointer">
60+
HACKER BLOCKS
61+
</li>
62+
</a>
63+
</ul>
64+
</nav>
65+
66+
<div class="sidebar sidebar-none">
67+
<i class="close fas fa-times"></i>
68+
<div class="upper-half">
69+
<div class="round-img">
70+
<img src="img/user.svg" alt="profile-pic">
71+
</div>
72+
<p>
73+
Hi, User
74+
</p>
75+
<a href="/logout">
76+
<div class="button-solid">
77+
<button>Logout</button>
78+
</div>
79+
</a>
80+
</div>
81+
<div class="lower-half">
82+
<a href="https://codingblocks.com/classroom-courses">
83+
<div class="para">
84+
CLASSROOM COURSES
85+
</div>
86+
</a>
87+
88+
<a href="https://online.codingblocks.com/">
89+
<div class="para">
90+
ONLINE COURSES
91+
</div>
92+
</a>
93+
94+
<a href="https://hack.codingblocks.com/">
95+
<div class="para">
96+
HACKER BLOCKS
97+
</div>
98+
</a>
99+
</div>
100+
</div>
101+
</header>
102+

‎examples/components/nav-bar.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Navigation Bar -->
22
<header>
3-
<nav>
3+
<nav class="main-nav">
44
<span class="hamburger-parent">
55
<i class="hamburger fas fa-bars"></i>
66
</span>

‎examples/components/side-nav.hbs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,29 @@
33
<div class="d-flex justify-content-center profile-container">
44
<img class="round-img" src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_1200.jpg?1448476701"/>
55
</div>
6+
67
<div class="card">
78
<p>Hi, Darsh</p>
89
</div>
10+
911
</div>
12+
1013
<div>
1114
<div class="flex-row">
1215
<span class="pointer red">MY PROFILE</span>
1316
</div>
1417
<div class="separator"></div>
18+
1519
<div class="flex-row">
1620
<span class="pointer">MY ADDRESSES</span>
1721
</div>
22+
1823
<div class="separator"></div>
24+
1925
<div class="flex-row">
2026
<span class="pointer">MY APPS</span>
2127
</div>
28+
2229
<div class="separator"></div>
2330
<div class="flex-row">
2431
<span class="pointer">MY CLIENTS</span>

‎examples/views/address-card.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{{> nav-bar }}
1+
{{> nav-account}}
22
<div class="address-card row">
33
<div class="col-md-10">
44
<h3>CHOOSE SHIPPING ADDRESS</h3>

‎sass/styles/_media-query.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@
3030
@import "media-query/media.o-client-add";
3131
@import "media-query/media.signup";
3232
@import "media-query/media.changdp";
33+
@import "media-query/media.arrangement";

‎sass/styles/media-query/media.side-nav.scss renamed to ‎sass/styles/media-query/media.arrangement.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@media screen and (max-width: 767px) {
2+
.e-arrangement{
23
.nav-info {
3-
display: none;
4+
display: none;
45
}
6+
}
57
}

‎sass/styles/media-query/media.navigation.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,44 @@
1111
background-image: url("/images/menu-icon.png");
1212
}
1313
}
14+
15+
@media all and(max-width: 575px){
16+
.nav-logo{
17+
height: 30px;
18+
margin: 0;
19+
}
20+
21+
.hamburger-parent{
22+
top: 8px;
23+
margin: 0;
24+
font-size: $global-font-size;
25+
}
26+
27+
.logo-parent{
28+
margin-left: 30px;
29+
}
30+
31+
.logo-link{
32+
min-width: unset;
33+
}
34+
35+
.main-nav{
36+
.card{
37+
@include padding-s(5px, 25px);
38+
width: 240px;
39+
}
40+
41+
.nav-info{
42+
font-size: $card-md;
43+
44+
.flex-row{
45+
@include padding-s(20px, 0);
46+
}
47+
}
48+
49+
.round-img{
50+
@include dimensions(40px, 40px);
51+
}
52+
}
53+
54+
}

‎sass/styles/objects/o-nav-layout/o-nav-layout.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,45 @@
1616
.notify-icon{
1717
transform: translateY(13px);
1818
}
19+
}
20+
21+
.main-nav{
22+
.round-img{
23+
@include dimensions(60px, 60px);
24+
25+
float: right;
26+
cursor: pointer;
27+
}
28+
29+
.round-img:hover{
30+
& + .card{
31+
display: block;
32+
}
33+
}
34+
35+
.card{
36+
@include dimensions(300px, auto);
37+
@include padding-s(0, 40px);
38+
background-color: $nav-info-bg;
39+
display: none;
40+
position: absolute;
41+
right: 10px;
42+
43+
&:hover{
44+
display: block;
45+
}
46+
47+
.top-offset{
48+
@include dimensions(100%, 30px);
49+
position: absolute;
50+
top: -30px;
51+
background: transparent;
52+
}
53+
}
54+
55+
.nav-info{
56+
.separator{
57+
float: right;
58+
}
59+
}
1960
}

‎sass/styles/settings/settings.color.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,5 @@ $otp-input-bg: #ebebeb;
4848
$hover-bg: #fafafa;
4949
$dropdown-divider: #f4f4f4;
5050

51-
$vp-select-box: #262626;
51+
$vp-select-box: #262626;
52+
$nav-info-bg: #fcfcfc;

0 commit comments

Comments
 (0)