nicolium: revert change that didn't really have impact on performance

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/ui/layout.tsx

@@ -65,6 +65,26 @@ declare global {
   }
 }
 
+const useWindowControlsOverlay = () => {
+  const getRect = (): DOMRect | null => {
+    const overlay = navigator.windowControlsOverlay;
+    return overlay?.visible ? overlay.getTitlebarAreaRect() : null;
+  };
+
+  const [rect, setRect] = useState<DOMRect | null>(getRect);
+
+  useEffect(() => {
+    const overlay = navigator.windowControlsOverlay;
+    if (!overlay) return;
+
+    const update = () => setRect(overlay.visible ? overlay.getTitlebarAreaRect() : null);
+    overlay.addEventListener('geometrychange', update);
+    return () => overlay.removeEventListener('geometrychange', update);
+  }, []);
+
+  return rect;
+};
+
 /** Layout container, to hold Sidebar, Main, and Aside. */
 const Layout: LayoutComponent = ({ children, fullWidth }) => (
   <div className='⁂-layout'>
@@ -81,6 +101,8 @@ const Layout: LayoutComponent = ({ children, fullWidth }) => (
 /** Left sidebar container in the UI. */
 const Sidebar: React.FC<ISidebar> = ({ children, shrink }) => {
   const isVisible = useMinWidth(`(min-width: ${breakpoints.lg})`);
+  const wcoRect = useWindowControlsOverlay();
+  const offsetTop = wcoRect && wcoRect.x > 0 ? 16 + wcoRect.y : 16;
 
   if (!isVisible) {
     return null;
@@ -88,7 +110,7 @@ const Sidebar: React.FC<ISidebar> = ({ children, shrink }) => {
 
   return (
     <div className={clsx('⁂-layout__sidebar', { '⁂-layout__sidebar--shrink': shrink })}>
-      <StickyBox offsetTop={16} className='⁂-layout__sidebar__content'>
+      <StickyBox offsetTop={offsetTop} className='⁂-layout__sidebar__content'>
         {children}
       </StickyBox>
     </div>
@@ -117,13 +139,17 @@ const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, classN
 /** Right sidebar container in the UI. */
 const Aside: React.FC<IAside> = ({ children }) => {
   const isVisible = useMinWidth(`(min-width: ${breakpoints.xl})`);
+  const wcoRect = useWindowControlsOverlay();
+  const offsetTop =
+    wcoRect && wcoRect.x + wcoRect.width < window.innerWidth ? 16 + wcoRect.height : 16;
+
   if (!isVisible) {
     return null;
   }
 
   return (
     <aside className='⁂-layout__aside'>
-      <StickyBox offsetTop={16} className='⁂-layout__aside__content'>
+      <StickyBox offsetTop={offsetTop} className='⁂-layout__aside__content'>
         <Suspense>{children}</Suspense>
       </StickyBox>
     </aside>