fix closing navbar on md

docs/todo3.md

@@ -59,9 +59,9 @@ add all components to styleguide
 hero image full width
 hashnode PostItem card with details
 header in layout, ListLayout, PostLayout, PageLayout, FullWidthLayout
-fix active navbar item
+    fix active navbar item
 baseline for layout, w-screen, min-h-screen, tagovi, prouci
-breadcrumb for navigation
+breadcrumb for navigation, categories
 responsive fonts
 <main /> full height screen - header - footer
 asChild for Container and Prose
@@ -140,7 +140,11 @@ style tags
 procitaj transition docs
 navbar buttons to links
 add astro and fastapi in resume
-close mobile header on md
+-----
+    close mobile header on md
+// group-[.menu-open]: increases specificity everywhere
+// group-[.menu-open]:flex-col md:!flex-row, both on flex-direction
+-----
 prose vec ima sve stilove kako treba, samo h1 ogranici na 48px jer je prose-xl
 umotaj sve u prose u Base layout, pa samo nekoliko slotova no-prose
 add colors and gradients to h1 maybe

src/components/Header.astro

@@ -10,13 +10,16 @@ import { NAVIGATION_ITEMS } from '@/constants/navigation';
 import { CONFIG } from '@/config';
 
 import Avatar from '@/assets/images/avatar.jpg';
+
+// group-[.menu-open]: increases specificity everywhere
+// group-[.menu-open]:flex-col md:!flex-row, both on flex-direction
 ---
 
 <header id="main-header" class="group">
   <div
     class={clsx(
       'flex gap-2',
-      'group-[.menu-open]:flex-col md:flex-row md:justify-between md:items-center',
+      'group-[.menu-open]:flex-col md:!flex-row md:justify-between md:items-center',
       'max-w-7xl py-4 px-4 md:mx-auto'
     )}
   >
@@ -54,7 +57,7 @@ import Avatar from '@/assets/images/avatar.jpg';
 
     {/* nav items */}
     <nav class="select-none hidden md:block group-[.menu-open]:block" aria-label="Site navigation">
-      <ul class="flex gap-1 group-[.menu-open]:flex-col md:flex-row">
+      <ul class="flex gap-1 group-[.menu-open]:flex-col md:!flex-row">
         {
           NAVIGATION_ITEMS.map(({ title, path }) => (
             <li>

src/content/project/2024-02-13-example-project-1.mdx

@@ -9,6 +9,6 @@ import { Image } from 'astro:assets';
 
 import FlowersImage from '../../content/project/_images/2024-02-13-example-project-1/flowers-store.jpg';
 
-# Love you Julia ❤️
+# This is the first project
 
 <Image src={FlowersImage} width={1024} alt="" />