📱(frontend) fine tuning shadow depend size

Depend the size of the screen and how the elements
are displayed, we want to have different
shadows and transparency for the floating bar
and the left panel.

src/frontend/apps/impress/src/components/FloatingBar.tsx

@@ -34,6 +34,7 @@ const FLOATING_STYLES = css`
 
 export const FloatingBar = ({
   children,
+  $css,
   ...props
 }: PropsWithChildren<BoxType>) => {
   return (
@@ -45,7 +46,10 @@ export const FloatingBar = ({
       $justify="space-between"
       $align="flex-start"
       $padding="sm"
-      $css={FLOATING_STYLES}
+      $css={css`
+        ${FLOATING_STYLES}
+        ${$css}
+      `}
       {...props}
     >
       {children}

src/frontend/apps/impress/src/features/header/components/HeaderFloatingBar.tsx

@@ -1,5 +1,7 @@
+import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { BoxType } from '@/components';
 import { FadeComponent } from '@/components/Effect';
 import { CardFloatingBar, FloatingBar } from '@/components/FloatingBar';
 import { DocSearchButtonModal } from '@/features/docs/doc-search/components/DocSearchButtonModal';
@@ -9,7 +11,7 @@ import { useResponsiveStore } from '@/stores/useResponsiveStore';
 
 import { HeaderIcon } from './HeaderIcon';
 
-export const HeaderFloatingBar = () => {
+export const HeaderFloatingBar = (props: PropsWithChildren<BoxType>) => {
   const { isMobile, isTablet } = useResponsiveStore();
   const { t } = useTranslation();
   const { isPanelOpen } = useLeftPanelStore();
@@ -17,7 +19,7 @@ export const HeaderFloatingBar = () => {
   const isVisible = (isTablet && !isPanelOpen) || isMobile;
 
   return (
-    <FloatingBar $align="center">
+    <FloatingBar $align="center" {...props}>
       {isTablet && (
         <LeftPanelCollapseButton ariaLabel={t('Toggle left panel')} />
       )}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -42,7 +42,6 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
         $css={css`
           z-index: 1;
           background-color: var(--c--contextuals--background--surface--primary);
-          box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
           transition:
             transform 0.2s ease-in-out,
             width 0.2s ease-in-out;
@@ -74,6 +73,7 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
           ${
             isMobile
               ? css`
+                  box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
                   position: fixed;
                   z-index: 1000;
                   top: 0;

src/frontend/apps/impress/src/pages/docs/index.tsx

@@ -1,17 +1,20 @@
 import Head from 'next/head';
 import { useSearchParams } from 'next/navigation';
-import type { ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { DocDefaultFilter, useTrans } from '@/docs/doc-management';
 import { DocsGrid } from '@/docs/docs-grid';
 import { HeaderFloatingBar } from '@/features/header/components/HeaderFloatingBar';
 import { MainLayout } from '@/layouts';
+import { useResponsiveStore } from '@/stores/useResponsiveStore';
 import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
   const { transFilter } = useTrans();
+  const { isDesktop } = useResponsiveStore();
   const searchParams = useSearchParams();
   const target =
     (searchParams.get('target') as DocDefaultFilter) ??
@@ -28,23 +31,40 @@ const Page: NextPageWithLayout = () => {
           key="title"
         />
       </Head>
-      <HeaderFloatingBar />
+      <HeaderFloatingBar
+        $css={
+          isDesktop
+            ? css`
+                &::before {
+                  background: transparent;
+                }
+              `
+            : undefined
+        }
+      />
       <DocsGrid target={target} />
     </>
   );
 };
 
-Page.getLayout = function getLayout(page: ReactElement) {
+const DocsPageLayout = ({ children }: PropsWithChildren) => {
+  const { isDesktop } = useResponsiveStore();
+
   return (
     <MainLayout
       propsContent={{
-        $background:
-          'linear-gradient(53deg, var(--c--contextuals--background--surface--primary) 39.96%, var(--c--contextuals--background--semantic--brand--tertiary) 125.64%)',
+        $background: !isDesktop
+          ? 'var(--c--contextuals--background--surface--primary)'
+          : 'linear-gradient(53deg, var(--c--contextuals--background--surface--primary) 39.96%, var(--c--contextuals--background--semantic--brand--tertiary) 125.64%)',
       }}
     >
-      {page}
+      {children}
     </MainLayout>
   );
 };
 
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <DocsPageLayout>{page}</DocsPageLayout>;
+};
+
 export default Page;