upgrade to bulma style

src/components/Navigations/MainNavigation.css

@@ -5,22 +5,53 @@
     padding: 1rem;
 }
 
-.main-navigation ul {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+.main-navigation .navbar {
+    background-color: #333 !important;
 }
 
-.main-navigation ul li {
-    margin-right: 1rem;
+.main-navigation .navbar-item {
+    color: white !important;
+    font-weight: bold;
 }
 
-.main-navigation ul li a {
+.main-navigation .navbar-item:hover {
+    background-color: #444 !important;
+    color: #f5f5f5 !important;
+}
+
+.main-navigation .button {
+    margin-left: 0.5rem;
+}
+
+.main-navigation .button.is-primary {
+    background-color: #007BFF;
+    border-color: #0056b3;
+}
+
+.main-navigation .button.is-primary:hover {
+    background-color: #0056b3;
+    border-color: #003f7f;
+}
+
+.main-navigation .button.is-danger {
+    background-color: #e3342f;
+    border-color: #a21c1c;
+}
+
+.main-navigation .button.is-danger:hover {
+    background-color: #a21c1c;
+    border-color: #6c0e0e;
+}
+
+.main-navigation .navbar-burger {
     color: white;
-    text-decoration: none;
 }
 
-.main-navigation ul li a:hover {
-    text-decoration: underline;
+.main-navigation .navbar-burger:hover {
+    background-color: #444;
+}
+
+.main-navigation .navbar-item:not(:last-child) {
+    border-right: 1px solid #555;
+    padding-right: 1rem;
 }