Move the version information to the bottom of the sidemenu.

ui/src/app.tsx

@@ -20,7 +20,6 @@ import RoleManagement from "./pages/management/roleManagement";
 import Home from "./pages/home/home";
 import Projects from "./pages/project/projects";
 import { getMsalConfig } from "./utils/utils";
-import Footer from "@/components/footer";
 
 const queryClient = new QueryClient();
 
@@ -34,7 +33,7 @@ const App = () => {
           <BrowserRouter>
             <Layout style={{ minHeight: "100vh", position: "relative" }}>
               <SideMenu />
-              <Layout>
+              <Layout style={{ position: "relative" }}>
                 <Header />
                 <Layout.Content>
                   <Routes>
@@ -69,7 +68,6 @@ const App = () => {
                     />
                   </Routes>
                 </Layout.Content>
-                <Footer />
               </Layout>
             </Layout>
           </BrowserRouter>

ui/src/components/header/header.tsx

@@ -1,22 +1,23 @@
 import React from "react";
 import { Layout } from "antd";
 import { useAccount, useMsal } from "@azure/msal-react";
-import "./header.css";
 import HeaderWidget from "./headerWidget";
 
+import styles from "./index.module.less";
+
 const Header = () => {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
   return (
-    <Layout.Header
-      className="layout-header"
-      style={{ backgroundColor: "#fff", height: "auto" }}
-    >
-      <span></span>
-      <span className="layout-header-right">
-        <HeaderWidget username={account?.username} />
-      </span>
-    </Layout.Header>
+    <>
+      <Layout.Header className={styles.header}>
+        <span></span>
+        <span className={styles.right}>
+          <HeaderWidget username={account?.username} />
+        </span>
+      </Layout.Header>
+      <div className={styles.vacancy} />
+    </>
   );
 };
 

ui/src/components/header/index.module.less

@@ -0,0 +1,48 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 200px;
+  right: 0;
+  z-index: 19;
+  background-color: rgb(255 255 255 / 40%);
+  backdrop-filter: blur(8px);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: 0;
+  padding-inline: 8px;
+  border-block-end: 1px solid rgb(0 0 0 / 6%);
+  justify-content: space-between;
+  display: flex;
+  height: auto;
+  line-height: 48px;
+  padding: 0 16px;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  :global {
+    .dropdown-trigger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2px;
+      padding: 2px 4px;
+      transition: all 0.3s;
+
+      &:hover {
+        cursor: pointer;
+        background: rgba(0, 0, 0, 0.025);
+      }
+    }
+  }
+}
+.vacancy {
+  background: #fff;
+  height: 50px;
+}

ui/src/components/sidemenu/VersionBar.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Space } from "antd";
+import dayjs from "dayjs";
+
+export interface VersionBarProps {
+  className?: string;
+}
+const VersionBar = (props: VersionBarProps) => {
+  const { className } = props;
+  const generatedTime = dayjs(process.env.FEATHR_GENERATED_TIME)
+    .utc()
+    .format("YYYY-MM-DD HH:mm:DD UTC");
+
+  return (
+    <Space className={className} direction="vertical" size="small">
+      <span>Feathr UI Version: {process.env.FEATHR_VERSION}</span>
+      <span>Feathr UI Build Generated at {generatedTime}</span>
+    </Space>
+  );
+};
+
+export default VersionBar;

ui/src/components/sidemenu/index.module.less

@@ -0,0 +1,19 @@
+.siderMenu {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+  :global {
+    .ant-layout-sider-children {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .versionBar {
+    margin-top: auto;
+    padding: 8px 20px;
+    font-size: 12px;
+    color: #fff;
+  }
+}

ui/src/components/sidemenu/siteMenu.tsx

@@ -10,6 +10,14 @@ import {
 } from "@ant-design/icons";
 import { Link, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
+import VersionBar from "./VersionBar";
+
+import styles from "./index.module.less";
+
+export interface SiderMenuProps {
+  collapsedWidth?: number;
+  siderWidth?: number;
+}
 
 const { Title } = Typography;
 const { Sider } = Layout;
@@ -64,35 +72,58 @@ const getMenuKey = (pathname: string) => {
   return pathname.split("/")[1].toLocaleLowerCase();
 };
 
-const SideMenu = () => {
+const defaultProps = {
+  collapsedWidth: 60,
+  siderWidth: 200,
+};
+
+const SideMenu = (props: SiderMenuProps) => {
   const location = useLocation();
 
+  const { siderWidth, collapsedWidth } = { ...defaultProps, ...props };
+
+  const [collapsed] = useState<boolean>(false);
+
   const [current, setcurrent] = useState<string>(getMenuKey(location.pathname));
 
   useEffect(() => {
     setcurrent(getMenuKey(location.pathname));
   }, [location.pathname]);
 
   return (
-    <Sider theme="dark">
-      <Title
-        level={1}
+    <>
+      <div
         style={{
-          fontSize: "36px",
-          color: "white",
-          margin: "10px",
-          paddingLeft: "35px",
+          width: collapsed ? collapsedWidth : siderWidth,
+          overflow: "hidden",
+          flex: `0 0 ${collapsed ? collapsedWidth : siderWidth}px`,
+          maxWidth: collapsed ? collapsedWidth : siderWidth,
+          minWidth: collapsed ? collapsedWidth : siderWidth,
+          transition: "all 0.2s ease 0s",
         }}
-      >
-        Feathr
-      </Title>
-      <Menu
-        theme="dark"
-        mode="inline"
-        selectedKeys={[current]}
-        items={menuItems}
       />
-    </Sider>
+      <Sider className={styles.siderMenu} theme="dark" width={siderWidth}>
+        <Title
+          level={1}
+          style={{
+            fontSize: "36px",
+            color: "white",
+            margin: "10px",
+            paddingLeft: "35px",
+          }}
+        >
+          Feathr
+        </Title>
+        <Menu
+          theme="dark"
+          mode="inline"
+          selectedKeys={[current]}
+          items={menuItems}
+        />
+
+        <VersionBar className={styles.versionBar} />
+      </Sider>
+    </>
   );
 };
 

ui/src/site.css

@@ -1,6 +1,5 @@
 .page {
   margin: 16px;
-  padding-bottom: 100px;
 }
 
 .card {