From fdf4b7e1f27206748439fec69ecc31f1bccc2bf9 Mon Sep 17 00:00:00 2001
From: Denys2002Holub <paloma20022001@gmail.com>
Date: Thu, 18 May 2023 15:13:09 +0200
Subject: [PATCH 1/2] 'NavLink' component with 'Button' as a child added

---
 src/webui/src/layout/AppBar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/webui/src/layout/AppBar.tsx b/src/webui/src/layout/AppBar.tsx
index 247c44d3d..a895be46d 100644
--- a/src/webui/src/layout/AppBar.tsx
+++ b/src/webui/src/layout/AppBar.tsx
@@ -2,21 +2,21 @@ import { Box, Typography } from "@mui/material";
 import { AppBar as MuiAppBar } from "@mui/material";
 import Button from "@mui/material/Button";
 import Toolbar from "@mui/material/Toolbar";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 
 import { routes } from "./Routes";
 
 export const AppBar = () => {
   const menuLinks = routes.map((item) => (
-    <Button
+    <NavLink
       key={item.link}
       to={item.link}
-      component={Link}
-      sx={{ color: "#fff" }}
     >
-      {item.title}
-    </Button>
+      {({ isActive }) => (
+        <Button variant={isActive ? "contained" : "text"} sx={{ color: "white" }} fullWidth>{item.title}</Button>
+      )}
+    </NavLink>
   ));
 
   return (

From e553c1f8177989d2a86376ba7b96b05e0da00784 Mon Sep 17 00:00:00 2001
From: Denys2002Holub <paloma20022001@gmail.com>
Date: Mon, 22 May 2023 12:30:45 +0200
Subject: [PATCH 2/2] button's size leap prevented

---
 src/webui/src/layout/AppBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webui/src/layout/AppBar.tsx b/src/webui/src/layout/AppBar.tsx
index a895be46d..286815562 100644
--- a/src/webui/src/layout/AppBar.tsx
+++ b/src/webui/src/layout/AppBar.tsx
@@ -14,7 +14,7 @@ export const AppBar = () => {
       to={item.link}
     >
       {({ isActive }) => (
-        <Button variant={isActive ? "contained" : "text"} sx={{ color: "white" }} fullWidth>{item.title}</Button>
+        <Button variant={isActive ? "contained" : "outlined"} sx={{ color: "white" }} style={{ border: 0 }} fullWidth>{item.title}</Button>
       )}
     </NavLink>
   ));