mirror of
https://github.com/ente-io/ente.git
synced 2025-06-11 03:03:16 +00:00
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { EnteLogo, EnteLogoSVG } from "@/base/components/EnteLogo";
|
|
import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
|
|
import { styled } from "@mui/material";
|
|
import React from "react";
|
|
|
|
/**
|
|
* The "bar" at the top of the screen.
|
|
*
|
|
* Usually this area contains the App's main navigation bar ({@link AppNavbar}),
|
|
* but depending on the context it can also show the {@link SelectionBar}.
|
|
* */
|
|
export const NavbarBase = styled(FlexWrapper)(
|
|
({ theme }) => `
|
|
min-height: 64px;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
border-bottom: 1px solid ${theme.vars.palette.divider};
|
|
background-color: ${theme.vars.palette.background.default};
|
|
margin-bottom: 16px;
|
|
padding: 0 24px;
|
|
@media (max-width: 720px) {
|
|
padding: 0 4px;
|
|
}
|
|
`,
|
|
);
|
|
|
|
// TODO: Prune
|
|
export const AppNavbar: React.FC = () => {
|
|
return (
|
|
<NavbarBase>
|
|
<CenteredFlex>
|
|
<EnteLogo />
|
|
</CenteredFlex>
|
|
</NavbarBase>
|
|
);
|
|
};
|
|
|
|
const NavbarBaseNormalFlow = styled("div")(
|
|
({ theme }) => `
|
|
flex: 0 0 64px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid ${theme.vars.palette.divider};
|
|
`,
|
|
);
|
|
|
|
/**
|
|
* A variant of AppNavbar that places itself normally in the document flow
|
|
* instead of using a fixed positioning.
|
|
*/
|
|
export const AppNavbarNormalFlow: React.FC = () => (
|
|
<NavbarBaseNormalFlow>
|
|
<EnteLogoSVG />
|
|
</NavbarBaseNormalFlow>
|
|
);
|
|
|
|
export const SelectionBar = styled(NavbarBase)`
|
|
position: fixed;
|
|
z-index: 12;
|
|
`;
|