add logo and other layout changes

pages/index.tsx

@@ -8,6 +8,7 @@ import { GetStaticProps, NextPage } from "next"
 import { IMenu, IMeta, PageCardDto } from "src/types"
 import { apiGet } from "@/next-lib"
 import { createHomeCards, createMenu } from "@/remote/factory"
+import { useMobile } from "@/hooks/useMobile"
 
 type Props = {
     title: string
@@ -16,48 +17,54 @@ type Props = {
     items: PageCardDto[]
 }
 
-const Index: NextPage<Props> = props => (
-    <>
-        <NextSeo
-            title={props.meta.title}
-            description={props.meta.description}
-            canonical="https://art.shlisselburg.org/"
-            openGraph={{
-                url: props.meta.url,
-                title: props.meta.title,
-                description: props.meta.description,
-                images: [
-                    {
-                        url: props.meta.image,
-                        width: props.meta.imageWidth,
-                        height: props.meta.imageHeight,
-                        alt: props.meta.description,
-                        type: "image/jpeg",
-                    },
-                ],
-                site_name: props.meta.siteName,
-            }}
-        />
-        <Head>
-            <title>{props.title}</title>
-        </Head>
-        <App
-            showAuthor={true}
-            menu={props.menu}
-        >
-            <HudozkaTitle
-                style={{
-                    marginTop: "var(--size-m)",
-                    marginBottom: "var(--size-m)",
+const Index: NextPage<Props> = props => {
+    const mobile = useMobile()
+
+    return (
+        <>
+            <NextSeo
+                title={props.meta.title}
+                description={props.meta.description}
+                canonical="https://art.shlisselburg.org/"
+                openGraph={{
+                    url: props.meta.url,
+                    title: props.meta.title,
+                    description: props.meta.description,
+                    images: [
+                        {
+                            url: props.meta.image,
+                            width: props.meta.imageWidth,
+                            height: props.meta.imageHeight,
+                            alt: props.meta.description,
+                            type: "image/jpeg",
+                        },
+                    ],
+                    site_name: props.meta.siteName,
                 }}
             />
+            <Head>
+                <title>{props.title}</title>
+            </Head>
+            <App
+                showAuthor={true}
+                menu={props.menu}
+            >
+                {mobile ? null : (
+                    <HudozkaTitle
+                        style={{
+                            marginTop: "var(--size-m)",
+                            marginBottom: "var(--size-m)",
+                        }}
+                    />
+                )}
 
-            <PageGrid
-                items={props.items}
-            />
-        </App>
-    </>
-)
+                <PageGrid
+                    items={props.items}
+                />
+            </App>
+        </>
+    )
+}
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
     const items = await apiGet(createHomeCards)("https://hudozka.tmshv.com/home", async () => [])

src/components/HudozkaTitle/index.tsx

@@ -3,15 +3,25 @@ import s from "./title.module.css"
 import { memo } from "react"
 
 export type HudozkaTitleProps = {
+    compact?: boolean
     style?: React.CSSProperties
 }
 
-export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
-    <h1 style={props.style} className={s.title}>
-        <span className={s.prefix}>МБУДО</span>
-        Шлиссельбургская <br />
-        <span className={s.suffix}>детская художественная школа</span>
-    </h1>
-))
+export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(({ style, compact = false }) => {
+    if (compact) {
+        return (
+            <span>
+                Шлиссельбургская ДХШ
+            </span>
+        )
+    }
+    return (
+        <h1 style={style} className={s.title}>
+            <span className={s.prefix}>МБУДО</span>
+            Шлиссельбургская <br />
+            <span className={s.suffix}>детская художественная школа</span>
+        </h1>
+    )
+})
 
 HudozkaTitle.displayName = "HudozkaTitle"

src/components/Menu/styles.module.css

@@ -3,7 +3,7 @@
     align-items: flex-start;
     flex-wrap: wrap;
 
-    gap: var(--size-m);
+    gap: var(--size-s);
 
     font-size: var(--font-size-second);
     list-style: none;
@@ -19,11 +19,18 @@
 /* MENU ITEM */
 
 .menuItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     user-select: none;
     background-color: var(--color-back-main);
     border-radius: var(--radius-small);
     transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
-    padding: var(--size-s) var(--size-s);
+    /* padding: var(--size-s) var(--size-s); */
+    padding: 0 var(--size-s);
+
+    height: var(--size-l);
 }
 
 .menuItem.active {

src/components/Navigation/index.tsx

@@ -9,13 +9,17 @@ import { Spacer } from "../Spacer"
 import { useToggle } from "react-use"
 import { Button } from "@/ui/Button"
 import { EyeOpenIcon } from "@radix-ui/react-icons"
+import { HudozkaLogo } from "../HudozkaLogo"
+import { useDarkTheme } from "@/hooks/useDarkTheme"
+import { HudozkaTitle } from "../HudozkaTitle"
 
 export type NavigationProps = {
     style?: React.CSSProperties
 }
 
 export const Navigation: React.FC<NavigationProps> = props => {
-    const collapseMenu = useMobile()
+    const mobile = useMobile()
+    const dark = useDarkTheme()
     const [open, toggleOpen] = useToggle(false)
     const { menu } = useContext(ConfigContext)
 
@@ -45,10 +49,16 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 </Box>
             </Overlay>
 
-            <Box wrap style={{
+            <Box wrap gap={"var(--size-s)"} style={{
                 padding: "var(--size-s)",
             }}>
-                {collapseMenu ? null : (
+                <HudozkaLogo dark={dark} />
+
+                {!mobile ? null : (
+                    <HudozkaTitle compact />
+                )}
+
+                {mobile ? null : (
                     <Menu
                         items={menu}
                         onItemClick={() => {
@@ -59,7 +69,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
 
                 <Spacer />
 
-                {!collapseMenu ? null : (
+                {!mobile ? null : (
                     <MenuToggle
                         open={open}
                         onClick={toggleOpen}

src/hooks/useDarkTheme.ts

@@ -0,0 +1,5 @@
+import useMedia from "use-media"
+
+export function useDarkTheme(): boolean {
+    return useMedia("(prefers-color-scheme: dark)")
+}

src/ui/Box/index.tsx

@@ -14,7 +14,7 @@ export type BoxProps = {
     align?: boolean
     vertical?: boolean
     center?: boolean
-    gap?: number
+    gap?: number | string
 }
 
 export const Box: React.FC<BoxProps> = ({