add Header for cart page

src/layouts/app/AppLayout.tsx

@@ -0,0 +1,80 @@
+import { MoonOutlined, SunOutlined, UserOutlined } from "@ant-design/icons";
+import { Button, Flex, Image, Layout, Switch, Tooltip } from "antd";
+import { ReactNode } from "react";
+
+import { toggleTheme } from "features/theme/themeSlice.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
+import { colors, ProBlack2 } from "ThemeConstants.ts";
+import LangSelect from "./components/langSelect/LangSelect.tsx";
+import HeaderNav from "./HeaderNav.tsx";
+import "./styles.css";
+
+const { Content } = Layout;
+type AppLayoutProps = {
+  children: ReactNode;
+};
+
+export const AppLayout = ({ children }: AppLayoutProps) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { isDesktop } = useBreakPoint();
+
+  return (
+    <>
+      <Layout
+        style={{
+          minHeight: "100vh",
+        }}
+      >
+        {isDesktop && (
+          <HeaderNav className="header-nav">
+            <Flex align="center" gap="middle">
+              <Tooltip>
+                <Button
+                  type="text"
+                  icon={<UserOutlined />}
+                  className="user-icon"
+                />
+              </Tooltip>
+            </Flex>
+
+            <Flex align="center" gap="middle">
+              <Tooltip title={t("language")}>
+                <div style={{ position: "relative", top: -26 }}>
+                  <LangSelect />
+                </div>
+              </Tooltip>
+
+              <Tooltip title="Theme">
+                <Switch
+                  checkedChildren={<MoonOutlined />}
+                  unCheckedChildren={<SunOutlined />}
+                  checked={themeName === "light" ? true : false}
+                  onClick={() => dispatch(toggleTheme())}
+                  style={{
+                    background:
+                      themeName === "dark" ? colors.primary : ProBlack2,
+                    borderRadius: "12px",
+                  }}
+                />
+              </Tooltip>
+
+              <Image
+                src="/me.png"
+                alt="user profile photo"
+                height={40}
+                width={40}
+                className="user-profile-image"
+                preview={false}
+              />
+            </Flex>
+          </HeaderNav>
+        )}
+        <Content>{children}</Content>
+      </Layout>
+    </>
+  );
+};