├── images
├── 00.jpg
├── bg.jpg
└── logo.png
├── js
└── script.js
├── index.html
└── css
└── style.css
/images/00.jpg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hosseinnabi-ir/Responsive-Glass-Sidebar-using-CSS-and-JavaScript/HEAD/images/bg.jpg
--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hosseinnabi-ir/Responsive-Glass-Sidebar-using-CSS-and-JavaScript/HEAD/images/logo.png
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const sidebar = document.querySelector('.sidebar');
2 | const navItems = document.querySelectorAll('nav .nav-item');
3 | const toggle = document.querySelector('.sidebar .toggle');
4 |
5 | toggle.addEventListener('click', () => {
6 |
7 | if (sidebar.className === 'sidebar')
8 | sidebar.classList.add('open');
9 | else
10 | sidebar.classList.remove('open');
11 |
12 | });
13 |
14 | navItems.forEach(navItem => {
15 |
16 | navItem.addEventListener('click', () => {
17 |
18 | navItems.forEach(navItem => {
19 | navItem.classList.remove('active');
20 | });
21 |
22 | navItem.classList.add('active');
23 |
24 | });
25 |
26 | });
27 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | CODE WITH HOSSEIN
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | outline: 0;
6 | list-style: none;
7 | box-sizing: border-box;
8 | }
9 |
10 | body {
11 | height: 100vh;
12 | background-image: url('../images/bg.jpg');
13 | background-repeat: no-repeat;
14 | background-size: cover;
15 | font-family: 'Roboto', sans-serif;
16 | }
17 |
18 | .sidebar {
19 | width: 120px;
20 | height: 100%;
21 | backdrop-filter: blur(6px);
22 | -webkit-backdrop-filter: blur(6px);
23 | background: rgba(10, 10, 10, .65);
24 | box-shadow: 0 8px 32px rgb(2, 4, 24);
25 | border-right: 2px solid rgba(255, 255, 255, .09);
26 | transition: .4s ease-in-out;
27 | }
28 |
29 | .sidebar.open {
30 | width: 360px;
31 | }
32 |
33 | .sidebar .logo {
34 | width: 100%;
35 | height: 240px;
36 | padding: 40px 0;
37 | display: grid;
38 | align-items: center;
39 | justify-items: center;
40 | }
41 |
42 | .sidebar .logo img {
43 | width: 56px;
44 | transition: .4s;
45 | }
46 |
47 | .sidebar.open .logo img {
48 | width: 96px;
49 | }
50 |
51 | .sidebar .logo h3 {
52 | color: #fff;
53 | font-size: 36px;
54 | margin-top: 12px;
55 | font-variant: small-caps;
56 | pointer-events: none;
57 | scale: 0;
58 | opacity: 0;
59 | }
60 |
61 | .sidebar.open .logo h3 {
62 | scale: 1;
63 | opacity: 1;
64 | transition: .4s;
65 | transition-delay: .2s;
66 | }
67 |
68 | .sidebar .nav-title {
69 | color: #dadada;
70 | margin: 40px 0 18px;
71 | pointer-events: none;
72 | opacity: 0;
73 | }
74 |
75 | .sidebar.open .nav-title {
76 | opacity: 1;
77 | transition: .4s;
78 | transition-delay: .2s;
79 | }
80 |
81 | .sidebar nav {
82 | padding: 0 30px;
83 | }
84 |
85 | .sidebar nav .nav-item {
86 | cursor: pointer;
87 | display: flex;
88 | align-items: center;
89 | justify-content: flex-start;
90 | border-radius: 4px;
91 | width: 100%;
92 | height: 56px;
93 | padding: 0 16px;
94 | margin: 8px 0;
95 | color: #fff;
96 | transition: .3s;
97 | }
98 |
99 | .sidebar nav .nav-item.active {
100 | background: #ff328e !important;
101 | }
102 |
103 | .sidebar nav .nav-item:hover {
104 | background: rgba(255, 255, 255, .1);
105 | }
106 |
107 | .sidebar nav .nav-item i {
108 | font-size: 26px;
109 | }
110 |
111 | .sidebar nav .nav-item span {
112 | font-size: 18px;
113 | margin-left: 8px;
114 | opacity: 0;
115 | pointer-events: none;
116 | }
117 |
118 | .sidebar.open nav .nav-item span {
119 | opacity: 1;
120 | pointer-events: visible;
121 | transition: .4s;
122 | transition-delay: .2s;
123 | }
124 |
125 | .sidebar hr {
126 | width: 100%;
127 | height: 2px;
128 | border-radius: 3px;
129 | margin: 40px 0 50px;
130 | background: rgba(255, 255, 255, .1);
131 | opacity: 0;
132 | }
133 |
134 | .sidebar.open hr {
135 | opacity: 1;
136 | transition: .4s;
137 | }
138 |
139 | .sidebar .toggle {
140 | cursor: pointer;
141 | position: absolute;
142 | color: #fff;
143 | top: 180px;
144 | right: -20px;
145 | font-size: 38px;
146 | line-height: 50%;
147 | text-align: center;
148 | border-radius: 50%;
149 | padding: 2px 0 2px 2px;
150 | background: linear-gradient(
151 | 90deg,
152 | transparent 50%,
153 | rgba(10, 10, 10, .65) 50%
154 | );
155 | transition: .4s linear;
156 | }
157 |
158 | .sidebar.open .toggle {
159 | transform: translateY(48px);
160 | }
161 |
162 | .sidebar .toggle i {
163 | transition: .4s linear;
164 | }
165 |
166 | .sidebar.open .toggle i {
167 | transform: rotateY(180deg);
168 | }
169 |
--------------------------------------------------------------------------------
29 |