wip

web/apps/photos/src/pages/shared-albums.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
-import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
+import { NavbarBaseNormalFlow, SelectionBar } from "@/base/components/Navbar";
 import {
     OverflowMenu,
     OverflowMenuOption,
@@ -581,14 +581,26 @@ interface SharedAlbumNavbarProps {
 const SharedAlbumNavbar: React.FC<SharedAlbumNavbarProps> = ({
     onAddPhotos,
 }) => (
-    <NavbarBase>
-        <FluidContainer>
-            <EnteLogoLink href="https://ente.io">
-                <EnteLogo height={15} />
-            </EnteLogoLink>
-        </FluidContainer>
-        {onAddPhotos ? <AddPhotosButton onClick={onAddPhotos} /> : <GoToEnte />}
-    </NavbarBase>
+    <NavbarBaseNormalFlow
+        sx={{
+            mb: "16px",
+            px: "24px",
+            "@media (width < 720px)": { px: "4px" },
+        }}
+    >
+        <Stack direction="row" sx={{ flex: 1 }}>
+            <FluidContainer>
+                <EnteLogoLink href="https://ente.io">
+                    <EnteLogo height={15} />
+                </EnteLogoLink>
+            </FluidContainer>
+            {onAddPhotos ? (
+                <AddPhotosButton onClick={onAddPhotos} />
+            ) : (
+                <GoToEnte />
+            )}
+        </Stack>
+    </NavbarBaseNormalFlow>
 );
 
 const EnteLogoLink = styled("a")(({ theme }) => ({

web/packages/base/components/Navbar.tsx

@@ -11,7 +11,7 @@ import React from "react";
  *
  * TODO: Deprecated. Use NavbarBaseNormalFlow instead.
  */
-export const NavbarBase = styled(FlexWrapper)(
+export const NavbarBase2 = styled(FlexWrapper)(
     ({ theme }) => `
     min-height: 64px;
     position: sticky;
@@ -38,6 +38,16 @@ export const NavbarBaseNormalFlow = styled("div")(
 `,
 );
 
+export const NavbarBase = styled(NavbarBaseNormalFlow)(({ theme }) => ({
+    position: "sticky",
+    top: 0,
+    left: 0,
+    mb: theme.spacing(2),
+    zIndex: 1,
+    backgroundColor: "transparent",
+    // backdropFilter: "blur(7px)",
+}));
+
 /**
  * A variant of AppNavbar that places itself normally in the document flow
  * instead of using a fixed positioning.
@@ -48,7 +58,7 @@ export const AppNavbarNormalFlow: React.FC = () => (
     </NavbarBaseNormalFlow>
 );
 
-export const SelectionBar = styled(NavbarBase)`
+export const SelectionBar = styled(NavbarBase2)`
     position: fixed;
     z-index: 12;
 `;