Skip to content

feat: add default layout for project #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 29, 2025
Merged

feat: add default layout for project #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d98df98
feat: add default layout for project
ahmad-arbisoft Jan 24, 2025
a37844d
feat: add styled components for layout along with mui components
ahmad-arbisoft Jan 27, 2025
eb6690a
feat: remove styled components package and use mui for styling
ahmad-arbisoft Jan 27, 2025
6ef158e
chore: file convention fix
ahmad-arbisoft Jan 27, 2025
de831ab
chore: file convention fix
ahmad-arbisoft Jan 27, 2025
cc4893e
Merge branch 'dev' into dev
farhan2742 Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/app/[language]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -47,18 +48,17 @@ export default function RootLayout({
<html lang={language} dir={dir(language)}>
<body>
<InitColorSchemeScript />
<GoogleOAuthProvider clientId={clientId ? clientId : ""}>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />
<ThemeProvider>
<SnackbarProvider maxSnack={3}>
<StoreLanguageProvider>
<Providers>{children}</Providers>
</StoreLanguageProvider>
</SnackbarProvider>
</ThemeProvider>
</QueryClientProvider>
</GoogleOAuthProvider>
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />
<ThemeProvider>
<CssBaseline />
<SnackbarProvider maxSnack={3}>
<StoreLanguageProvider>
<MainLayoutContainer>{children}</MainLayoutContainer>
</StoreLanguageProvider>
</SnackbarProvider>
</ThemeProvider>
</QueryClientProvider>
</body>
</html>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/containers/MainLayoutContainer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import MainLayoutContainer from "./mainLayoutContainer";
export default MainLayoutContainer;
38 changes: 38 additions & 0 deletions src/components/containers/MainLayoutContainer/mainLayoutContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<MainContainer>
<MainStack>
<SidebarContainer></SidebarContainer>

<ContentContainer>{children}</ContentContainer>

{showRightBar && (
<RightBarContainer>
<h3>Suggested for You</h3>
</RightBarContainer>
)}
</MainStack>
</MainContainer>
);
};

export default MainLayoutContainer;
51 changes: 51 additions & 0 deletions src/components/containers/MainLayoutContainer/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
`;
});