feat: sidebar and new layout

build/asset-manifest.json

@@ -12,7 +12,9 @@
     "static/media/ST_icon_dark_theme.svg": "/static/media/ST_icon_dark_theme.svg",
     "static/media/auth-method.svg": "/static/media/auth-method.svg",
     "static/media/logo.svg": "/static/media/logo.svg",
+    "static/media/roles-and-permissions.svg": "/static/media/roles-and-permissions.svg",
     "static/media/email.svg": "/static/media/email.svg",
+    "static/media/user-managment.svg": "/static/media/user-managment.svg",
     "static/media/lock.svg": "/static/media/lock.svg",
     "static/media/checkmark-green.svg": "/static/media/checkmark-green.svg",
     "static/media/clear.svg": "/static/media/clear.svg",

build/static/js/bundle.js.LICENSE.txt

@@ -52,6 +52,17 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * React Router DOM v6.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
 /**
  * React Router v6.3.0
  *

src/ui/components/footer/footer.scss

@@ -15,10 +15,11 @@
 
 .footer {
 	bottom: 0;
-	width: 100%;
+	width: 100vw;
 	min-height: 62px;
 	display: flex;
 	padding: 20px 32px;
+	z-index: 20;
 
 	.logo {
 		height: 23px;

src/ui/components/sidebar/index.tsx

@@ -0,0 +1,43 @@
+import { Link, useLocation } from "react-router-dom";
+
+import { ReactComponent as PermissionsIcon } from "../../../assets/roles-and-permissions.svg";
+import { ReactComponent as UserManagementIcon } from "../../../assets/user-managment.svg";
+
+import "./sidebar.scss";
+
+const sidebarItems = [
+	{
+		id: "user-management",
+		title: "User Management",
+		href: "/",
+		icon: <UserManagementIcon />,
+	},
+	{
+		id: "roles-and-permissions",
+		title: "Roles and Permissions",
+		href: "/roles",
+		icon: <PermissionsIcon />,
+	},
+];
+
+export default function SideBar() {
+	const location = useLocation();
+
+	return (
+		<aside className="sidebar">
+			<ul>
+				{sidebarItems.map((item) => {
+					return (
+						<li key={item.id}>
+							<Link
+								className={`${location.pathname === item.href ? "active" : ""}`}
+								to={item.href}>
+								{item.icon} <span>{item.title}</span>
+							</Link>
+						</li>
+					);
+				})}
+			</ul>
+		</aside>
+	);
+}

src/ui/components/sidebar/sidebar.scss

@@ -0,0 +1,54 @@
+.sidebar {
+	position: fixed;
+	height: 100vh;
+	width: var(--sidebar-width);
+	margin-top: 64px;
+	border-right: 1px solid var(--light-borders-border-base, #e5e7eb);
+	background-color: var(--color-window-bg);
+	z-index: 10;
+
+	ul {
+		list-style-type: none;
+	}
+
+	ul > li {
+		margin: 14px 16px;
+
+		& .active {
+			border-radius: 6px;
+			border: 1px solid rgba(255, 153, 51, 0.15);
+			background: rgba(255, 153, 51, 0.1);
+
+			color: #f93;
+			font-weight: 500;
+
+			& > svg {
+				stroke: var(--color-primary);
+			}
+		}
+	}
+
+	ul > li > a {
+		display: block;
+		padding: 6px 8px;
+		border-radius: 6px;
+
+		color: var(--light-foregrounds-fg-subtle, #4b5563);
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px;
+
+		border: 1px solid transparent;
+
+		text-decoration: none;
+
+		display: flex;
+		justify-content: flex-start;
+		gap: 12px;
+
+		&:hover:not(.active) {
+			background: #eee;
+		}
+	}
+}

src/ui/contexts/AppEnvContext.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import MainLayout from "../layouts";
 
 interface IAppEnvContext {
 	connectionURI: string;
@@ -31,5 +32,9 @@ export const AppEnvContextProvider: React.FC<IAppEnvContextProviderProps> = ({ c
 		isDemoConnectionURI: isDemoConnectionUri(connectionURI),
 	};
 
-	return <AppEnvContext.Provider value={contextValue}>{children}</AppEnvContext.Provider>;
+	return (
+		<AppEnvContext.Provider value={contextValue}>
+			<MainLayout>{children}</MainLayout>
+		</AppEnvContext.Provider>
+	);
 };

src/ui/layouts/index.tsx

@@ -0,0 +1,22 @@
+import { Footer } from "../components/footer/footer";
+import SideBar from "../components/sidebar";
+
+import "./mainLayout.scss";
+
+type MainLayoutProps = {
+	children: React.ReactNode;
+};
+
+export default function MainLayout({ children }: MainLayoutProps) {
+	return (
+		<main className="main-layout-container">
+			<SideBar />
+			<section className="main-content">{children}</section>
+			<Footer
+				colorMode="dark"
+				horizontalAlignment="center"
+				verticalAlignment="center"
+			/>
+		</main>
+	);
+}

src/ui/layouts/mainLayout.scss

@@ -0,0 +1,8 @@
+.main-layout-container {
+	display: block;
+
+	.main-content {
+		margin-left: var(--sidebar-width);
+		min-height: 100vh;
+	}
+}

src/ui/pages/userroles/index.tsx

@@ -15,7 +15,6 @@
 
 import { useEffect, useState } from "react";
 import useRolesService from "../../../api/userroles/role";
-import { Footer } from "../../components/footer/footer";
 import { AppEnvContextProvider } from "../../contexts/AppEnvContext";
 
 import { usePermissionsService } from "../../../api/userroles/role/permissions";
@@ -175,11 +174,11 @@ export default function UserRolesList() {
 					</ul>
 				</div>
 			</section>
-			<Footer
+			{/* <Footer
 				colorMode="dark"
 				horizontalAlignment="center"
 				verticalAlignment="center"
-			/>
+			/> */}
 		</AppEnvContextProvider>
 	);
 }

src/ui/pages/usersList/UsersList.tsx

@@ -26,7 +26,7 @@ import { localStorageHandler } from "../../../services/storage";
 import { AppEnvContextProvider, useAppEnvContext } from "../../../ui/contexts/AppEnvContext";
 import { getApiUrl, getAuthMode, isSearchEnabled, useFetchData } from "../../../utils";
 import { package_version } from "../../../version";
-import { Footer, LOGO_ICON_LIGHT } from "../../components/footer/footer";
+import { LOGO_ICON_LIGHT } from "../../components/footer/footer";
 import InfoConnection from "../../components/info-connection/info-connection";
 import NoUsers from "../../components/noUsers/NoUsers";
 import Search from "../../components/search";
@@ -262,11 +262,6 @@ export const UsersList: React.FC<UserListProps> = ({
 			/>
 			<h1 className="users-list-title">
 				User Management <span className="pill paid-feature-badge">Beta</span>
-				<button
-					onClick={() => navigate("/roles")}
-					className="pill paid-feature-badge">
-					Roles
-				</button>
 			</h1>
 			<p className="text-small users-list-subtitle">
 				One place to manage all your users, revoke access and edit information according to your needs.
@@ -459,11 +454,11 @@ export const UserListPage = () => {
 				onChangePasswordCallback={changePassword}
 				onDeleteCallback={({ id }) => onUserDelete(id)}
 			/>
-			<Footer
+			{/* <Footer
 				colorMode="dark"
 				horizontalAlignment="center"
 				verticalAlignment="center"
-			/>
+			/> */}
 		</AppEnvContextProvider>
 	);
 };

src/ui/styles/variables.css

@@ -91,6 +91,9 @@ body {
 	--color-popup-item-hover: rgb(240, 240, 240);
 	--color-popup-item-delete-hover: rgba(222, 35, 61, 0.12);
 	--color-button-outline-hover: rgb(250, 250, 250);
+
+	/* Sizes */
+	--sidebar-width: 240px;
 }
 
 *[data-theme="dark"] {