Integrating js.

js-src/components/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import Layout from '@owlads/components/layout'
+
+export default function Index (): JSX.Element {
+    return (
+        <Layout>
+            <p>hola</p>
+            <p>hola</p>
+        </Layout>
+    )
+}

js-src/components/layout.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+
+export interface LayoutProps {
+    children: React.ReactNode
+}
+
+export default function Layout (props: LayoutProps): JSX.Element {
+    return (
+        <div className="layout">
+            <div className="menu-bar-only-mobile">
+                <Link className="come-back" to="/">
+                    <img src="/img/owlcode_tech.webp" alt="Owlcode.tech Logo"/>
+                </Link>
+                <a href="#" className="menu-open">
+                    <img src="/img/hamburguer-menu.webp" alt="Menu open icon"/>
+                </a>
+            </div>
+            <div className="horizontal-menu">
+            </div>
+            <div className="content">
+                { props.children }
+            </div>
+        </div>
+    )
+}

js-src/components/page.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react'
-import * as ReactRouter from 'react-router-dom'
+import { Provider } from 'react-redux'
+
+import Router from '@owlads/components/router'
+import store from '@owlads/store'
 
-const router = ReactRouter.createBrowserRouter([
-    {
-        path: '/',
-        element: (<div>hello</div>)
-    }
-])
 export default function Page (): JSX.Element {
     return (
         <React.StrictMode>
-            <ReactRouter.RouterProvider router={router}/>
+            <Provider store={store}>
+                <Router/>
+            </Provider>
         </React.StrictMode>
     )
 }

js-src/components/router.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { useAppSelector, useAppDispatch } from '@owlads/hooks'
+import { set } from '@owlads/slice/is-mobile'
+
+import Index from '@owlads/components/index'
+
+export default function Router (): JSX.Element {
+    const isMobile = useAppSelector(state => state.isMobile.value)
+    if (isMobile === null) {
+        setIsMobile()
+        return (
+            <>
+                <p>Cargando configuración...</p>
+            </>
+        )
+    }
+    window.addEventListener('resize', () => {
+        setIsMobile()
+    })
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Index/>}/>
+            </Routes>
+        </BrowserRouter>
+    )
+}
+
+function setIsMobile (): void {
+    const dispatch = useAppDispatch()
+    const isThisAMobile = window.matchMedia('(max-width: 700px)').matches
+    dispatch(set(isThisAMobile))
+}

js-src/hooks.ts

@@ -0,0 +1,6 @@
+import type { RootState, AppDispatch } from '@owlads/store'
+import type { TypedUseSelectorHook } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

js-src/slice/is-mobile.ts

@@ -0,0 +1,23 @@
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { createSlice } from '@reduxjs/toolkit'
+
+interface StateType {
+    value: boolean | null
+}
+
+const initialValue: StateType = {
+    value: null
+}
+
+export const isMobileSlice = createSlice({
+    name: 'menu-open',
+    initialState: initialValue,
+    reducers: {
+        set: (state, action: PayloadAction<boolean>) => {
+            state.value = action.payload
+        }
+    }
+})
+export const { set } = isMobileSlice.actions
+export default isMobileSlice.reducer

js-src/slice/menu-open.ts

@@ -0,0 +1,16 @@
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+import { createSlice } from '@reduxjs/toolkit'
+
+export const menuOpenSlice = createSlice({
+    name: 'menu-open',
+    initialState: {
+        value: false
+    },
+    reducers: {
+        set: (state, action: PayloadAction<boolean>) => {
+            state.value = action.payload
+        }
+    }
+})
+export default menuOpenSlice.reducer

js-src/store.ts

@@ -0,0 +1,14 @@
+import { configureStore } from '@reduxjs/toolkit'
+import menuOpenReducer from '@owlads/slice/menu-open'
+import isMobileReducer from '@owlads/slice/is-mobile'
+
+const store = configureStore({
+    reducer: {
+        menuOpen: menuOpenReducer,
+        isMobile: isMobileReducer
+    }
+})
+
+export default store
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch

js-src/style.scss

@@ -0,0 +1,46 @@
+$background: azure;
+$color: #666362;
+$background_menu: bisque;
+$color_menu: #c4fdff;
+body {
+    background: $background;
+    color: $color;
+    padding: 0;
+    margin: 0;
+}
+
+div.layout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(12, 1fr);
+    div.menu-bar-only-mobile {
+        background: $background_menu;
+        grid-row: 1 / 2;
+        grid-column: 1 / 13;
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        min-height: 50px;
+        a.come-back {
+            grid-column: 1/2;
+            max-width: 75%;
+            max-height: 75%;
+            align-self: center;
+            justify-self: center;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+        a.menu-open {
+            grid-column: 12 / 13;
+            justify-self: center;
+            align-self: center;
+            max-width: 50%;
+            max-height: 50%;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+}

public/js/main.bundle.js.LICENSE.txt

@@ -8,6 +8,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /**
  * @license React
  * react.production.min.js
@@ -28,6 +38,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /**
  * @remix-run/router v1.7.2
  *
@@ -60,3 +90,12 @@
  *
  * @license MIT
  */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */