base structure

src/router/Auth.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Auth = () => {
+    return (
+        <div>Auth</div>
+    )
+}
+
+export default Auth

src/router/Main.tsx

@@ -0,0 +1,36 @@
+import { type FC } from 'react'
+import SideBar from '../shared/SideBar'
+import Header from '../shared/Header'
+import { Routes } from 'react-router-dom'
+import Footer from '../shared/Footer'
+import { clx } from '../helpers/utils'
+import { useSharedStore } from '../shared/store/sharedStore'
+
+const MainRouter: FC = () => {
+
+    const { hasSubMenu } = useSharedStore()
+
+    return (
+        <div className='p-4 overflow-hidden'>
+            <SideBar />
+            <Header />
+            <div className={clx(
+                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
+                hasSubMenu && 'xl:ms-[305px]',
+            )}>
+                <div className={clx(
+                    `overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
+                )}>
+                    <div className='pb-20'>
+                        <Routes>
+
+                        </Routes>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    )
+}
+
+export default MainRouter