Jarno/feature/298-responsive-flexbox-layout-for-clans-main-page

frontend-next-migration/src/app/[lng]/(helper)/clans/clanPageLayout.scss

@@ -0,0 +1,79 @@
+/* Base styles */
+.layoutContainer {
+    display: flex;
+    height: 100vh;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.headerSidebarContainer {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    margin: 0.5rem;
+}
+
+.header {
+    flex-shrink: 0;
+    padding: 1rem;
+    text-align: center;
+}
+
+/* Sidebar styles */
+.sidebar {
+    flex: 1;
+    padding: 1rem;
+    display: none;
+}
+
+.content {
+    flex: 1;
+    padding: 1rem;
+    margin: 0.5rem;
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+    .sidebar {
+        display: block;
+        /* Visible on desktop */
+    }
+    .header {
+        text-align: left;
+        padding: 1rem 2rem;
+        margin-bottom: 1rem;
+    }
+    .mobileNav {
+        display: none;
+    }
+}
+
+@media (max-width: 1024px) {
+    .layoutContainer {
+        flex-direction: column;
+    }
+    .headerSidebarContainer {
+        width: 100%;
+        margin: 0;       
+    }
+    .header {
+        text-align: center;
+        height: 50px;
+        padding: 0.5rem;
+    }
+    .mobileNav {
+        display: block;
+        /* Visible on mobile */
+        margin-top: 0.5rem;
+        height: 50px;
+    }
+    .sidebar {
+        display: none;
+        /* Hidden on mobile */
+    }
+    .content {
+        margin: 0rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+}

frontend-next-migration/src/app/[lng]/(helper)/clans/layout.tsx

@@ -1 +1,24 @@
-export { ClanMainPage as default } from '@/preparedPages/ClanPages';
+import './ClanPageLayout.scss';
+
+type LayoutProps = {
+    children: React.ReactNode;
+};
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+    return (
+        <div className="container">
+            <div className="layoutContainer">
+                <div className="headerSidebarContainer">
+                    <header className="header">
+                        <h1>Clans</h1>
+                    </header>
+                    <nav className="mobileNav">Mobile Dropdown</nav>
+                    <aside className="sidebar">Sidebar</aside>
+                </div>
+                <main className="content">{children}</main>
+            </div>
+        </div>
+    );
+};
+
+export default Layout;