🎨 cleanup

equinor · Jan 27, 2025 · f40d56f · f40d56f
1 parent 92debd5
commit f40d56f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 42 deletions.
diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -847,6 +847,11 @@ const snippets: textSnippet = {
     defaultValue: 'Local',
     group: groups.common,
   },
+  global: {
+    title: 'Global',
+    defaultValue: 'Global',
+    group: groups.common,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

diff --git a/web/core/Link/StickyMenuLink.tsx b/web/core/Link/StickyMenuLink.tsx
@@ -1,12 +1,7 @@
 import { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { BaseLink, BaseLinkProps } from './BaseLink'
-import { TransformableIcon } from '../../icons/TransformableIcon'
-import { arrow_down, library_pdf } from '@equinor/eds-icons'
 import { PiFilePdfThin } from 'react-icons/pi'
-import { ArrowRight } from 'icons'
-import envisTwMerge from 'twMerge'
-import { getArrowAnimation, iconRotation } from './ResourceLink'
 
 export type StickMenuLinkProps = {
   isDownloadable?: boolean
@@ -17,17 +12,9 @@ export const StickyMenuLink = forwardRef<HTMLAnchorElement, StickMenuLinkProps>(
   { children, type = 'internalUrl', className = '', href = '', isDownloadable = false, ...rest },
   ref,
 ) {
-  const iconClassNames = `size-arrow-right
-    text-energy-red-100
-    dark:text-white-100
-    rotate-90
-    group-hover:translate-y-0.5
-    transition-all
-    duration-300
-  `
-
   return (
     <BaseLink
+      type={type}
       className={twMerge(
         `group
         relative 
@@ -45,15 +32,6 @@ export const StickyMenuLink = forwardRef<HTMLAnchorElement, StickMenuLinkProps>(
     >
       {isDownloadable && <PiFilePdfThin className="mr-2" />}
       <div className={`w-fit group-hover:underline no-underline leading-none align-middle`}>{children}</div>
-      {/*       {isDownloadable && (
-        <div className={`flex flex-col px-1 ml-2 xl:ml-4 -translate-y-[3px]`}>
-          <ArrowRight className={iconClassNames} />
-          <div className="bg-energy-red-100 h-[2px] w-full" />
-        </div>
-      )} */}
-      {/*       {!isDownloadable && (
-        <TransformableIcon iconData={arrow_down} className="text-energy-red-100 dark:text-white-100 ml-4" />
-      )} */}
     </BaseLink>
   )
 })

diff --git a/web/core/Topbar/Topbar.tsx b/web/core/Topbar/Topbar.tsx
@@ -2,6 +2,7 @@ import { forwardRef, HTMLAttributes, useEffect, useMemo, useRef, useState } from
 import { mergeRefs } from '@equinor/eds-utils'
 import { StickyMenuData } from '../../types/index'
 import StickyMenu from '@sections/StickyMenu/StickyMenu'
+import { useIntl } from 'react-intl'
 
 export type TopbarProps = {
   stickyMenuData?: StickyMenuData
@@ -13,7 +14,7 @@ export const Topbar = forwardRef<HTMLDivElement, TopbarProps>(function Topbar(
 ) {
   const topbarRef = useRef<HTMLDivElement>(null)
   const combinedTopbarRef = useMemo(() => mergeRefs<HTMLDivElement>(topbarRef, ref), [topbarRef, ref])
-
+  const intl = useIntl()
   const [height, setHeight] = useState(0)
   const [prevScrollPos, setPrevScrollPos] = useState(0)
   const [isVisible, setIsVisible] = useState(true)
@@ -80,29 +81,35 @@ export const Topbar = forwardRef<HTMLDivElement, TopbarProps>(function Topbar(
     }
   }, [isVisible, topbarRef])
 
-  const animateScrollUpClassName = `
-  [will-change:transform]
-  [transition-behavior:allow-discrete]
-  animate-height
-  ${isVisible ? 'top-0' : '-top-[var(--topbar-height)]'} 
-  [transition-property:height]
-  [transition-property:padding]
-  ease-in-out 
-  duration-400 
-  `
-
   return (
     <>
-      <div
+      <nav
         ref={combinedTopbarRef}
-        className={`w-screen sticky bg-white-100 z-40 ${animateScrollUpClassName}
-      ${hasDropShadow ? 'shadow-top-bar' : ''}`}
+        aria-label={intl.formatMessage({
+          id: 'global',
+          defaultMessage: 'Global',
+        })}
+        role="navigation"
+        className={`
+          w-screen 
+          ${stickyMenuData ? 'sticky' : 'fixed'} 
+          bg-white-100
+          z-40
+          animate-height
+          [transition-property:top]
+          ease-in-out  
+          duration-300
+          ${isVisible ? 'top-0' : '-top-[var(--topbar-height)]'} 
+          ${hasDropShadow ? 'shadow-top-bar' : ''}`}
         {...rest}
       >
         <div className="px-layout-sm max-w-viewport mx-auto flex items-center justify-between py-4">{children}</div>
-      </div>
+      </nav>
       {stickyMenuData && (
-        <StickyMenu stickyMenuData={stickyMenuData} className={`${isVisible ? 'top-[80px] pt-2' : 'top-0'}`} />
+        <StickyMenu
+          stickyMenuData={stickyMenuData}
+          className={`${isVisible ? 'top-[calc(var(--topbar-height)-1px)] pt-2' : 'top-0'}`}
+        />
       )}
     </>
   )

diff --git a/web/sections/StickyMenu/StickyMenu.tsx b/web/sections/StickyMenu/StickyMenu.tsx
@@ -22,13 +22,27 @@ export const StickyMenu = forwardRef<HTMLElement, StickyMenuProps>(function Stic
 
   return (
     <nav
+      {...rest}
       ref={ref}
       aria-label={intl.formatMessage({
         id: 'local',
         defaultMessage: 'Local',
       })}
       role="navigation"
-      className={envisTwMerge(`sticky top-0 [will-change:transform] ${twBg} w-full shadow-md z-10 py-4`, className)}
+      className={envisTwMerge(
+        `
+        sticky
+        top-0
+        [transition-property:top]
+        ease-in-out  
+        duration-300
+        ${twBg} 
+        w-full
+        shadow-md
+        z-10
+        py-4`,
+        className,
+      )}
     >
       <div className={`flex flex-col lg:flex-row gap-y-3 lg:justify-between px-layout-sm max-w-viewport mx-auto`}>
         <div className={`text-start font-medium text-base`}>{stickyMenuData?.title}</div>

diff --git a/web/styles/tailwind.css b/web/styles/tailwind.css
@@ -274,7 +274,8 @@
 
   @starting-style {
     .topbar-height {
-      top: var(--topbar-height);
+      /*top: var(--topbar-height);*/
+      top: 0;
     }
   }
 }