Skip to content

Commit f6bdf53

Browse files
Jay-TopherJay-Topher
committed
5 done
1 parent 8ad3e35 commit f6bdf53

4 files changed

Lines changed: 68 additions & 4 deletions

File tree

‎4-navbar/setup/styles.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,9 @@ nav {
199199
display: none;
200200
}
201201
.links {
202-
/* height: 0;
202+
height: 0;
203203
overflow: hidden;
204-
transition: var(--transition); */
204+
transition: var(--transition);
205205
}
206206
.show-links {
207207
height: 10rem;

‎5-sidebar/setup/app.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const sidebarToggle = document.querySelector(".sidebar-toggle");
2+
const closeBtn = document.querySelector(".close-btn");
3+
const sidebar = document.querySelector(".sidebar");
4+
5+
sidebarToggle.addEventListener("click", function () {
6+
sidebar.classList.toggle("show-sidebar");
7+
});
8+
9+
closeBtn.addEventListener("click", function () {
10+
sidebar.classList.remove("show-sidebar");
11+
});

‎5-sidebar/setup/index.html‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,60 @@
1414
<link rel="stylesheet" href="styles.css" />
1515
</head>
1616
<body>
17-
<h1>sidebar project</h1>
17+
<button class="sidebar-toggle">
18+
<i class="fas fa-bars"></i>
19+
</button>
20+
<aside class="sidebar">
21+
<div class="sidebar-header">
22+
<img src="./logo.svg" alt="logo" class="logo" />
23+
<button class="close-btn">
24+
<i class="fas fa-times"></i>
25+
</button>
26+
</div>
27+
<!-- links -->
28+
<ul class="links">
29+
<li>
30+
<a href="index.html">home</a>
31+
</li>
32+
<li>
33+
<a href="about.html">about</a>
34+
</li>
35+
<li>
36+
<a href="projects.html">projects</a>
37+
</li>
38+
<li>
39+
<a href="contact.html">contact</a>
40+
</li>
41+
</ul>
42+
<!-- social media -->
43+
<ul class="social-icons">
44+
<li>
45+
<a href="https://www.twitter.com">
46+
<i class="fab fa-facebook"></i>
47+
</a>
48+
</li>
49+
<li>
50+
<a href="https://www.twitter.com">
51+
<i class="fab fa-twitter"></i>
52+
</a>
53+
</li>
54+
<li>
55+
<a href="https://www.twitter.com">
56+
<i class="fab fa-behance"></i>
57+
</a>
58+
</li>
59+
<li>
60+
<a href="https://www.twitter.com">
61+
<i class="fab fa-linkedin"></i>
62+
</a>
63+
</li>
64+
<li>
65+
<a href="https://www.twitter.com">
66+
<i class="fab fa-sketch"></i>
67+
</a>
68+
</li>
69+
</ul>
70+
</aside>
1871
<!-- javascript -->
1972
<script src="app.js"></script>
2073
</body>

‎5-sidebar/setup/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ Sidebar
247247
row-gap: 1rem;
248248
box-shadow: var(--clr-red-dark);
249249
transition: var(--transition);
250-
/* transform: translate(-100%); */
250+
transform: translate(-100%);
251251
}
252252
.show-sidebar {
253253
transform: translate(0);

0 commit comments

Comments
 (0)