add logo and other layout changes

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}