.menu{ display: flex; flex-direction: column; align-items: center; background: rgb(0, 27, 45); width: 18vw; height: 100vh; transition: width 0.3s; } .menuHead{ display: flex; justify-content: center; align-items: center; padding: 0 20px; margin-top: 10px; font-size: 22px; font-weight: bold; margin-bottom: 100px; text-decoration: none; } .menuLogo{ width: 25%; height: 25%; } .menuHead a{ display: flex; align-items: center; color: white; text-decoration: none; } .menuHead button{ background: none; border-style: none; color: white; font-size: 35px; cursor: pointer; outline: none; } .menuHead button:hover{ color: rgb(201, 201, 201); } .menuHead > button::-moz-focus-inner{ border: 0; } .menu > button svg{ stroke: white; margin-right: 25px; } .menu > button{ display: flex; justify-content: row; align-items: center; background: none; border-style: none; color: white; font-size: 20px; margin: 15px 0; padding: 0 0 0 50px; width: 100%; height: 75px; cursor: pointer; text-align: left; border: 0; } .menu > button::-moz-focus-inner{ border: 0; } .menu > button:hover{ background: rgb(201, 201, 201); color: black; fill: black; } .menu > button:hover svg{ stroke: black; } .menu > .active{ background: rgb(179, 191, 209); cursor: default; } .menu > .active:hover{ background: rgb(179, 191, 209); color: white; } .menu > .active:hover svg{ stroke: white; } .logout{ display: flex; justify-content: center; position: absolute; bottom: 25px; color: white; text-decoration: none; font-size: 20px; } .logout img{ height: 25px; width: 25px; } /* Minimized menu */ .menuMinimized{ width: 5vw; } .menuLogoMin{ width: 100%; height: 100%; } .menuHeadMin{ flex-direction: column; } .menuMinimized button{ justify-content: center; padding: 0; } .menuMinimized button svg{ margin: 0; }