@buerokratt-ria/menu 0.2.9 → 0.2.10

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All changes to this project will be documented in this file.
 
+## [0.2.10] - 07-01-2026
+
+- Added current version environment variable
+
 ## [0.2.9] - 12-11-2025
 
 - Added path /anonymizer to menu items

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/menu",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Generic MainNavigation component that would be injected as dependency.",
   "main": "index.js",
   "scripts": {},

package/src/menu/index.tsx

@@ -34,18 +34,23 @@ const MainNavigation: FC<MainNavigationProps> = ({countConf}) => {
   if (!menuItems) return null;
 
   return (
-    <nav className={clsx('nav', { 'collapsed': navCollapsed })}>
-      <button className='nav__menu-toggle close-button-item' onClick={handleCloseButtonClick}>
-        <Icon icon={<MdClose />} />
-        <span className='menu-item-title'>{t(navCollapsed ? 'mainMenu.openMenu' : 'mainMenu.closeMenu' )}</span>
-      </button>
-      <ul className='nav__menu'>
-        <MenuTree
-          menuItems={menuItems}
-          serviceId={serviceId}
-          handleNavToggle={handleNavToggle}
-        />
-      </ul>
+    <nav className={clsx("nav", { collapsed: navCollapsed })}>
+      <div className="nav__wrapper">
+        <button className="nav__menu-toggle close-button-item" onClick={handleCloseButtonClick}>
+          <Icon icon={<MdClose />} />
+          <span className="menu-item-title">{t(navCollapsed ? "mainMenu.openMenu" : "mainMenu.closeMenu")}</span>
+        </button>
+
+        <div className="nav__content">
+          <ul className="nav__menu">
+            <MenuTree menuItems={menuItems} serviceId={serviceId} handleNavToggle={handleNavToggle} />
+          </ul>
+        </div>
+
+        {import.meta.env.REACT_APP_CURRENT_VERSION && (
+          <div className="nav__version-bar">{import.meta.env.REACT_APP_CURRENT_VERSION}</div>
+        )}
+      </div>
     </nav>
   );
 };

package/src/menu/main-navigation.scss

@@ -9,11 +9,32 @@
   overflow: auto;
   scrollbar-width: none;
   transition: width .1s ease-out;
+  display: flex;
+  height: 100vh;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
+  &__wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: none;
+    padding-bottom: 50px;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   li, a, .nav__toggle, .nav__menu-toggle {
     font-size: 14px;
     line-height: 1.5;
@@ -113,6 +134,29 @@
       }
     }
   }
+
+  &__version-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    background-color: get-color(sapphire-blue-10);
+    z-index: 100;
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 5px 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    text-align: center;
+    border-top: 1px solid get-color(sapphire-blue-14);
+  }
 }
 
 .collapsed {