[REFACTOR] Align navbar button to the right when navbar collapsed

frontend/src/components/navbar.css

@@ -21,3 +21,13 @@
 #change-profile-nav {
   margin-bottom: -0.1rem;
 }
+
+@media (max-width: 573px) {
+  .navbar-button {
+    display: block;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    text-align: left;
+  }
+}

frontend/src/components/navbar.js

@@ -33,7 +33,7 @@ const Navbar = () => {
             <NavLink to="/">Home</NavLink>
             <NavLink to="/jadwal-donor">Jadwal Donor</NavLink>
             <Button
-              variant="red-transparent"
+              variant="red-transparent navbar-button"
               onClick={
                 user ? showModalEventDonorSubmission() : showModalLogin()
               }
@@ -46,7 +46,7 @@ const Navbar = () => {
           {user ? (
             <Nav>
               <Button
-                variant="red-transparent"
+                variant="red-transparent navbar-button"
                 onClick={showModalChangeProfile()}
               >
                 Ubah Profil
@@ -57,7 +57,10 @@ const Navbar = () => {
             </Nav>
           ) : (
             <Nav>
-              <Button variant="red-transparent" onClick={showModalLogin()}>
+              <Button
+                variant="red-transparent navbar-button"
+                onClick={showModalLogin()}
+              >
                 Masuk
               </Button>
               <Button variant="cream" onClick={showModalRegister()}>