├── .gitignore ├── sidebar-1 ├── assets │ ├── blocklord-logo.png │ ├── icon-accounts.svg │ ├── icon-acoustic.svg │ ├── icon-blockchain.svg │ ├── icon-burger.svg │ ├── icon-close.svg │ ├── icon-database.svg │ ├── icon-folders.svg │ ├── icon-home.svg │ ├── icon-levels.svg │ ├── icon-lock.svg │ ├── icon-settings.svg │ └── icon-speaker.svg ├── index.html └── styles.css ├── sidebar-2 ├── assets │ ├── avatar.png │ ├── blocklord-logo.png │ ├── icon-accounts.svg │ ├── icon-acoustic.svg │ ├── icon-blockchain.svg │ ├── icon-burger.svg │ ├── icon-close.svg │ ├── icon-database.svg │ ├── icon-folders.svg │ ├── icon-home.svg │ ├── icon-levels.svg │ ├── icon-lock.svg │ ├── icon-settings.svg │ └── icon-speaker.svg ├── index.html └── styles.css ├── sidebar-3 ├── assets │ ├── blocklord-logo.png │ ├── icon-accounts.svg │ ├── icon-acoustic.svg │ ├── icon-blockchain.svg │ ├── icon-burger.svg │ ├── icon-close.svg │ ├── icon-database.svg │ ├── icon-folders.svg │ ├── icon-home.svg │ ├── icon-levels.svg │ ├── icon-lock.svg │ ├── icon-settings.svg │ ├── icon-speaker.svg │ └── logo.svg ├── index.html └── styles.css ├── sidebar-4 ├── assets │ ├── blocklord-logo.png │ ├── icon-accounts.svg │ ├── icon-acoustic.svg │ ├── icon-blockchain.svg │ ├── icon-database.svg │ ├── icon-folders.svg │ ├── icon-home.svg │ ├── icon-levels.svg │ ├── icon-lock.svg │ ├── icon-settings.svg │ ├── icon-speaker.svg │ └── logo.svg ├── index.html └── styles.css ├── sidebar-5 ├── assets │ ├── blocklord-logo.png │ ├── icon-accounts.svg │ ├── icon-acoustic.svg │ ├── icon-blockchain.svg │ ├── icon-burger.svg │ ├── icon-close.svg │ ├── icon-database.svg │ ├── icon-folders.svg │ ├── icon-home.svg │ ├── icon-levels.svg │ ├── icon-lock.svg │ ├── icon-settings.svg │ └── icon-speaker.svg ├── index.html └── styles.css ├── sidebar-6 ├── index.html ├── joe.png ├── logo.svg └── styles.css ├── sidebar-7 ├── index.html └── styles.css └── sidebar-8 ├── index.html ├── joe.png ├── logo.svg └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /sidebar-1/assets/blocklord-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-1/assets/blocklord-logo.png -------------------------------------------------------------------------------- /sidebar-1/assets/icon-accounts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-acoustic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-blockchain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-folders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-levels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-1/assets/icon-speaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 1 8 | 9 | 10 | 14 | 15 | 16 | 17 | 71 | 72 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /sidebar-1/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #121212; 8 | } 9 | 10 | button { 11 | background: transparent; 12 | border: 0; 13 | padding: 0; 14 | cursor: pointer; 15 | } 16 | 17 | .sidebar { 18 | position: absolute; 19 | overflow: hidden; 20 | top: 0; 21 | left: 0; 22 | width: 72px; 23 | height: 100%; 24 | background: #6d10db; 25 | transition: width 0.4s; 26 | } 27 | 28 | body.open .sidebar { 29 | width: 260px; 30 | } 31 | 32 | .sidebar-inner { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 300px; 37 | } 38 | 39 | .sidebar-header { 40 | display: flex; 41 | align-items: center; 42 | height: 72px; 43 | padding: 0 1.25rem 0 0; 44 | background: rgba(0, 0, 0, 0.1); 45 | } 46 | 47 | .sidebar-burger { 48 | width: 72px; 49 | height: 72px; 50 | display: grid; 51 | place-items: center; 52 | background: url(./assets/icon-burger.svg) no-repeat center center; 53 | } 54 | 55 | body.open .sidebar-burger { 56 | background: url(./assets/icon-close.svg) no-repeat no-repeat center center; 57 | } 58 | 59 | .sidebar-logo { 60 | height: 20px; 61 | } 62 | 63 | .sidebar-menu { 64 | display: grid; 65 | } 66 | 67 | .sidebar-menu > button { 68 | display: flex; 69 | gap: 25px; 70 | align-items: center; 71 | height: 60px; 72 | font-family: "Poppins"; 73 | font-size: 16px; 74 | font-weight: 200; 75 | letter-spacing: 2px; 76 | line-height: 1; 77 | padding: 0 25px; 78 | } 79 | 80 | .sidebar-menu > button.has-border { 81 | padding-bottom: 1rem; 82 | border-bottom: 1px solid rgba(255, 255, 255, 0.12); 83 | margin-bottom: 1rem; 84 | } 85 | 86 | .sidebar-menu > button > img { 87 | width: 24px; 88 | height: 24px; 89 | } 90 | 91 | .sidebar-menu > button > span { 92 | color: #f9f9f9; 93 | } 94 | -------------------------------------------------------------------------------- /sidebar-2/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-2/assets/avatar.png -------------------------------------------------------------------------------- /sidebar-2/assets/blocklord-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-2/assets/blocklord-logo.png -------------------------------------------------------------------------------- /sidebar-2/assets/icon-accounts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-acoustic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-blockchain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-folders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-levels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-2/assets/icon-speaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 2 8 | 9 | 10 | 14 | 15 | 16 | 17 | 21 |
22 | 47 | 48 |

Dashboard

49 | 50 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /sidebar-2/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #202124; 8 | font-family: "Poppins"; 9 | color: #f9f9f9; 10 | } 11 | 12 | button { 13 | background: transparent; 14 | border: 0; 15 | padding: 0; 16 | cursor: pointer; 17 | } 18 | 19 | h2 { 20 | font-size: 16px; 21 | font-weight: 500; 22 | padding-left: 20px; 23 | margin: 22px 0; 24 | } 25 | 26 | .overlay { 27 | position: fixed; 28 | z-index: 1; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | background: rgba(0, 0, 0, 0.6); 34 | backdrop-filter: blur(3px); 35 | opacity: 0; 36 | visibility: hidden; 37 | transition: 0.4s; 38 | } 39 | 40 | body.open .overlay { 41 | opacity: 1; 42 | visibility: visible; 43 | } 44 | 45 | .burger { 46 | position: fixed; 47 | z-index: 3; 48 | top: 20px; 49 | right: 12px; 50 | display: flex; 51 | align-items: center; 52 | gap: 6px; 53 | } 54 | 55 | @media (width >= 500px) { 56 | .burger { 57 | display: none; 58 | } 59 | } 60 | 61 | .burger-avatar { 62 | width: 30px; 63 | height: 30px; 64 | transition: 0.4s; 65 | } 66 | 67 | body.open .burger-avatar { 68 | translate: 40px 0; 69 | opacity: 0; 70 | visibility: hidden; 71 | } 72 | 73 | .burger-icon { 74 | display: block; 75 | width: 30px; 76 | height: 30px; 77 | background-image: url("./assets/icon-burger.svg"); 78 | background-repeat: no-repeat; 79 | background-position: center center; 80 | } 81 | 82 | body.open .burger-icon { 83 | background-image: url("./assets/icon-close.svg"); 84 | } 85 | 86 | .sidebar { 87 | position: absolute; 88 | z-index: 2; 89 | top: 0; 90 | right: 0; 91 | display: flex; 92 | align-items: center; 93 | flex-direction: column; 94 | width: 100%; 95 | height: 100%; 96 | padding: 40px 20px; 97 | background: #000000; 98 | opacity: 0; 99 | visibility: hidden; 100 | filter: blur(10px); 101 | transition-property: filter, visibility, opacity; 102 | transition-duration: 0.6s; 103 | } 104 | 105 | @media (width >= 330px) { 106 | .sidebar { 107 | transition-property: translate; 108 | } 109 | } 110 | 111 | @media (width >= 400px) { 112 | .sidebar { 113 | translate: 100% 0; 114 | width: 180px; 115 | transition: 0.4s; 116 | border-left: 1px solid rgba(255, 255, 255, 0.16); 117 | } 118 | } 119 | 120 | @media (width >= 500px) { 121 | .sidebar { 122 | translate: 0 0; 123 | 124 | opacity: 1; 125 | visibility: visible; 126 | filter: blur(0); 127 | } 128 | } 129 | 130 | body.open .sidebar { 131 | translate: 0 0; 132 | opacity: 1; 133 | visibility: visible; 134 | filter: blur(0); 135 | } 136 | 137 | .sidebar-avatar { 138 | width: 80px; 139 | height: 80px; 140 | margin-bottom: 20px; 141 | } 142 | 143 | .sidebar-username { 144 | margin: 0; 145 | font-size: 14px; 146 | font-weight: 500; 147 | color: rgba(255, 255, 255, 0.96); 148 | } 149 | 150 | .sidebar-role { 151 | margin: 0 0 20px; 152 | font-size: 9px; 153 | font-weight: 400; 154 | color: rgba(255, 255, 255, 0.57); 155 | } 156 | 157 | .sidebar-menu { 158 | display: grid; 159 | width: 100%; 160 | padding: 10px 0; 161 | padding-left: 20px; 162 | border-top: 1px solid rgba(255, 255, 255, 0.16); 163 | } 164 | 165 | @media (width >= 350px) { 166 | .sidebar-menu { 167 | padding-left: 0; 168 | } 169 | } 170 | 171 | .sidebar-menu > button { 172 | display: flex; 173 | gap: 8px; 174 | align-items: center; 175 | font-family: "Poppins"; 176 | font-size: 16px; 177 | font-weight: 200; 178 | letter-spacing: 2px; 179 | line-height: 1; 180 | padding: 10px 20px; 181 | } 182 | 183 | .sidebar-menu > button > img { 184 | width: 17px; 185 | height: 17px; 186 | } 187 | 188 | .sidebar-menu > button > span { 189 | color: #f9f9f9; 190 | font-size: 11px; 191 | translate: 0 1px; 192 | } 193 | -------------------------------------------------------------------------------- /sidebar-3/assets/blocklord-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-3/assets/blocklord-logo.png -------------------------------------------------------------------------------- /sidebar-3/assets/icon-accounts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-acoustic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-blockchain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-folders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-levels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-3/assets/icon-speaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-3/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 3 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 68 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /sidebar-3/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #244071; 8 | } 9 | 10 | button { 11 | background: transparent; 12 | border: 0; 13 | padding: 0; 14 | cursor: pointer; 15 | } 16 | 17 | :is(.sidebar, .burger, .logo) { 18 | position: fixed; 19 | } 20 | 21 | .sidebar { 22 | z-index: 1; 23 | top: 0; 24 | left: 0; 25 | width: 72px; 26 | height: 100%; 27 | background: #14274c; 28 | transition: 0.4s; 29 | } 30 | 31 | @media (width < 500px) { 32 | .sidebar { 33 | translate: -100% 0; 34 | } 35 | 36 | body.open .sidebar { 37 | translate: 0 0; 38 | } 39 | } 40 | 41 | .sidebar-header { 42 | display: grid; 43 | place-items: center; 44 | height: 72px; 45 | background: rgba(0, 0, 0, 0.1); 46 | } 47 | 48 | .logo { 49 | z-index: 2; 50 | top: 18px; 51 | left: 52px; 52 | width: 38px; 53 | scale: 0.8; 54 | transition: 0.4s; 55 | } 56 | 57 | @media (width <= 500px) { 58 | body.open > .logo { 59 | translate: 28px; 60 | } 61 | } 62 | 63 | @media (width >= 500px) { 64 | .logo { 65 | left: 15px; 66 | width: 42px; 67 | } 68 | } 69 | 70 | .burger { 71 | z-index: 2; 72 | top: 0; 73 | left: 0; 74 | display: grid; 75 | place-items: center; 76 | width: 72px; 77 | height: 72px; 78 | background: url(./assets/icon-burger.svg) no-repeat center; 79 | } 80 | 81 | body.open .burger { 82 | background: url(./assets/icon-close.svg) no-repeat center; 83 | } 84 | 85 | @media (width >= 500px) { 86 | .burger { 87 | display: none; 88 | } 89 | } 90 | 91 | .sidebar > nav { 92 | display: grid; 93 | } 94 | 95 | .sidebar > nav:not(:last-child) { 96 | padding-bottom: 1rem; 97 | border-bottom: 1px solid #1e3660; 98 | margin-bottom: 1rem; 99 | } 100 | 101 | .sidebar > nav > button { 102 | position: relative; 103 | display: grid; 104 | place-items: center; 105 | width: 100%; 106 | height: 60px; 107 | padding: 0; 108 | } 109 | 110 | @media (width >= 500px) { 111 | .sidebar > nav > button:hover > span { 112 | opacity: 1; 113 | visibility: visible; 114 | } 115 | } 116 | 117 | .sidebar > nav > button > img { 118 | width: 24px; 119 | height: 24px; 120 | } 121 | 122 | .sidebar > nav > button > span { 123 | position: absolute; 124 | top: 50%; 125 | left: 120%; 126 | translate: 0 -50%; 127 | padding: 10px; 128 | border-radius: 4px; 129 | color: #f9f9f9; 130 | background: rgba(0, 0, 0, 0.7); 131 | opacity: 0; 132 | visibility: hidden; 133 | font-family: "Poppins"; 134 | font-size: 12px; 135 | font-weight: 200; 136 | letter-spacing: 2px; 137 | line-height: 1; 138 | transition: 0.4s; 139 | } 140 | -------------------------------------------------------------------------------- /sidebar-4/assets/blocklord-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/blocklord-logo.png -------------------------------------------------------------------------------- /sidebar-4/assets/icon-accounts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-acoustic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-blockchain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-folders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-levels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-4/assets/icon-speaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-4/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 4 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 31 | 63 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /sidebar-4/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background: #202124; 7 | } 8 | 9 | button { 10 | background: transparent; 11 | border: 0; 12 | padding: 0; 13 | cursor: pointer; 14 | } 15 | 16 | .toolbar, 17 | .sidebar, 18 | .burger { 19 | position: fixed; 20 | top: 0; 21 | } 22 | 23 | .toolbar { 24 | z-index: 3; 25 | left: 0; 26 | width: 72px; 27 | height: 100%; 28 | background: #361d74; 29 | transition: 0.4s; 30 | } 31 | 32 | .sidebar { 33 | z-index: 2; 34 | left: 72px; 35 | width: 200px; 36 | height: 100%; 37 | background: #442496; 38 | transition: 0.4s; 39 | } 40 | 41 | @media (width < 500px) { 42 | .sidebar { 43 | translate: -100% 0; 44 | } 45 | 46 | body.open .sidebar { 47 | translate: 0 0; 48 | } 49 | } 50 | 51 | .burger { 52 | z-index: 1; 53 | left: 72px; 54 | display: grid; 55 | place-items: center; 56 | width: 72px; 57 | height: 64px; 58 | background: url(./assets/icon-burger.svg) no-repeat center; 59 | } 60 | 61 | body.open .burger { 62 | left: auto; 63 | right: 0; 64 | background: url(./assets/icon-close.svg) no-repeat center; 65 | } 66 | 67 | @media (width >= 500px) { 68 | .burger { 69 | display: none; 70 | } 71 | } 72 | 73 | .sidebar > nav { 74 | display: grid; 75 | } 76 | 77 | button { 78 | position: relative; 79 | display: flex; 80 | gap: 10px; 81 | align-items: center; 82 | width: 100%; 83 | height: 60px; 84 | padding: 0 20px; 85 | } 86 | 87 | button > img { 88 | width: 20px; 89 | height: 20px; 90 | } 91 | 92 | .toolbar img { 93 | width: 28px; 94 | height: 28px; 95 | } 96 | 97 | .sidebar > nav > button > span { 98 | border-radius: 4px; 99 | color: #f9f9f9; 100 | font-family: "Poppins"; 101 | font-size: 12px; 102 | font-weight: 200; 103 | letter-spacing: 2px; 104 | line-height: 1; 105 | transition: 0.4s; 106 | } 107 | -------------------------------------------------------------------------------- /sidebar-5/assets/blocklord-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-5/assets/blocklord-logo.png -------------------------------------------------------------------------------- /sidebar-5/assets/icon-accounts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-acoustic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-blockchain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-database.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-folders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-levels.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /sidebar-5/assets/icon-speaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sidebar-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 5 8 | 9 | 10 | 14 | 15 | 16 | 17 | 53 | 54 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /sidebar-5/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #121212; 8 | } 9 | 10 | button { 11 | background: transparent; 12 | border: 0; 13 | padding: 0; 14 | cursor: pointer; 15 | } 16 | 17 | .sidebar { 18 | position: absolute; 19 | overflow: hidden; 20 | top: 0; 21 | left: 0; 22 | width: 72px; 23 | height: 100%; 24 | background: #048480; 25 | transition: width 0.4s; 26 | } 27 | 28 | body.open .sidebar { 29 | width: 260px; 30 | } 31 | 32 | .sidebar-inner { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 300px; 37 | height: inherit; 38 | display: flex; 39 | flex-direction: column; 40 | padding-bottom: 10px; 41 | } 42 | 43 | .sidebar-header { 44 | display: flex; 45 | align-items: center; 46 | height: 72px; 47 | padding: 0 1.25rem 0 0; 48 | background: rgba(0, 0, 0, 0.1); 49 | } 50 | 51 | .sidebar-burger { 52 | width: 72px; 53 | height: 72px; 54 | display: grid; 55 | place-items: center; 56 | background: url(./assets/icon-burger.svg) no-repeat center center; 57 | transition: 0.3s; 58 | } 59 | 60 | body.open .sidebar-burger { 61 | background: url(./assets/icon-close.svg) no-repeat center center; 62 | } 63 | 64 | .sidebar-logo { 65 | height: 20px; 66 | opacity: 0; 67 | transition: 0.3s; 68 | } 69 | 70 | body.open .sidebar-logo { 71 | opacity: 1; 72 | } 73 | 74 | .sidebar-nav { 75 | padding-top: 10px; 76 | flex: 1 1 auto; 77 | } 78 | 79 | .sidebar button { 80 | display: flex; 81 | gap: 25px; 82 | align-items: center; 83 | height: 50px; 84 | width: 72px; 85 | font-family: "Poppins"; 86 | font-size: 16px; 87 | font-weight: 200; 88 | letter-spacing: 2px; 89 | line-height: 1; 90 | padding: 0 25px; 91 | } 92 | 93 | .sidebar button > img { 94 | width: 24px; 95 | height: 24px; 96 | } 97 | 98 | .sidebar button > span { 99 | color: #f9f9f9; 100 | opacity: 0; 101 | transition: 0.3s; 102 | } 103 | 104 | @keyframes appear { 105 | 0% { 106 | opacity: 0; 107 | translate: 0 10px; 108 | } 109 | 100% { 110 | opacity: 1; 111 | translate: 0; 112 | } 113 | } 114 | 115 | body.open .sidebar button > span { 116 | opacity: 1; 117 | animation: appear 0.3s both; 118 | } 119 | -------------------------------------------------------------------------------- /sidebar-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram 8 | 12 | 13 | 14 | 15 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /sidebar-6/joe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-6/joe.png -------------------------------------------------------------------------------- /sidebar-6/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /sidebar-6/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #fafafa; 8 | color: #262626; 9 | font-family: BlinkMacSystemFont; 10 | } 11 | 12 | .sidebar { 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: flex-start; 19 | width: 250px; 20 | height: 100%; 21 | padding: 40px 10px 30px 10px; 22 | background: #ffffff; 23 | border-right: 1px solid #dbdbdb; 24 | transition: 0.3s; 25 | } 26 | 27 | .sidebar-header { 28 | width: 100%; 29 | margin-bottom: 44px; 30 | } 31 | 32 | .logo-icon { 33 | display: none; 34 | font-size: 28px; 35 | height: 35px; 36 | width: 51px; 37 | text-align: center; 38 | } 39 | 40 | .logo-img { 41 | margin-left: 14px; 42 | height: 32px; 43 | } 44 | 45 | .sidebar button { 46 | height: 60px; 47 | background: transparent; 48 | border: 0; 49 | padding: 0; 50 | font-family: inherit; 51 | color: inherit; 52 | cursor: pointer; 53 | } 54 | 55 | .sidebar button > span { 56 | display: flex; 57 | align-items: center; 58 | gap: 12px; 59 | height: 48px; 60 | padding: 0 12px; 61 | border-radius: 24px; 62 | line-height: 1; 63 | } 64 | 65 | .sidebar button:hover > span { 66 | background: #f2f2f2; 67 | } 68 | 69 | .sidebar button:hover > span :is(i, img) { 70 | scale: 1.05; 71 | } 72 | 73 | .sidebar button > span > span { 74 | transition: 0.3s; 75 | } 76 | 77 | @media (width < 580px) { 78 | .logo-img { 79 | display: none; 80 | } 81 | 82 | .logo-icon { 83 | display: block; 84 | } 85 | 86 | .sidebar { 87 | width: 72px; 88 | } 89 | 90 | .sidebar button > span { 91 | width: 50px; 92 | } 93 | 94 | .sidebar button > span > span { 95 | opacity: 0; 96 | visibility: hidden; 97 | } 98 | } 99 | 100 | .sidebar button i { 101 | position: relative; 102 | font-size: 28px; 103 | transition: 0.2s; 104 | } 105 | 106 | .sidebar button img { 107 | width: 28px; 108 | height: 28px; 109 | transition: 0.2s; 110 | } 111 | 112 | .sidebar button i > span { 113 | display: grid; 114 | place-items: center; 115 | height: 20px; 116 | padding: 0 4px; 117 | border-radius: 10px; 118 | position: absolute; 119 | top: -5px; 120 | right: -10px; 121 | border: 1px solid #ffffff; 122 | background: #ff2f40; 123 | color: #f9f9f9; 124 | font-size: 12px; 125 | font-family: BlinkMacSystemFont; 126 | font-style: normal; 127 | } 128 | 129 | .sidebar button i > em { 130 | display: block; 131 | height: 10px; 132 | width: 10px; 133 | border-radius: 10px; 134 | position: absolute; 135 | top: 2px; 136 | right: -1px; 137 | border: 1px solid #ffffff; 138 | background: #ff2f40; 139 | color: #f9f9f9; 140 | font-size: 12px; 141 | font-family: BlinkMacSystemFont; 142 | font-style: normal; 143 | } 144 | 145 | .sidebar button span { 146 | font-size: 17px; 147 | } 148 | 149 | .sidebar > nav { 150 | flex: 1 1 auto; 151 | display: flex; 152 | flex-direction: column; 153 | width: 100%; 154 | } 155 | 156 | .sidebar > nav button:last-child { 157 | margin-top: auto; 158 | } 159 | -------------------------------------------------------------------------------- /sidebar-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar 7 8 | 12 | 13 | 14 | 15 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /sidebar-7/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | :root { 6 | --color-primary: #8f44fd; 7 | --tab-width: 240px; 8 | --button-width: 80px; 9 | } 10 | 11 | html, 12 | body, 13 | .wrapper { 14 | height: 100%; 15 | } 16 | 17 | body { 18 | display: grid; 19 | place-items: center; 20 | margin: 0; 21 | font-family: "Euclid Circular A"; 22 | line-height: 1.5; 23 | background: #24262a; 24 | color: #f9f9f9; 25 | } 26 | 27 | .sidebar { 28 | position: fixed; 29 | top: 0; 30 | left: 0; 31 | height: 100%; 32 | width: var(--tab-width); 33 | background: #17181a; 34 | } 35 | 36 | input { 37 | display: none; 38 | } 39 | 40 | h2 { 41 | margin: 0 0 10px; 42 | font-size: 18px; 43 | font-weight: 400; 44 | } 45 | 46 | .content { 47 | position: relative; 48 | overflow: hidden; 49 | height: 140px; 50 | } 51 | 52 | .content-inner { 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | display: flex; 57 | align-items: center; 58 | width: calc(var(--tab-width) * 3); 59 | transition: 0.3s; 60 | } 61 | 62 | .content-inner > div { 63 | width: inherit; 64 | padding: 20px; 65 | } 66 | 67 | label { 68 | text-align: center; 69 | padding: 20px 0; 70 | font-size: 15px; 71 | width: var(--button-width); 72 | opacity: 0.35; 73 | cursor: pointer; 74 | } 75 | 76 | p { 77 | margin: 0; 78 | font-size: 14px; 79 | color: #888889; 80 | } 81 | 82 | .buttons { 83 | position: relative; 84 | display: flex; 85 | border-bottom: 1px solid #575757; 86 | } 87 | 88 | .underline { 89 | position: absolute; 90 | left: 0; 91 | bottom: 0; 92 | width: var(--button-width); 93 | height: 3px; 94 | background: var(--color-primary); 95 | transition: 0.2s; 96 | } 97 | 98 | .tabs input:nth-child(1):checked ~ .buttons .underline { 99 | translate: 0 0; 100 | } 101 | 102 | .tabs input:nth-child(2):checked ~ .buttons .underline { 103 | translate: var(--button-width) 0; 104 | } 105 | 106 | .tabs input:nth-child(3):checked ~ .buttons .underline { 107 | translate: calc(var(--button-width) * 2) 0; 108 | } 109 | 110 | .tabs input:nth-child(1):checked ~ .buttons label:nth-child(1), 111 | .tabs input:nth-child(2):checked ~ .buttons label:nth-child(2), 112 | .tabs input:nth-child(3):checked ~ .buttons label:nth-child(3) { 113 | opacity: 1; 114 | } 115 | 116 | .tabs input:nth-child(1):checked ~ .content > .content-inner { 117 | translate: 0 0; 118 | } 119 | 120 | .tabs input:nth-child(2):checked ~ .content > .content-inner { 121 | translate: calc(0px - var(--tab-width)) 0; 122 | } 123 | 124 | .tabs input:nth-child(3):checked ~ .content > .content-inner { 125 | translate: calc(0px - var(--tab-width) * 2) 0; 126 | } 127 | -------------------------------------------------------------------------------- /sidebar-8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram 8 | 12 | 13 | 14 | 15 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /sidebar-8/joe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-8/joe.png -------------------------------------------------------------------------------- /sidebar-8/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /sidebar-8/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background: #000000; 8 | color: #ffffff; 9 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 10 | Ubuntu, "Helvetica Neue", sans-serif; 11 | } 12 | 13 | .material-symbols-outlined { 14 | font-size: 22px; 15 | } 16 | 17 | .sidebar { 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | display: flex; 22 | flex-direction: column; 23 | align-items: flex-start; 24 | width: 250px; 25 | height: 100%; 26 | padding: 40px 10px 30px 10px; 27 | border-right: 1px solid #2f3336; 28 | } 29 | 30 | .sidebar-header { 31 | width: 100%; 32 | margin-bottom: 16px; 33 | } 34 | 35 | .logo-img { 36 | width: 32px; 37 | margin-left: 10px; 38 | } 39 | 40 | .sidebar button { 41 | height: 60px; 42 | background: transparent; 43 | border: 0; 44 | padding: 0; 45 | font-family: inherit; 46 | color: inherit; 47 | cursor: pointer; 48 | text-align: left; 49 | } 50 | 51 | .sidebar button > span { 52 | display: inline-flex; 53 | align-items: center; 54 | gap: 12px; 55 | height: 48px; 56 | padding: 0 16px 0 12px; 57 | border-radius: 24px; 58 | line-height: 1; 59 | } 60 | 61 | .sidebar button:hover > span { 62 | background: rgba(255, 255, 255, 0.08); 63 | } 64 | 65 | .sidebar button i { 66 | position: relative; 67 | font-size: 28px; 68 | transition: 0.2s; 69 | } 70 | 71 | .sidebar button img { 72 | width: 32px; 73 | height: 32px; 74 | } 75 | 76 | .sidebar button i > span { 77 | display: grid; 78 | place-items: center; 79 | padding: 2px 5px; 80 | border-radius: 10px; 81 | position: absolute; 82 | top: -5px; 83 | left: 50%; 84 | translate: -50% 0; 85 | background: #1d9bf0; 86 | color: #f9f9f9; 87 | font-size: 10px; 88 | font-family: BlinkMacSystemFont; 89 | font-style: normal; 90 | } 91 | 92 | .sidebar button span { 93 | font-size: 17px; 94 | } 95 | 96 | .sidebar > nav { 97 | flex: 1 1 auto; 98 | display: flex; 99 | flex-direction: column; 100 | width: 100%; 101 | } 102 | 103 | .sidebar > nav button:last-child { 104 | margin-top: auto; 105 | } 106 | 107 | button.tweet-button { 108 | text-align: center; 109 | } 110 | 111 | button.tweet-button > span { 112 | background: #1d9bf0; 113 | width: 100%; 114 | justify-content: center; 115 | } 116 | 117 | button.user-button .fullname { 118 | font-size: 15px; 119 | } 120 | 121 | button.user-button .username { 122 | color: rgba(255, 255, 255, 0.4); 123 | font-size: 12px; 124 | } 125 | 126 | button.tweet-button i { 127 | display: none; 128 | } 129 | 130 | button.tweet-button span > span { 131 | display: block; 132 | } 133 | 134 | button.user-button span { 135 | width: 100%; 136 | } 137 | 138 | button.user-button span > span { 139 | display: grid; 140 | gap: 4px; 141 | width: 100%; 142 | } 143 | 144 | button.user-button span > i { 145 | font-size: 20px; 146 | margin-left: auto; 147 | } 148 | 149 | @media (width < 580px) { 150 | .sidebar { 151 | width: 72px; 152 | } 153 | 154 | .sidebar button > span { 155 | width: 50px; 156 | } 157 | 158 | .sidebar button > span > span { 159 | opacity: 0; 160 | visibility: hidden; 161 | } 162 | 163 | button.tweet-button i { 164 | display: inline-flex; 165 | } 166 | 167 | button.tweet-button span > span { 168 | display: none; 169 | } 170 | 171 | button.user-button span > i { 172 | display: none; 173 | } 174 | } 175 | --------------------------------------------------------------------------------