diff --git a/src/app/[language]/layout.tsx b/src/app/[language]/layout.tsx
index 3b1fdfb..5dc3b31 100644
--- a/src/app/[language]/layout.tsx
+++ b/src/app/[language]/layout.tsx
@@ -15,6 +15,7 @@ import QueryClientProvider from "@/services/react-query/query-client-provider";
import queryClient from "@/services/react-query/query-client";
import ReactQueryDevtools from "@/services/react-query/react-query-devtools";
import InitColorSchemeScript from "@/components/theme/init-color-scheme-script";
+import MainLayoutContainer from "@/components/containers/MainLayoutContainer";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { Providers } from "@/redux/store/provider";
@@ -47,18 +48,17 @@ export default function RootLayout({
-
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+ {children}
+
+
+
+
);
diff --git a/src/components/containers/MainLayoutContainer/index.ts b/src/components/containers/MainLayoutContainer/index.ts
new file mode 100644
index 0000000..d49cdf5
--- /dev/null
+++ b/src/components/containers/MainLayoutContainer/index.ts
@@ -0,0 +1,2 @@
+import MainLayoutContainer from "./mainLayoutContainer";
+export default MainLayoutContainer;
diff --git a/src/components/containers/MainLayoutContainer/mainLayoutContainer.tsx b/src/components/containers/MainLayoutContainer/mainLayoutContainer.tsx
new file mode 100644
index 0000000..feee076
--- /dev/null
+++ b/src/components/containers/MainLayoutContainer/mainLayoutContainer.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { usePathname } from "next/navigation";
+import {
+ MainContainer,
+ MainStack,
+ SidebarContainer,
+ RightBarContainer,
+ ContentContainer,
+} from "./styled";
+
+type TMainLayoutContainer = {
+ children: React.ReactNode;
+};
+
+const MainLayoutContainer = ({ children }: TMainLayoutContainer) => {
+ const pathname = usePathname();
+ const showRightBar = pathname.includes("/");
+
+ return (
+
+
+
+
+ {children}
+
+ {showRightBar && (
+
+ Suggested for You
+
+ )}
+
+
+ );
+};
+
+export default MainLayoutContainer;
diff --git a/src/components/containers/MainLayoutContainer/styled.tsx b/src/components/containers/MainLayoutContainer/styled.tsx
new file mode 100644
index 0000000..57e601f
--- /dev/null
+++ b/src/components/containers/MainLayoutContainer/styled.tsx
@@ -0,0 +1,51 @@
+import { styled, css } from "@mui/material/styles";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+
+export const MainContainer = styled(Container, {
+ name: "MainContainer",
+})(() => {
+ return css`
+ height: 100vh;
+ `;
+});
+
+export const MainStack = styled(Stack, {
+ name: "MainStack",
+})(() => {
+ return css`
+ flex-direction: row;
+ height: 100%;
+ `;
+});
+
+export const SidebarContainer = styled(Box, {
+ name: "SidebarContainer",
+})(() => {
+ return css`
+ height: 100%;
+ width: 220px;
+ border: 1px solid #ddd;
+ `;
+});
+
+export const ContentContainer = styled(Box, {
+ name: "ContentContainer",
+})(() => {
+ return css`
+ flex-grow: 1;
+ height: 100%;
+ padding: 2px;
+ `;
+});
+
+export const RightBarContainer = styled(Box, {
+ name: "RightBarContainer",
+})(() => {
+ return css`
+ height: 100%;
+ width: 230px;
+ border: 1px solid #ddd;
+ `;
+});