Constant navbar width (#216)

- Navbar items have now a fixed witdth when they become active
kopia · Nov 22, 2023 · 467920f · 467920f
1 parent f2d98ea
commit 467920f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -105,14 +105,14 @@ export default class App extends Component {
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="me-auto">
-                  <NavLink data-testid="tab-snapshots" className="nav-link" activeClassName="active" to="/snapshots">Snapshots</NavLink>
-                  <NavLink data-testid="tab-policies" className="nav-link" activeClassName="active" to="/policies">Policies</NavLink>
-                  <NavLink data-testid="tab-tasks" className="nav-link" activeClassName="active" to="/tasks">Tasks <>
+                  <NavLink data-testid="tab-snapshots" data-title="Snapshots" className="nav-link" activeClassName="active" to="/snapshots">Snapshots</NavLink>
+                  <NavLink data-testid="tab-policies" data-title="Policies" className="nav-link" activeClassName="active" to="/policies">Policies</NavLink>
+                  <NavLink data-testid="tab-tasks" data-title="Tasks" className="nav-link" activeClassName="active" to="/tasks">Tasks <>
                     {runningTaskCount > 0 && <>({runningTaskCount})</>}
                   </>
                   </NavLink>
-                  <NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
-                  <NavLink data-testid="tab-preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
+                  <NavLink data-testid="tab-repo" data-title="Repository" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
+                  <NavLink data-testid="tab-preferences" data-title="Preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>

diff --git a/src/css/App.css b/src/css/App.css
@@ -107,6 +107,16 @@ body {
 #kopia .navbar-light .navbar-nav .nav-link.active,
 #kopia .navbar-light .navbar-nav .show>.nav-link {
   color: var(--color-text-nav);
+  text-align: center;
+}
+
+#kopia .navbar-light .navbar-nav .nav-link::after {
+  display: block;
+  content: attr(data-title);
+  font-weight: bold;
+  height: 0px;
+  overflow: hidden;
+  visibility: hidden;
 }
 
 #kopia .navbar-light .navbar-nav .nav-link:hover {