├── .gitignore ├── README.md ├── Sidebar #1 ├── index.html ├── logo.png └── style.css └── Sidebar #2 ├── index.html ├── logo.png ├── logo.svg └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A collection of ready to use sidebars built using CSS. -------------------------------------------------------------------------------- /Sidebar #1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Sidebar #1 | AsmrProg 10 | 11 | 12 | 13 | 68 | 69 | 70 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /Sidebar #1/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/css-sidebars/276ea6035198732274cdfdc27b434a4fe06c3e40/Sidebar #1/logo.png -------------------------------------------------------------------------------- /Sidebar #1/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | margin: 0; 9 | background: #121212; 10 | } 11 | 12 | button{ 13 | background: transparent; 14 | border: 0; 15 | padding: 0; 16 | cursor: pointer; 17 | } 18 | 19 | .sidebar{ 20 | position: absolute; 21 | overflow: hidden; 22 | top: 0; 23 | left: 0; 24 | width: 75px; 25 | height: 100%; 26 | background: #3949ab; 27 | transition: all 0.4s; 28 | } 29 | 30 | body.open .sidebar{ 31 | width: 240px; 32 | } 33 | 34 | .sidebar-inner{ 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 300px; 39 | } 40 | 41 | .sidebar-header{ 42 | display: flex; 43 | align-items: center; 44 | height: 68px; 45 | padding: 0 1.25rem 0 0; 46 | background: rgba(0, 0, 0, 0.1); 47 | border-left: 3px solid transparent; 48 | transition: all 0.4s; 49 | } 50 | 51 | .sidebar-header:hover{ 52 | border-left: 3px solid #bdbdbd; 53 | } 54 | 55 | .sidebar-burger{ 56 | width: 70px; 57 | height: 70px; 58 | display: grid; 59 | place-items: center; 60 | } 61 | 62 | .sidebar-burger > i, body.open .sidebar-burger > i{ 63 | font-size: 25px; 64 | color: #f9f9f9; 65 | transition: all 0.4s; 66 | } 67 | 68 | .sidebar-burger:hover > i, body.open .sidebar-burger:hover > i{ 69 | color: #bdbdbd; 70 | } 71 | 72 | .sidebar-logo{ 73 | height: 30px; 74 | opacity: 0; 75 | transition: all 0.4s; 76 | } 77 | 78 | body.open .sidebar-logo{ 79 | opacity: 1; 80 | transition: all 0.4s; 81 | } 82 | 83 | .sidebar-menu{ 84 | display: grid; 85 | } 86 | 87 | .sidebar-menu > button{ 88 | display: flex; 89 | gap: 12px; 90 | align-items: center; 91 | height: 55px; 92 | font-family: "Ubuntu"; 93 | font-size: 16px; 94 | font-weight: 400; 95 | letter-spacing: 2px; 96 | line-height: 1; 97 | padding: 0 22px; 98 | border-left: 3px solid transparent; 99 | transition: all 0.4s; 100 | } 101 | 102 | .sidebar-menu > button:hover{ 103 | border-left: 3px solid #f9f9f9; 104 | } 105 | 106 | .sidebar-menu > button.has-border{ 107 | padding-bottom: 1rem; 108 | border-bottom: 1px solid rgba(255, 255, 255, 0.12); 109 | margin-bottom: 1rem; 110 | } 111 | 112 | .sidebar-menu > button > i{ 113 | font-size: 25px; 114 | color: #f9f9f9; 115 | transition: all 0.4s; 116 | } 117 | 118 | .sidebar-menu > button:hover > i, .sidebar-menu > button:hover > span{ 119 | color: #bdbdbd; 120 | } 121 | 122 | .sidebar-menu > button > span{ 123 | color: #f9f9f9; 124 | opacity: 0; 125 | transition: all 0.4s; 126 | } 127 | 128 | body.open .sidebar-menu > button > span{ 129 | opacity: 1; 130 | transition: all 0.4s; 131 | } -------------------------------------------------------------------------------- /Sidebar #2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Sidebar #2 | AsmrProg 10 | 11 | 12 | 13 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /Sidebar #2/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/css-sidebars/276ea6035198732274cdfdc27b434a4fe06c3e40/Sidebar #2/logo.png -------------------------------------------------------------------------------- /Sidebar #2/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Sidebar #2/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | margin: 0; 7 | background: #fafafa; 8 | color: #262626; 9 | font-family: 'Segoe UI'; 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: #fff; 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 | cursor: pointer; 52 | } 53 | 54 | .sidebar button > span{ 55 | display: flex; 56 | align-items: center; 57 | gap: 12px; 58 | height: 48px; 59 | padding: 0 12px; 60 | border-radius: 24px; 61 | line-height: 1; 62 | } 63 | 64 | .sidebar button:hover > span{ 65 | background: #f2f2f2; 66 | } 67 | 68 | .sidebar button:hover > span :is(i, img){ 69 | scale: 1.05; 70 | } 71 | 72 | .sidebar button > span > span{ 73 | transition: 0.3s; 74 | } 75 | 76 | .sidebar button i{ 77 | position: relative; 78 | font-size: 28px; 79 | transition: 0.2s; 80 | } 81 | 82 | .sidebar button img{ 83 | width: 28px; 84 | height: 28px; 85 | transition: 0.2s; 86 | } 87 | 88 | .sidebar button i > span{ 89 | display: grid; 90 | place-items: center; 91 | height: 20px; 92 | padding: 0 4px; 93 | border-radius: 10px; 94 | position: absolute; 95 | top: -5px; 96 | right: -10px; 97 | border: 1px solid #fff; 98 | background: #ff2f40; 99 | color: #f9f9f9; 100 | font-size: 12px; 101 | font-family: 'Segoe UI'; 102 | } 103 | 104 | .sidebar button i > em{ 105 | display: block; 106 | width: 10px; 107 | height: 10px; 108 | background: #ff2f40; 109 | position: absolute; 110 | border-radius: 10px; 111 | top: 2px; 112 | right: -1px; 113 | border: 1px solid #fff; 114 | color: #f9f9f9; 115 | font-size: 12px; 116 | font-family: 'Segoe UI'; 117 | } 118 | 119 | .sidebar button span{ 120 | font-size: 17px; 121 | } 122 | 123 | .sidebar > nav{ 124 | flex: 1 1 auto; 125 | display: flex; 126 | flex-direction: column; 127 | width: 100%; 128 | } 129 | 130 | .sidebar > nav button:last-child{ 131 | margin-top: auto; 132 | } 133 | 134 | @media (width < 500px){ 135 | .logo-img{ 136 | display: none; 137 | } 138 | 139 | .logo-icon{ 140 | display: block; 141 | } 142 | 143 | .sidebar{ 144 | width: 72px; 145 | } 146 | 147 | .sidebar button > span{ 148 | width: 50px; 149 | } 150 | 151 | .sidebar button > span > span{ 152 | opacity: 0; 153 | visibility: hidden; 154 | } 155 | 156 | } --------------------------------------------------------------------------------