Skip to content

Commit e25e326

Browse files
vdvibhu20vdvibhu20
committed
added new navbar
1 parent 3003bc1 commit e25e326

File tree

3 files changed

+162
-78
lines changed

3 files changed

+162
-78
lines changed

Diff for: ‎assets/css/app.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* Navbar */
2+
3+
.navbar .main {
4+
background: #15171e;
5+
color: white;
6+
}
7+
8+
.navbar a {
9+
display: block;
10+
color: white;
11+
}
12+
13+
.navbar span {
14+
display: block;
15+
}
16+
17+
.navbar li img {
18+
height: 24px;
19+
}
20+
21+
.nav-menu ul {
22+
margin: 0;
23+
padding: 0;
24+
list-style: none;
25+
}
26+
27+
.nav-menu > ul {
28+
display: flex;
29+
/* align-items: center; */
30+
}
31+
32+
.nav-menu > ul > li {
33+
position: relative;
34+
white-space: nowrap;
35+
padding: 15px 25px;
36+
text-align: center;
37+
}
38+
39+
.nav-menu li:hover {
40+
position: relative;
41+
background: #1a1c25;
42+
}
43+
44+
.nav-menu .active {
45+
background: #1a1c25;
46+
}
47+
48+
.nav-menu .active::after {
49+
position: absolute;
50+
content: "";
51+
height: 2px;
52+
bottom: 0;
53+
width: 100%;
54+
left: 0;
55+
background: linear-gradient(90deg, #838281 0%, #ffba08 100%);
56+
}
57+
58+
/* Button */
59+
.button-solid-orange {
60+
margin-left: 25px;
61+
background: linear-gradient(90deg, #f26a3e 0%, #fb8133 100%);
62+
border-radius: 5px;
63+
color: #fff;
64+
padding: 9px 25px 10px 25px;
65+
white-space: nowrap;
66+
transition: 0.3s;
67+
font-size: 14px;
68+
display: inline-block;
69+
border: 0;
70+
font-weight: normal;
71+
}
72+
73+
.button-solid-orange:hover {
74+
background-position: 100%;
75+
color: #fff;
76+
}
77+
78+
@media (max-width: 991px) {
79+
.button-solid-orange {
80+
margin: 0;
81+
padding: 4px 10px 5px 10px;
82+
}
83+
}
84+
85+
86+
/*-------------------Custom------------------*/
87+
.logo {
88+
font-size: 30px;
89+
margin: 0;
90+
padding: 0;
91+
line-height: 1;
92+
font-weight: 500;
93+
letter-spacing: 2px;
94+
text-transform: uppercase;
95+
}
96+
97+
.logo a {
98+
color: #fff;
99+
}
100+
101+
.logo img {
102+
max-height: 56px;
103+
}

Diff for: ‎components/Navbar.vue

+57-77
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,67 @@
11
<template>
2-
<div>
3-
<div class="a-hb p-0">
4-
<div class="d-flex px-5 py-4 justify-content-between align-items-center">
5-
<div class="d-md-none">
6-
<div class="hamburger-menu mr-3">
7-
<div
8-
class="ham-toggle"
9-
@click="openNavbar()"
2+
<div class="navbar">
3+
<div class="d-flex main align-items-center px-5">
4+
<a href="index.html" class="logo mr-auto"><img src="https://cb3img.s3.ap-south-1.amazonaws.com/img/cblogo.webp" alt="Coding Blocks" class="img-fluid"></a>
5+
6+
<nav class="nav-menu topheadnav">
7+
<ul>
8+
<li>
9+
<a href="#">
10+
<img src="https://cb3img.s3.ap-south-1.amazonaws.com/img/iconLearn.webp" alt="Learn">
11+
<span>Learn</span>
12+
</a>
13+
</li>
14+
<li class="active"><a href="https://hack.codingblocks.com">
15+
<img src="https://cb3img.s3.ap-south-1.amazonaws.com/img/iconMonitor.webp" alt="Practice">
16+
<span>Practice</span></a></li>
17+
<li><a href="https://hire.codingblocks.com">
18+
<img src="https://cb3img.s3.ap-south-1.amazonaws.com/img/iconHire.webp" alt="Hire">
19+
<span>Get Hired</span></a></li>
20+
<li><a href="https://ide.codingblocks.com">
21+
<img src="https://cb3img.s3.ap-south-1.amazonaws.com/img/iconIDE.webp" alt="IDE">
22+
<span>IDE</span></a></li>
23+
</ul>
24+
</nav><!-- .nav-menu -->
25+
26+
<a href="/app/" class="button-solid-orange scrollto">Login / Signup</a>
27+
<button class="navbar-toggler" type="button">
28+
<span class="bar"></span>
29+
</button>
30+
</div>
31+
<div>
32+
<cb-navbar topalign="right" />
33+
<cb-mobile-navbar
34+
id="navbar"
35+
logo="https://minio.codingblocks.com/public/hb_logo.png"
36+
>
37+
<!-- <div
38+
v-if="currentUser"
39+
class="d-flex align-items-center my-4 pl-4"
40+
>
41+
<div class="img-ring s-50x50">
42+
<img
43+
:src="currentUser.photo"
44+
class="round img"
45+
alt="ProfilePic"
1046
>
11-
<div class="hamburger">
12-
<span />
13-
<span />
14-
<span />
15-
</div>
16-
</div>
1747
</div>
18-
</div>
19-
<div class="col-md-10 col-12">
20-
<div class="row align-items-center">
21-
<div class="col-xl-2 col-3 px-lg-4 px-0">
22-
<img
23-
src="../images/hb_logo.png"
24-
alt="Logo"
25-
>
26-
</div>
27-
<div class="col-xl-10 col-9 dsp-none-md">
28-
<div class="d-flex align-items-center h-100">
29-
<div class="font-sm light px-3">
30-
<a href="/app/"> Dashboard </a>
31-
</div>
32-
<div class="font-sm light px-3">
33-
<a href="/app/dcb"> Daily Code Bytes</a>
34-
</div>
35-
<div class="font-sm light px-3">
36-
<a href="/app/practice">Practice Problems</a>
37-
</div>
38-
<div class="font-sm light px-3">
39-
<a href="/app/contests">Contests</a>
40-
</div>
41-
<div class="font-sm light px-3">
42-
<a href="/app/competitions">Competitions</a>
43-
</div>
44-
</div>
48+
49+
<div class="pl-4">
50+
<div class="extra-bold gradient-text font-mds">
51+
{{ currentUser.name }}
4552
</div>
53+
<a
54+
:href="`/app/users/${currentUser.id}`"
55+
class="bold orange"
56+
>
57+
View Profile
58+
</a>
4659
</div>
47-
</div>
48-
<a
49-
class="button-solid button-orange dsp-none-sm white"
50-
href="/app/"
51-
>Get Started</a>
52-
</div>
60+
</div> -->
61+
</cb-mobile-navbar>
5362
</div>
54-
<cb-navbar topalign="right" />
55-
<cb-mobile-navbar
56-
id="navbar"
57-
logo="https://minio.codingblocks.com/public/hb_logo.png"
58-
>
59-
<div
60-
v-if="currentUser"
61-
class="d-flex align-items-center my-4 pl-4"
62-
>
63-
<div class="img-ring s-50x50">
64-
<img
65-
:src="currentUser.photo"
66-
class="round img"
67-
alt="ProfilePic"
68-
>
69-
</div>
70-
71-
<div class="pl-4">
72-
<div class="extra-bold gradient-text font-mds">
73-
{{ currentUser.name }}
74-
</div>
75-
<a
76-
:href="`/app/users/${currentUser.id}`"
77-
class="bold orange"
78-
>
79-
View Profile
80-
</a>
81-
</div>
82-
</div>
83-
</cb-mobile-navbar>
8463
</div>
64+
8565
</template>
8666
<script>
8767
import { mapGetters } from 'vuex';

Diff for: ‎nuxt.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ export default {
2929
** Global CSS
3030
*/
3131
css: [
32-
{ src: '@coding-blocks/motley/dist/hb/app.min.css' }
32+
{ src: '@coding-blocks/motley/dist/hb/app.min.css' },
33+
{ src: '~/assets/css/app.css'}
3334
],
3435
/*
3536
** Plugins to load before mounting the App

0 commit comments

Comments
 (0)