Skip to content

Commit 19289c6

Browse files
callbackcatcallbackcat
committed
feat: update sidebar
1 parent 625cf97 commit 19289c6

4 files changed

Lines changed: 200 additions & 6 deletions

File tree

‎css/home.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ body {
3232

3333
.window__container {
3434
border: 12px solid var(--frame-color);
35-
padding: 18rem;
35+
padding: 18.5rem;
3636
margin-left: 2rem;
3737
margin-right: 30rem;
3838
background-color: var(--window-color);
@@ -43,7 +43,7 @@ body {
4343
}
4444

4545
.blinds__container {
46-
padding: 2rem;
46+
padding: 1.5rem;
4747
margin-left: 2rem;
4848
margin-right: 30rem;
4949
background-color: var(--blinds-color);

‎css/sidebar.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
.side-bar {
2+
background: #1b1a1b;
3+
backdrop-filter: blur(15px);
4+
width: 250px;
5+
height: 100vh;
6+
position: fixed;
7+
top: 0;
8+
right: -250px;
9+
overflow-y: auto;
10+
transition: 0.6s ease;
11+
transition-property: left;
12+
}
13+
.side-bar::-webkit-scrollbar {
14+
width: 0px;
15+
}
16+
17+
.side-bar.active {
18+
right: 0;
19+
}
20+
21+
h1 {
22+
text-align: center;
23+
font-weight: 500;
24+
font-size: 25px;
25+
padding-bottom: 13px;
26+
font-family: sans-serif;
27+
letter-spacing: 2px;
28+
}
29+
30+
.side-bar .menu {
31+
width: 100%;
32+
margin-top: 30px;
33+
}
34+
35+
.side-bar .menu .item {
36+
position: relative;
37+
cursor: pointer;
38+
}
39+
40+
.side-bar .menu .item a {
41+
color: #fff;
42+
font-size: 16px;
43+
text-decoration: none;
44+
display: block;
45+
padding: 5px 30px;
46+
line-height: 60px;
47+
}
48+
49+
.side-bar .menu .item a:hover {
50+
background: #33363a;
51+
transition: 0.3s ease;
52+
}
53+
54+
.side-bar .menu .item i {
55+
margin-right: 15px;
56+
}
57+
58+
.side-bar .menu .item a .dropdown {
59+
position: absolute;
60+
right: 0;
61+
margin: 20px;
62+
transition: 0.3s ease;
63+
}
64+
65+
.side-bar .menu .item .sub-menu {
66+
background: #262627;
67+
display: none;
68+
}
69+
70+
.side-bar .menu .item .sub-menu a {
71+
padding-left: 80px;
72+
}
73+
74+
.rotate {
75+
transform: rotate(90deg);
76+
}
77+
78+
.menu-btn {
79+
position: absolute;
80+
right: 0;
81+
top: 0;
82+
color: #fff;
83+
font-size: 35px;
84+
margin: 2rem;
85+
cursor: pointer;
86+
}
87+
88+
.main {
89+
height: 100vh;
90+
display: flex;
91+
justify-content: center;
92+
align-items: center;
93+
padding: 50px;
94+
}
95+
96+
.main h1 {
97+
color: rgba(255, 255, 255, 0.8);
98+
font-size: 60px;
99+
text-align: center;
100+
line-height: 80px;
101+
}
102+
103+
img {
104+
width: 100px;
105+
margin: 15px;
106+
border-radius: 50%;
107+
margin-left: 70px;
108+
border: 3px solid #b4b8b9;
109+
}
110+
111+
/* Phones */
112+
@media only screen and (max-width: 576px) {
113+
}
114+
115+
/* Portrait tablets and large phones */
116+
@media only screen and (min-width: 576px) {
117+
}
118+
119+
/* Landscape tablets */
120+
@media only screen and (min-width: 768px) {
121+
}
122+
123+
/* Laptops/desktops */
124+
@media only screen and (min-width: 992px) {
125+
}
126+
127+
/* Large laptops and desktops */
128+
@media only screen and (min-width: 1200px) {
129+
}

‎index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,6 @@
4949
</nav>
5050
</header>
5151

52-
<div class="sidebar">
53-
54-
</div>
55-
5652
<main class="main">
5753
<section class="hero section" id="hero">
5854
<div class="hero__container container grid">

‎pages/home.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,13 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="../css/sidebar.css" />
78
<link rel="stylesheet" href="../css/style.css" />
89
<link rel="stylesheet" href="../css/home.css" />
10+
<script
11+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
12+
charset="utf-8"
13+
></script>
914
<title>Document</title>
1015
</head>
1116
<body>
@@ -27,7 +32,71 @@
2732
</div>
2833
</footer>
2934

35+
<link
36+
rel="stylesheet"
37+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
38+
/>
3039

40+
<div class="menu-btn">
41+
<i class="fas fa-bars"></i>
42+
</div>
3143

44+
<div class="side-bar">
45+
<div class="menu">
46+
<div class="item">
47+
<a href="#"><i class="fas fa-desktop"></i>Dashboard</a>
48+
</div>
49+
<div class="item">
50+
<a class="sub-btn"
51+
><i class="fas fa-table"></i>Tables<i
52+
class="fas fa-angle-right dropdown"
53+
></i
54+
></a>
55+
<div class="sub-menu">
56+
<a href="#" class="sub-item">Sub Item 01</a>
57+
<a href="#" class="sub-item">Sub Item 02</a>
58+
<a href="#" class="sub-item">Sub Item 03</a>
59+
</div>
60+
</div>
61+
<div class="item">
62+
<a href="#"><i class="fas fa-th"></i>Forms</a>
63+
</div>
64+
<div class="item">
65+
<a class="sub-btn"
66+
><i class="fas fa-cogs"></i>Settings<i
67+
class="fas fa-angle-right dropdown"
68+
></i
69+
></a>
70+
<div class="sub-menu">
71+
<a href="#" class="sub-item">Sub Item 01</a>
72+
<a href="#" class="sub-item">Sub Item 02</a>
73+
</div>
74+
</div>
75+
<div class="item">
76+
<a href="#"><i class="fas fa-info-circle"></i>About</a>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<script type="text/javascript">
82+
$(document).ready(function () {
83+
//jquery for toggle sub menus
84+
$(".sub-btn").click(function () {
85+
$(this).next(".sub-menu").slideToggle();
86+
$(this).find(".dropdown").toggleClass("rotate");
87+
});
88+
$(".menu-btn").click(function () {
89+
$(".side-bar").addClass("active");
90+
$(".menu-btn").css("visibility", "hidden");
91+
});
92+
});
93+
$(document).mouseup(function (e) {
94+
var container = $(".side-bar");
95+
if (!container.is(e.target) && container.has(e.target).length === 0) {
96+
$(".side-bar").removeClass("active");
97+
$(".menu-btn").css("visibility", "visible");
98+
}
99+
});
100+
</script>
32101
</body>
33102
</html>

0 commit comments

Comments
 (0)