@gsa-tts/graymatter-ui 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/DesktopSideNav.svelte

@@ -20,7 +20,7 @@
   import MenuIcon from './icons/MenuIcon.svelte';
   import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
-  import HelpIcon from './icons/HelpIcon.svelte';
+  // import HelpIcon from './icons/HelpIcon.svelte';
   const urls = getAppUrls();
 
   const {
@@ -41,7 +41,7 @@
   let hoveredItem = $state<string | null>(null);
   let menuButtonHovered = $state(false);
   let canHover = $state(false);
-  let helpIconHovered = $state(false);
+  // let helpIconHovered = $state(false);
   let discoverNavRef = $state<HTMLAnchorElement | null>(null);
   let chatNavRef = $state<HTMLAnchorElement | null>(null);
   let consoleNavRef = $state<HTMLAnchorElement | null>(null);
@@ -349,7 +349,8 @@
 
     {#if profileMenuData}
     <div class="nav-footer" part="nav-footer">
-      <div class="nav-footer-icon-container">
+      <!-- TODO: Add help icon back in when we have decided on full functionality-->
+      <!-- <div class="nav-footer-icon-container">
         <button
           type="button"
           class="nav-footer-icon-inner"
@@ -364,14 +365,14 @@
             <HelpIcon isHovered={helpIconHovered} />
           </div>
         </button>
-      </div>
+      </div> -->
       <div class="nav-footer-profile-container">
-
-      <ProfileMenu
-        userMeta={profileMenuData?.userMeta}
-        menuItems={profileMenuData?.menuItems}
-        ariaLabel="Open profile menu"
-      />
+        <ProfileMenu
+          userMeta={profileMenuData?.userMeta}
+          menuItems={profileMenuData?.menuItems}
+          ariaLabel="Open profile menu"
+          menuAlign="desktop"
+        />
       </div>
     </div>
     {/if}
@@ -661,7 +662,7 @@
     color: var(--ai-color-neutral-700);
   }
 
-  .nav-footer-icon-container {
+  /* .nav-footer-icon-container {
     display: flex;
     padding: 0 var(--ai-size-4);
     flex-direction: column;
@@ -669,7 +670,7 @@
     align-items: center;
     gap: var(--ai-size-4);
     align-self: stretch;
-  }
+  } */
 
   .nav-footer-profile-container {
     display: flex;
@@ -680,7 +681,7 @@
     gap: var(--ai-size-4);
     align-self: stretch;
   }
-  .nav-footer-icon-inner {
+  /* .nav-footer-icon-inner {
     display: flex;
     width: var(--ai-size-40);
     height: var(--ai-size-40);
@@ -692,8 +693,8 @@
     border: none;
     cursor: pointer;
     transition: background-color 0.3s ease, border-radius 0.3s ease;
-  }
-  .nav-footer-icon-inner:hover,
+  } */
+  /* .nav-footer-icon-inner:hover,
   .nav-footer-icon-inner:focus {
     background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-4);
@@ -713,5 +714,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-  }
+  } */
 </style>

package/src/styles/base/global.css

@@ -10,5 +10,11 @@
 
 /* Ensure anchor targets are not hidden behind fixed header */
 [id] {
-  scroll-margin-top: 56px;
+  scroll-margin-top: var(--ai-size-56);
+}
+
+/* Custom scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #848fa4 transparent;
 }