Responsive sidenav with active item indicator (#370)

CERT-Polska · May 13, 2021 · e5b8954 · e5b8954
1 parent 85b2a39
commit e5b8954
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/mwdb/web/src/components/Profile/ProfileView.js b/mwdb/web/src/components/Profile/ProfileView.js
@@ -27,7 +27,7 @@ function ProfileNav() {
             <strong>
                 <FontAwesomeIcon icon={faUserCog} /> Profile
             </strong>
-            <div className="nav flex-column">
+            <div className="nav sidenav flex-column">
                 <NavLink exact to="/profile" className="nav-link">
                     Profile details
                 </NavLink>
@@ -41,6 +41,7 @@ function ProfileNav() {
                     API keys
                 </NavLink>
             </div>
+            <hr />
         </div>
     );
 }
@@ -74,10 +75,10 @@ export default function ProfileView() {
     return (
         <View ident="profile" fluid>
             <div className="row">
-                <div className="col-2">
+                <div className="col-sm-2">
                     <ProfileNav />
                 </div>
-                <div className="col-8">
+                <div className="col-sm-8">
                     <Switch>
                         <Route exact path={["/profile", "/profile/user/:user"]}>
                             <ProfileDetails profile={profile} />

diff --git a/mwdb/web/src/components/Settings/SettingsView.js b/mwdb/web/src/components/Settings/SettingsView.js
@@ -54,7 +54,7 @@ function SettingsNav() {
         ...(auth.hasCapability(Capability.managingAttributes) ||
         auth.hasCapability(Capability.manageUsers)
             ? [
-                  <NavLink to="/admin" className="nav-link">
+                  <NavLink exact to="/admin" className="nav-link">
                       Overview
                   </NavLink>,
               ]
@@ -109,11 +109,12 @@ function SettingsNav() {
                     <strong>
                         <FontAwesomeIcon icon={faUsersCog} /> Administration
                     </strong>
-                    <div className="nav flex-column">{adminLinks}</div>
+                    <div className="nav sidenav flex-column">{adminLinks}</div>
                 </React.Fragment>
             ) : (
                 []
             )}
+            <hr />
         </div>
     );
 }
@@ -127,10 +128,10 @@ export default function SettingsView(props) {
             fluid
         >
             <div className="row">
-                <div className="col-2">
+                <div className="col-sm-2">
                     <SettingsNav />
                 </div>
-                <div className="col-8">
+                <div className="col-sm-8">
                     <div className="tab-content">
                         <Switch>
                             <Route exact path="/admin">

diff --git a/mwdb/web/src/styles/index.css b/mwdb/web/src/styles/index.css
@@ -151,6 +151,18 @@ div.quick-query-bar {
     margin-bottom: 6pt;
 }
 
+.sidenav .nav-link {
+    border-left: #eee solid;
+}
+
+.sidenav .nav-link.active {
+    border-left-color: var(--blue);
+}
+
+.sidenav .nav-link:hover {
+    border-left-color: var(--info);
+}
+
 /***
 	Material Design Switches for Bootstrap 4 and Material Design Bootstrap (MDB)
 	by djibe