From 86e95b61d197b853ad4b114d41a1367db50fc572 Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Thu, 21 Sep 2023 12:33:39 +0300
Subject: [PATCH 1/6] Separate MobileNavbar.svelte from Navbar.svelte

---
 src/lib/MobileNavbar.svelte | 188 ++++++++++++++++++++++++++++++++++++
 src/lib/Navbar.svelte       | 161 +++---------------------------
 2 files changed, 199 insertions(+), 150 deletions(-)
 create mode 100644 src/lib/MobileNavbar.svelte

diff --git a/src/lib/MobileNavbar.svelte b/src/lib/MobileNavbar.svelte
new file mode 100644
index 0000000..396a528
--- /dev/null
+++ b/src/lib/MobileNavbar.svelte
@@ -0,0 +1,188 @@
+<script>
+	import NavClose from "$lib/NavClose.svelte";
+	import NavMinus from "$lib/NavMinus.svelte";
+	import NavPlus from "$lib/NavPlus.svelte";
+	import { fly } from 'svelte/transition';
+	import { afterNavigate } from "$app/navigation";
+
+	export let closeNavbar;
+	export let navigationLinksLeft;
+	export let navigationLinksRight;
+
+	let mobileOpenSubsectionsKeys = []
+	let navBackground;
+
+	afterNavigate(closeNavbar)
+
+	const onBackgroundClick = (event) => {
+		if (event.target == navBackground) closeNavbar()
+	}
+</script>
+
+<div class="nav-background" on:click={onBackgroundClick} bind:this={navBackground}></div>
+<div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
+	<div class="close">
+		<button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
+			<NavClose />
+		</button>
+	</div>
+	<nav>
+		{#each [...navigationLinksLeft, ...navigationLinksRight] as navigationLink}
+			{#if navigationLink.href}
+				<div class="link-wrapper">
+					<a href="{navigationLink.href}">{navigationLink.key}</a>
+				</div>
+			{:else}
+				<button class="link-wrapper" on:click={() => {
+                            if (mobileOpenSubsectionsKeys.includes(navigationLink.key)) {
+                                mobileOpenSubsectionsKeys = mobileOpenSubsectionsKeys
+                                    .filter((val) => val !== navigationLink.key)
+                            } else {
+                                mobileOpenSubsectionsKeys = [...mobileOpenSubsectionsKeys, navigationLink.key]
+                            }
+                        }}>
+					<span>{navigationLink.key}</span>
+					{#if mobileOpenSubsectionsKeys.includes(navigationLink.key)}
+						<NavMinus />
+					{:else}
+						<NavPlus />
+					{/if}
+				</button>
+				<div class="mobile-subsection" class:open={mobileOpenSubsectionsKeys.includes(navigationLink.key)}>
+					{#each navigationLink.subsections as subsection}
+						<a href="{subsection.href}">{subsection.key}</a>
+					{/each}
+				</div>
+			{/if}
+		{/each}
+	</nav>
+</div>
+
+<style>
+    nav {
+        display: flex;
+        flex-direction: row;
+        column-gap: 1.5rem;
+        border-top: #ffffff 2px solid;
+        pointer-events: all;
+        transition: margin-bottom 250ms;
+    }
+
+    a {
+        text-decoration: none;
+        color: #ffffff;
+        text-transform: uppercase;
+        margin-top: 10px;
+        font-family: Roboto, serif;
+    }
+
+    span {
+        text-decoration: none;
+        color: #ffffff;
+        text-transform: uppercase;
+        margin-top: 10px;
+        font-family: Roboto, serif;
+    }
+
+    .nav-background {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        z-index: 4;
+        pointer-events: all;
+    }
+
+    .close {
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem;
+    }
+
+    .mobile-nav {
+        height: 100%;
+        position: fixed;
+        min-width: 50%;
+        right: 0;
+        top: 0;
+        background-color: #4F0D0D;
+        z-index: 5;
+    }
+
+    .mobile-nav nav {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        border: none;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: 0 2rem 1rem 1rem;
+        box-sizing: border-box;
+    }
+
+    .mobile-nav nav a, .mobile-nav nav span {
+        margin-top: 0;
+    }
+
+    .link-wrapper {
+        border-bottom: 1px solid #FFFFFF;
+        padding: 0 0 5px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0);
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        font-size: 16px;
+        cursor: pointer;
+        margin-top: 15px;
+    }
+
+    .mobile-nav .link-wrapper a {
+        width: 100%;
+    }
+
+    .mobile-subsection {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 300ms ease-in;
+    }
+
+    .mobile-subsection.open {
+        max-height: 25rem;
+        width: 100%;
+    }
+
+    .mobile-subsection a:first-child {
+        padding-top: 4px;
+    }
+
+    .mobile-subsection a {
+        font-family: 'Roboto', serif;
+        font-style: normal;
+        font-weight: 300;
+        font-size: 15px;
+        line-height: 17px;
+        text-transform: none;
+        color: #FFFFFF;
+        width: 100%;
+    }
+
+    .icon-button {
+        background-color: rgba(0, 0, 0, 0);
+        border: none;
+        cursor: pointer;
+        pointer-events: all;
+    }
+
+    button {
+        transition: margin-bottom 250ms;
+    }
+</style>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index f69d508..565dfad 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,23 +1,14 @@
 <script lang="ts">
     import NavLines from "$lib/NavLines.svelte";
-    import NavClose from "$lib/NavClose.svelte";
-    import NavMinus from "$lib/NavMinus.svelte";
-    import NavPlus from "$lib/NavPlus.svelte";
     import { afterNavigate } from '$app/navigation';
-    import { fly } from 'svelte/transition';
     import { navigating } from '$app/stores'
-
-    interface NavigationLink {
-        key: string;
-        href?: string;
-        subsections?: NavigationLink[]
-    }
+    import MobileNavbar from "$lib/MobileNavbar.svelte";
+    import { onMount } from "svelte";
 
     let shownSubsectionsHref = ""
     let shownSubsectionLeftShift = 0;
-    let mobileOpenSubsectionsKeys = []
 
-    const navigationLinksLeft: NavigationLink[] = [
+    const navigationLinksLeft = [
         { key: "Новини", href: "/news" },
         { key: "За ученика", subsections: [
                 { key: "Седмично разписание", href: "/student/weekly-schedule" },
@@ -34,7 +25,7 @@
             ]},
     ];
 
-    const navigationLinksRight: NavigationLink[] = [
+    const navigationLinksRight = [
         { key: "Проекти", href: "/projects" },
         { key: "Постижения", href: "/achievements" },
         { key: "За нас", href: "/about-us" },
@@ -48,15 +39,14 @@
     let rightNavWidth;
     let innerWidth;
     let isMobileMenuOpen;
-    let navBackground;
     let loadingBarPercentage = 0;
+    let loaded = false;
 
     const closeNavbar = () => {
         isMobileMenuOpen = false;
         document.body.classList.remove("no-scroll")
     }
 
-    afterNavigate(closeNavbar)
     afterNavigate(() => {
         if (loadingBarPercentage > 0) {
             loadingBarPercentage = 100;
@@ -74,9 +64,7 @@
         }, 300)
     }
 
-    const onBackgroundClick = (event) => {
-        if (event.target == navBackground) closeNavbar()
-    }
+    onMount(() => loaded = true)
 
     $: isMobile = innerWidth < mobileBreakpoint;
 
@@ -100,7 +88,7 @@
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
 
-        {#if !isMobile}
+        {#if !isMobile && loaded}
             <nav class:scrolled="{scrollMode}" class="left-nav" bind:clientWidth={leftNavWidth}>
                 {#each navigationLinksLeft as navigationLink, index (navigationLink.key)}
                     {#if !navigationLink.subsections}
@@ -139,7 +127,7 @@
             </a>
         </div>
 
-        {#if !isMobile}
+        {#if !isMobile && loaded}
             <nav class:scrolled="{scrollMode}" class="right-nav" bind:clientWidth={rightNavWidth}>
                 {#each navigationLinksRight as navigationLink}
                     {#if !navigationLink.subsections}
@@ -188,44 +176,9 @@
     {/if}
 
     {#if isMobile && isMobileMenuOpen}
-        <div class="nav-background" on:click={onBackgroundClick} bind:this={navBackground}></div>
-        <div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
-            <div class="close">
-                <button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
-                    <NavClose />
-                </button>
-            </div>
-            <nav>
-                {#each [...navigationLinksLeft, ...navigationLinksRight] as navigationLink}
-                    {#if navigationLink.href}
-                        <div class="link-wrapper">
-                            <a href="{navigationLink.href}">{navigationLink.key}</a>
-                        </div>
-                    {:else}
-                        <button class="link-wrapper" on:click={() => {
-                            if (mobileOpenSubsectionsKeys.includes(navigationLink.key)) {
-                                mobileOpenSubsectionsKeys = mobileOpenSubsectionsKeys
-                                    .filter((val) => val !== navigationLink.key)
-                            } else {
-                                mobileOpenSubsectionsKeys = [...mobileOpenSubsectionsKeys, navigationLink.key]
-                            }
-                        }}>
-                            <span>{navigationLink.key}</span>
-                            {#if mobileOpenSubsectionsKeys.includes(navigationLink.key)}
-                                <NavMinus />
-                                {:else}
-                                <NavPlus />
-                            {/if}
-                        </button>
-                        <div class="mobile-subsection" class:open={mobileOpenSubsectionsKeys.includes(navigationLink.key)}>
-                            {#each navigationLink.subsections as subsection}
-                                <a href="{subsection.href}">{subsection.key}</a>
-                            {/each}
-                        </div>
-                    {/if}
-                {/each}
-            </nav>
-        </div>
+        <MobileNavbar closeNavbar={closeNavbar}
+                      navigationLinksLeft={navigationLinksLeft}
+                      navigationLinksRight={navigationLinksRight} />
     {/if}
 </div>
 
@@ -415,98 +368,6 @@
         left: var(--subsection-left-shift)
     }
 
-    .nav-background {
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        z-index: 4;
-        pointer-events: all;
-    }
-
-    .close {
-        display: flex;
-        justify-content: flex-end;
-        padding: 1rem;
-    }
-
-    .mobile-nav {
-        height: 100%;
-        position: fixed;
-        min-width: 50%;
-        right: 0;
-        top: 0;
-        background-color: #4F0D0D;
-        z-index: 5;
-    }
-
-    .mobile-nav nav {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        border: none;
-        align-items: flex-start;
-        justify-content: flex-start;
-        padding: 0 2rem 1rem 1rem;
-        box-sizing: border-box;
-    }
-
-
-    .mobile-nav nav a, .mobile-nav nav span {
-        margin-top: 0;
-    }
-
-    .link-wrapper {
-        border-bottom: 1px solid #FFFFFF;
-        padding: 0 0 5px;
-        width: 100%;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0);
-        border-top: none;
-        border-left: none;
-        border-right: none;
-        font-size: 16px;
-        cursor: pointer;
-        margin-top: 15px;
-    }
-
-    .mobile-nav .link-wrapper a {
-        width: 100%;
-    }
-
-    .mobile-subsection {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 300ms ease-in;
-    }
-
-    .mobile-subsection.open {
-        max-height: 25rem;
-        width: 100%;
-    }
-
-    .mobile-subsection a:first-child {
-        padding-top: 4px;
-    }
-
-    .mobile-subsection a {
-        font-family: 'Roboto', serif;
-        font-style: normal;
-        font-weight: 300;
-        font-size: 15px;
-        line-height: 17px;
-        text-transform: none;
-        color: #FFFFFF;
-        width: 100%;
-    }
-
     .icon-button {
         background-color: rgba(0, 0, 0, 0);
         border: none;

From 997aa0f49bc53510642e8ad4bb7abff907d904b7 Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Fri, 22 Sep 2023 20:04:30 +0300
Subject: [PATCH 2/6] Remove wrong navbar flashes while loading

---
 src/lib/Navbar.svelte | 144 ++++++++++++++++++++++--------------------
 1 file changed, 74 insertions(+), 70 deletions(-)

diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 565dfad..579392b 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -32,7 +32,7 @@
         { key: "Контакти", href: "/contacts" },
     ];
 
-    const mobileBreakpoint = 1050;
+    const mobileBreakpoint = 1150;
 
     let scrollY = 0;
     let leftNavWidth;
@@ -88,83 +88,86 @@
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
 
-        {#if !isMobile && loaded}
-            <nav class:scrolled="{scrollMode}" class="left-nav" bind:clientWidth={leftNavWidth}>
-                {#each navigationLinksLeft as navigationLink, index (navigationLink.key)}
-                    {#if !navigationLink.subsections}
-                        <a href="{navigationLink.href}">{navigationLink.key}</a>
-                        {:else}
-                        <div on:mouseenter={(event) => {
-                            shownSubsectionLeftShift = event.target.offsetLeft
-                            shownSubsectionsHref = navigationLink.key
-                        }}
-                             on:mouseleave="{() => { shownSubsectionsHref = '' }}"
-                             class="subsection-container">
-                            <span>{navigationLink.key}</span>
-                                <div class="subsections"
-                                     style="--subsection-width: {leftNavWidth}px"
-                                    class:open={shownSubsectionsHref === navigationLink.key}>
-                                    <div class="subsection-top">
-                                        <div class="subsection-line"></div>
-                                        <span class="subsection-title"
-                                              style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">
-                                            {navigationLink.key}</span>
+        {#if loaded}
+            {#if !isMobile}
+                <nav class:scrolled="{scrollMode}" class="left-nav" bind:clientWidth={leftNavWidth}>
+                    {#each navigationLinksLeft as navigationLink, index (navigationLink.key)}
+                        {#if !navigationLink.subsections}
+                            <a href="{navigationLink.href}">{navigationLink.key}</a>
+                            {:else}
+                            <div on:mouseenter={(event) => {
+                                shownSubsectionLeftShift = event.target.offsetLeft
+                                shownSubsectionsHref = navigationLink.key
+                            }}
+                                 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
+                                 class="subsection-container">
+                                <span>{navigationLink.key}</span>
+                                    <div class="subsections"
+                                         style="--subsection-width: {leftNavWidth}px"
+                                        class:open={shownSubsectionsHref === navigationLink.key}>
+                                        <div class="subsection-top">
+                                            <div class="subsection-line"></div>
+                                            <span class="subsection-title"
+                                                  style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">
+                                                {navigationLink.key}</span>
+                                        </div>
+                                        {#each navigationLink.subsections as subsection}
+                                            <a href="{subsection.href}">{subsection.key}</a>
+                                         {/each}
                                     </div>
-                                    {#each navigationLink.subsections as subsection}
-                                        <a href="{subsection.href}">{subsection.key}</a>
-                                     {/each}
-                                </div>
-                        </div>
-                    {/if}
-                {/each}
-            </nav>
-        {:else}
-            <div class="left-nav"></div>
+                            </div>
+                        {/if}
+                    {/each}
+                </nav>
+            {:else}
+                <div class="left-nav"></div>
+            {/if}
         {/if}
         <div class="logo">
             <a href="/">
                 <img alt="{logoHrefAlt}" src="{logoHref}"/>
             </a>
         </div>
-
-        {#if !isMobile && loaded}
-            <nav class:scrolled="{scrollMode}" class="right-nav" bind:clientWidth={rightNavWidth}>
-                {#each navigationLinksRight as navigationLink}
-                    {#if !navigationLink.subsections}
-                        <a href="{navigationLink.href}">{navigationLink.key}</a>
-                    {:else}
-                        <div on:mouseenter={(event) => {
-                            shownSubsectionLeftShift = event.target.offsetLeft
-                            shownSubsectionsHref = navigationLink.href
-                        }}
-                             on:mouseleave="{() => { shownSubsectionsHref = '' }}"
-                             class="subsection-container">
-                            <span>{navigationLink.key}</span>
-                            {#if shownSubsectionsHref === navigationLink.href}
-                                <div class="subsections" style="--subsection-width: {rightNavWidth + 'px'}">
-                                    <div class="subsection-top">
-                                        <div class="subsection-line"></div>
-                                        <span class="subsection-title"
-                                          style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">{navigationLink.key}</span>
+        {#if loaded}
+            {#if !isMobile}
+                <nav class:scrolled="{scrollMode}" class="right-nav" bind:clientWidth={rightNavWidth}>
+                    {#each navigationLinksRight as navigationLink}
+                        {#if !navigationLink.subsections}
+                            <a href="{navigationLink.href}">{navigationLink.key}</a>
+                        {:else}
+                            <div on:mouseenter={(event) => {
+                                shownSubsectionLeftShift = event.target.offsetLeft
+                                shownSubsectionsHref = navigationLink.href
+                            }}
+                                 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
+                                 class="subsection-container">
+                                <span>{navigationLink.key}</span>
+                                {#if shownSubsectionsHref === navigationLink.href}
+                                    <div class="subsections" style="--subsection-width: {rightNavWidth + 'px'}">
+                                        <div class="subsection-top">
+                                            <div class="subsection-line"></div>
+                                            <span class="subsection-title"
+                                              style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">{navigationLink.key}</span>
+                                        </div>
+                                        {#each navigationLink.subsections as subsection}
+                                            <a href="{subsection.href}">{subsection.key}</a>
+                                        {/each}
                                     </div>
-                                    {#each navigationLink.subsections as subsection}
-                                        <a href="{subsection.href}">{subsection.key}</a>
-                                    {/each}
-                                </div>
-                            {/if}
-                        </div>
-                    {/if}
-                {/each}
-            </nav>
-            {:else}
-            <div class="right-nav" class:scrolled="{scrollMode}" >
-                <button class="icon-button" aria-label="отвори мобилна навигация" on:click={() => {
-                    isMobileMenuOpen = true
-                    document.body.classList.add("no-scroll")
-                }}>
-                    <NavLines></NavLines>
-                </button>
-            </div>
+                                {/if}
+                            </div>
+                        {/if}
+                    {/each}
+                </nav>
+                {:else}
+                <div class="right-nav" class:scrolled="{scrollMode}" >
+                    <button class="icon-button" aria-label="отвори мобилна навигация" on:click={() => {
+                        isMobileMenuOpen = true
+                        document.body.classList.add("no-scroll")
+                    }}>
+                        <NavLines></NavLines>
+                    </button>
+                </div>
+            {/if}
         {/if}
     </div>
     {#if showTitle && fixed}
@@ -258,6 +261,7 @@
         margin-top: 1rem;
         pointer-events: all;
         user-select: none;
+        grid-column: 2;
     }
 
     .background {

From a64b4110ce30e9f9ce0f572147fb1394c6142a47 Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Fri, 22 Sep 2023 20:27:23 +0300
Subject: [PATCH 3/6] Separate DesktopNav.svelte from Navbar.svelte

---
 src/lib/DesktopNav.svelte   | 173 ++++++++++++++++++++++++++
 src/lib/MobileNavbar.svelte |  98 +++++++++------
 src/lib/Navbar.svelte       | 233 ++++--------------------------------
 3 files changed, 258 insertions(+), 246 deletions(-)
 create mode 100644 src/lib/DesktopNav.svelte

diff --git a/src/lib/DesktopNav.svelte b/src/lib/DesktopNav.svelte
new file mode 100644
index 0000000..cd00cc2
--- /dev/null
+++ b/src/lib/DesktopNav.svelte
@@ -0,0 +1,173 @@
+<script>
+	export let scrollMode;
+	export let navigationLinksLeft;
+	export let navigationLinksRight;
+
+	let shownSubsectionsHref = ""
+	let shownSubsectionLeftShift = 0;
+	let leftNavWidth;
+	let rightNavWidth;
+
+</script>
+
+<nav class:scrolled="{scrollMode}" class="left-nav" bind:clientWidth={leftNavWidth}>
+	{#each navigationLinksLeft as navigationLink, index (navigationLink.key)}
+		{#if !navigationLink.subsections}
+			<a href="{navigationLink.href}">{navigationLink.key}</a>
+		{:else}
+			<div on:mouseenter={(event) => {
+                                shownSubsectionLeftShift = event.target.offsetLeft
+                                shownSubsectionsHref = navigationLink.key
+                            }}
+				 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
+				 class="subsection-container">
+				<span>{navigationLink.key}</span>
+				<div class="subsections"
+					 style="--subsection-width: {leftNavWidth}px"
+					 class:open={shownSubsectionsHref === navigationLink.key}>
+					<div class="subsection-top">
+						<div class="subsection-line"></div>
+						<span class="subsection-title"
+							  style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">
+                                                {navigationLink.key}</span>
+					</div>
+					{#each navigationLink.subsections as subsection}
+						<a href="{subsection.href}">{subsection.key}</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	{/each}
+</nav>
+
+<nav class:scrolled="{scrollMode}" class="right-nav" bind:clientWidth={rightNavWidth}>
+	{#each navigationLinksRight as navigationLink}
+		{#if !navigationLink.subsections}
+			<a href="{navigationLink.href}">{navigationLink.key}</a>
+		{:else}
+			<div on:mouseenter={(event) => {
+                                shownSubsectionLeftShift = event.target.offsetLeft
+                                shownSubsectionsHref = navigationLink.href
+                            }}
+				 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
+				 class="subsection-container">
+				<span>{navigationLink.key}</span>
+				{#if shownSubsectionsHref === navigationLink.href}
+					<div class="subsections" style="--subsection-width: {rightNavWidth + 'px'}">
+						<div class="subsection-top">
+							<div class="subsection-line"></div>
+							<span class="subsection-title"
+								  style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">{navigationLink.key}</span>
+						</div>
+						{#each navigationLink.subsections as subsection}
+							<a href="{subsection.href}">{subsection.key}</a>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</nav>
+
+<style>
+    nav {
+        display: flex;
+        flex-direction: row;
+        column-gap: 1.5rem;
+        border-top: #ffffff 2px solid;
+        pointer-events: all;
+        transition: margin-bottom 250ms;
+    }
+
+    nav.scrolled {
+        margin-bottom: 1.5rem;
+    }
+
+    a {
+        text-decoration: none;
+        color: #ffffff;
+        text-transform: uppercase;
+        margin-top: 10px;
+        font-family: Roboto, serif;
+    }
+
+    span {
+        text-decoration: none;
+        color: #ffffff;
+        text-transform: uppercase;
+        margin-top: 10px;
+        font-family: Roboto, serif;
+    }
+
+    .subsection-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .subsections {
+        display: flex;
+        position: absolute;
+        background-color: #7d0b09;
+        flex-direction: column;
+        width: var(--subsection-width);
+        top: 0;
+        right: 0;
+        gap: 1rem;
+        max-height: 0;
+        margin-top: 0.5rem;
+        transition: max-height 300ms linear;
+        transform-origin: top;
+        overflow: hidden;
+    }
+
+    .subsections.open {
+        max-height: 25rem;
+    }
+
+    .subsections a {
+        margin-left: 8px;
+    }
+
+    .subsections a:last-child {
+        margin-left: 8px;
+        padding-bottom: 1rem;
+    }
+
+    .subsection-top {
+        display: flex;
+        width: 100%;
+        padding-top: 4px;
+        align-items: center;
+        position: relative;
+        min-height: 21px;
+    }
+
+    .subsection-line {
+        display: flex;
+        background-color: #FFFFFF;
+        height: 1px;
+        flex-grow: 1;
+        margin-right: 8px;
+        width: 100%;
+        margin-left: 8px;
+    }
+
+    .subsection-title {
+        padding-right: 4px;
+        padding-left: 4px;
+        font-family: 'Roboto', serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 18px;
+        color: #FFFFFF;
+        text-transform: uppercase;
+        text-align: center;
+        position: absolute;
+        height: 100%;
+        background-color: #7d0b09;
+        left: var(--subsection-left-shift)
+    }
+</style>
diff --git a/src/lib/MobileNavbar.svelte b/src/lib/MobileNavbar.svelte
index 396a528..cc32235 100644
--- a/src/lib/MobileNavbar.svelte
+++ b/src/lib/MobileNavbar.svelte
@@ -4,10 +4,17 @@
 	import NavPlus from "$lib/NavPlus.svelte";
 	import { fly } from 'svelte/transition';
 	import { afterNavigate } from "$app/navigation";
+	import NavLines from "$lib/NavLines.svelte";
 
-	export let closeNavbar;
 	export let navigationLinksLeft;
 	export let navigationLinksRight;
+	export let scrollMode;
+	let isMobileMenuOpen;
+
+	const closeNavbar = () => {
+		isMobileMenuOpen = false;
+		document.body.classList.remove("no-scroll")
+	}
 
 	let mobileOpenSubsectionsKeys = []
 	let navBackground;
@@ -19,44 +26,55 @@
 	}
 </script>
 
-<div class="nav-background" on:click={onBackgroundClick} bind:this={navBackground}></div>
-<div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
-	<div class="close">
-		<button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
-			<NavClose />
+{#if isMobileMenuOpen}
+	<div class="nav-background" on:click={onBackgroundClick} bind:this={navBackground}></div>
+	<div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
+		<div class="close">
+			<button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
+				<NavClose />
+			</button>
+		</div>
+		<nav>
+			{#each [...navigationLinksLeft, ...navigationLinksRight] as navigationLink}
+				{#if navigationLink.href}
+					<div class="link-wrapper">
+						<a href="{navigationLink.href}">{navigationLink.key}</a>
+					</div>
+				{:else}
+					<button class="link-wrapper" on:click={() => {
+								if (mobileOpenSubsectionsKeys.includes(navigationLink.key)) {
+									mobileOpenSubsectionsKeys = mobileOpenSubsectionsKeys
+										.filter((val) => val !== navigationLink.key)
+								} else {
+									mobileOpenSubsectionsKeys = [...mobileOpenSubsectionsKeys, navigationLink.key]
+								}
+							}}>
+						<span>{navigationLink.key}</span>
+						{#if mobileOpenSubsectionsKeys.includes(navigationLink.key)}
+							<NavMinus />
+						{:else}
+							<NavPlus />
+						{/if}
+					</button>
+					<div class="mobile-subsection" class:open={mobileOpenSubsectionsKeys.includes(navigationLink.key)}>
+						{#each navigationLink.subsections as subsection}
+							<a href="{subsection.href}">{subsection.key}</a>
+						{/each}
+					</div>
+				{/if}
+			{/each}
+		</nav>
+	</div>
+{:else}
+	<div class="right-nav" class:scrolled="{scrollMode}" >
+		<button class="icon-button" aria-label="отвори мобилна навигация" on:click={() => {
+                        isMobileMenuOpen = true
+                        document.body.classList.add("no-scroll")
+                    }}>
+			<NavLines></NavLines>
 		</button>
 	</div>
-	<nav>
-		{#each [...navigationLinksLeft, ...navigationLinksRight] as navigationLink}
-			{#if navigationLink.href}
-				<div class="link-wrapper">
-					<a href="{navigationLink.href}">{navigationLink.key}</a>
-				</div>
-			{:else}
-				<button class="link-wrapper" on:click={() => {
-                            if (mobileOpenSubsectionsKeys.includes(navigationLink.key)) {
-                                mobileOpenSubsectionsKeys = mobileOpenSubsectionsKeys
-                                    .filter((val) => val !== navigationLink.key)
-                            } else {
-                                mobileOpenSubsectionsKeys = [...mobileOpenSubsectionsKeys, navigationLink.key]
-                            }
-                        }}>
-					<span>{navigationLink.key}</span>
-					{#if mobileOpenSubsectionsKeys.includes(navigationLink.key)}
-						<NavMinus />
-					{:else}
-						<NavPlus />
-					{/if}
-				</button>
-				<div class="mobile-subsection" class:open={mobileOpenSubsectionsKeys.includes(navigationLink.key)}>
-					{#each navigationLink.subsections as subsection}
-						<a href="{subsection.href}">{subsection.key}</a>
-					{/each}
-				</div>
-			{/if}
-		{/each}
-	</nav>
-</div>
+{/if}
 
 <style>
     nav {
@@ -118,7 +136,7 @@
         border: none;
         align-items: flex-start;
         justify-content: flex-start;
-        padding: 0 2rem 1rem 1rem;
+        padding: 0 1rem 1rem 1rem;
         box-sizing: border-box;
     }
 
@@ -185,4 +203,8 @@
     button {
         transition: margin-bottom 250ms;
     }
+
+    .scrolled button {
+        margin-bottom: 1.5rem;
+    }
 </style>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 579392b..4f50608 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-    import NavLines from "$lib/NavLines.svelte";
     import { afterNavigate } from '$app/navigation';
     import { navigating } from '$app/stores'
     import MobileNavbar from "$lib/MobileNavbar.svelte";
     import { onMount } from "svelte";
-
-    let shownSubsectionsHref = ""
-    let shownSubsectionLeftShift = 0;
+    import DesktopNav from "$lib/DesktopNav.svelte";
 
     const navigationLinksLeft = [
         { key: "Новини", href: "/news" },
@@ -35,18 +32,10 @@
     const mobileBreakpoint = 1150;
 
     let scrollY = 0;
-    let leftNavWidth;
-    let rightNavWidth;
     let innerWidth;
-    let isMobileMenuOpen;
     let loadingBarPercentage = 0;
     let loaded = false;
 
-    const closeNavbar = () => {
-        isMobileMenuOpen = false;
-        document.body.classList.remove("no-scroll")
-    }
-
     afterNavigate(() => {
         if (loadingBarPercentage > 0) {
             loadingBarPercentage = 100;
@@ -88,88 +77,25 @@
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
 
-        {#if loaded}
-            {#if !isMobile}
-                <nav class:scrolled="{scrollMode}" class="left-nav" bind:clientWidth={leftNavWidth}>
-                    {#each navigationLinksLeft as navigationLink, index (navigationLink.key)}
-                        {#if !navigationLink.subsections}
-                            <a href="{navigationLink.href}">{navigationLink.key}</a>
-                            {:else}
-                            <div on:mouseenter={(event) => {
-                                shownSubsectionLeftShift = event.target.offsetLeft
-                                shownSubsectionsHref = navigationLink.key
-                            }}
-                                 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
-                                 class="subsection-container">
-                                <span>{navigationLink.key}</span>
-                                    <div class="subsections"
-                                         style="--subsection-width: {leftNavWidth}px"
-                                        class:open={shownSubsectionsHref === navigationLink.key}>
-                                        <div class="subsection-top">
-                                            <div class="subsection-line"></div>
-                                            <span class="subsection-title"
-                                                  style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">
-                                                {navigationLink.key}</span>
-                                        </div>
-                                        {#each navigationLink.subsections as subsection}
-                                            <a href="{subsection.href}">{subsection.key}</a>
-                                         {/each}
-                                    </div>
-                            </div>
-                        {/if}
-                    {/each}
-                </nav>
-            {:else}
-                <div class="left-nav"></div>
-            {/if}
-        {/if}
         <div class="logo">
             <a href="/">
                 <img alt="{logoHrefAlt}" src="{logoHref}"/>
             </a>
         </div>
+
         {#if loaded}
             {#if !isMobile}
-                <nav class:scrolled="{scrollMode}" class="right-nav" bind:clientWidth={rightNavWidth}>
-                    {#each navigationLinksRight as navigationLink}
-                        {#if !navigationLink.subsections}
-                            <a href="{navigationLink.href}">{navigationLink.key}</a>
-                        {:else}
-                            <div on:mouseenter={(event) => {
-                                shownSubsectionLeftShift = event.target.offsetLeft
-                                shownSubsectionsHref = navigationLink.href
-                            }}
-                                 on:mouseleave="{() => { shownSubsectionsHref = '' }}"
-                                 class="subsection-container">
-                                <span>{navigationLink.key}</span>
-                                {#if shownSubsectionsHref === navigationLink.href}
-                                    <div class="subsections" style="--subsection-width: {rightNavWidth + 'px'}">
-                                        <div class="subsection-top">
-                                            <div class="subsection-line"></div>
-                                            <span class="subsection-title"
-                                              style="--subsection-left-shift: {shownSubsectionLeftShift - 10}px">{navigationLink.key}</span>
-                                        </div>
-                                        {#each navigationLink.subsections as subsection}
-                                            <a href="{subsection.href}">{subsection.key}</a>
-                                        {/each}
-                                    </div>
-                                {/if}
-                            </div>
-                        {/if}
-                    {/each}
-                </nav>
-                {:else}
-                <div class="right-nav" class:scrolled="{scrollMode}" >
-                    <button class="icon-button" aria-label="отвори мобилна навигация" on:click={() => {
-                        isMobileMenuOpen = true
-                        document.body.classList.add("no-scroll")
-                    }}>
-                        <NavLines></NavLines>
-                    </button>
-                </div>
+                <DesktopNav scrollMode={scrollMode}
+                            navigationLinksLeft={navigationLinksLeft}
+                            navigationLinksRight={navigationLinksRight} />
+            {:else}
+                <MobileNavbar scrollMode={scrollMode}
+                              navigationLinksLeft={navigationLinksLeft}
+                              navigationLinksRight={navigationLinksRight} />
             {/if}
         {/if}
     </div>
+
     {#if showTitle && fixed}
         <h1 class:scrolled="{scrollMode}">{title}</h1>
     {:else}
@@ -177,12 +103,6 @@
             <h1>{title}</h1>
         {/if}
     {/if}
-
-    {#if isMobile && isMobileMenuOpen}
-        <MobileNavbar closeNavbar={closeNavbar}
-                      navigationLinksLeft={navigationLinksLeft}
-                      navigationLinksRight={navigationLinksRight} />
-    {/if}
 </div>
 
 <style>
@@ -190,6 +110,20 @@
         overflow: hidden;
     }
 
+    :global(.nav-container .left-nav) {
+         justify-self: flex-start;
+         margin-left: 3rem;
+         grid-column: 1;
+        grid-row: 1;
+     }
+
+    :global(.nav-container .right-nav) {
+        justify-self: flex-end;
+        margin-right: 3rem;
+        grid-column: 3;
+        grid-row: 1;
+    }
+
     .nav-container {
         position: sticky;
         top: 0;
@@ -217,29 +151,6 @@
         position: fixed;
     }
 
-    nav {
-        display: flex;
-        flex-direction: row;
-        column-gap: 1.5rem;
-        border-top: #ffffff 2px solid;
-        pointer-events: all;
-        transition: margin-bottom 250ms;
-    }
-
-    .left-nav {
-        justify-self: flex-start;
-        margin-left: 3rem;
-    }
-
-    .right-nav {
-        justify-self: flex-end;
-        margin-right: 3rem;
-    }
-
-    nav.scrolled {
-       margin-bottom: 1.5rem;
-    }
-
     a {
         text-decoration: none;
         color: #ffffff;
@@ -248,20 +159,13 @@
         font-family: Roboto, serif;
     }
 
-    span {
-        text-decoration: none;
-        color: #ffffff;
-        text-transform: uppercase;
-        margin-top: 10px;
-        font-family: Roboto, serif;
-    }
-
     .logo {
         width: auto;
         margin-top: 1rem;
         pointer-events: all;
         user-select: none;
         grid-column: 2;
+        grid-row: 1;
     }
 
     .background {
@@ -300,93 +204,6 @@
         user-select: none;
     }
 
-    .subsection-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .subsections {
-        display: flex;
-        position: absolute;
-        background-color: #7d0b09;
-        flex-direction: column;
-        width: var(--subsection-width);
-        top: 0;
-        right: 0;
-        gap: 1rem;
-        max-height: 0;
-        margin-top: 0.5rem;
-        transition: max-height 300ms linear;
-        transform-origin: top;
-        overflow: hidden;
-    }
-
-    .subsections.open {
-        max-height: 25rem;
-    }
-
-    .subsections a {
-        margin-left: 8px;
-    }
-
-    .subsections a:last-child {
-        margin-left: 8px;
-        padding-bottom: 1rem;
-    }
-
-    .subsection-top {
-        display: flex;
-        width: 100%;
-        padding-top: 4px;
-        align-items: center;
-        position: relative;
-        min-height: 21px;
-    }
-
-    .subsection-line {
-        display: flex;
-        background-color: #FFFFFF;
-        height: 1px;
-        flex-grow: 1;
-        margin-right: 8px;
-        width: 100%;
-        margin-left: 8px;
-    }
-
-    .subsection-title {
-        padding-right: 4px;
-        padding-left: 4px;
-        font-family: 'Roboto', serif;
-        font-style: normal;
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 18px;
-        color: #FFFFFF;
-        text-transform: uppercase;
-        text-align: center;
-        position: absolute;
-        height: 100%;
-        background-color: #7d0b09;
-        left: var(--subsection-left-shift)
-    }
-
-    .icon-button {
-        background-color: rgba(0, 0, 0, 0);
-        border: none;
-        cursor: pointer;
-        pointer-events: all;
-    }
-
-    button {
-        transition: margin-bottom 250ms;
-    }
-
-    .scrolled button {
-        margin-bottom: 1.5rem;
-    }
-
     .progress-bar {
         width: 100%;
         height: 1px;

From efc1f90d1cf9c1696d5e833024581b41ee1ba39a Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Fri, 22 Sep 2023 20:28:46 +0300
Subject: [PATCH 4/6] Rename MobileNavbar.svelte to MobileNav.svelte

---
 src/lib/{MobileNavbar.svelte => MobileNav.svelte} | 0
 src/lib/Navbar.svelte                             | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/lib/{MobileNavbar.svelte => MobileNav.svelte} (100%)

diff --git a/src/lib/MobileNavbar.svelte b/src/lib/MobileNav.svelte
similarity index 100%
rename from src/lib/MobileNavbar.svelte
rename to src/lib/MobileNav.svelte
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 4f50608..86e85ea 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { navigating } from '$app/stores'
-    import MobileNavbar from "$lib/MobileNavbar.svelte";
+    import MobileNav from "$lib/MobileNav.svelte";
     import { onMount } from "svelte";
     import DesktopNav from "$lib/DesktopNav.svelte";
 
@@ -89,7 +89,7 @@
                             navigationLinksLeft={navigationLinksLeft}
                             navigationLinksRight={navigationLinksRight} />
             {:else}
-                <MobileNavbar scrollMode={scrollMode}
+                <MobileNav scrollMode={scrollMode}
                               navigationLinksLeft={navigationLinksLeft}
                               navigationLinksRight={navigationLinksRight} />
             {/if}

From db6f435edccc41fc6d8c68b8385c929a716d083b Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Fri, 22 Sep 2023 20:36:35 +0300
Subject: [PATCH 5/6] Separate ProgressBar.svelte from Navbar.svelte

---
 src/lib/Navbar.svelte      | 34 ++--------------------------------
 src/lib/ProgressBar.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/ProgressBar.svelte

diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 86e85ea..6bac09a 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { navigating } from '$app/stores'
     import MobileNav from "$lib/MobileNav.svelte";
     import { onMount } from "svelte";
     import DesktopNav from "$lib/DesktopNav.svelte";
+    import ProgressBar from "$lib/ProgressBar.svelte";
 
     const navigationLinksLeft = [
         { key: "Новини", href: "/news" },
@@ -33,26 +32,8 @@
 
     let scrollY = 0;
     let innerWidth;
-    let loadingBarPercentage = 0;
     let loaded = false;
 
-    afterNavigate(() => {
-        if (loadingBarPercentage > 0) {
-            loadingBarPercentage = 100;
-            setTimeout(() => {
-                loadingBarPercentage = 0;
-            }, 100)
-        }
-    })
-
-    $: if ($navigating) {
-        setTimeout(() => {
-            if ($navigating) {
-                loadingBarPercentage = 30;
-            }
-        }, 300)
-    }
-
     onMount(() => loaded = true)
 
     $: isMobile = innerWidth < mobileBreakpoint;
@@ -73,7 +54,7 @@
 <svelte:window bind:scrollY="{scrollY}" bind:innerWidth />
 
 <div class="nav-container" class:fixed="{fixed}" style="--logo-width: {logoWidth}px; --mobile-breakpoint: {mobileBreakpoint}px">
-    <div class="progress-bar" style="--loading-bar-scale: scaleX({loadingBarPercentage}%)"></div>
+    <ProgressBar />
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
 
@@ -203,15 +184,4 @@
         color: rgba(0, 0, 0, 0);
         user-select: none;
     }
-
-    .progress-bar {
-        width: 100%;
-        height: 1px;
-        border-radius: 1px;
-        background-color: #FFFFFF;
-        position: absolute;
-        top: 0;
-        transform: var(--loading-bar-scale);
-        transform-origin: left;
-    }
 </style>
diff --git a/src/lib/ProgressBar.svelte b/src/lib/ProgressBar.svelte
new file mode 100644
index 0000000..65e08b1
--- /dev/null
+++ b/src/lib/ProgressBar.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { afterNavigate } from "$app/navigation";
+	import { navigating } from "$app/stores";
+
+	let loadingBarPercentage = 0;
+
+	$: if ($navigating) {
+		setTimeout(() => {
+			if ($navigating) {
+				loadingBarPercentage = 30;
+			}
+		}, 300)
+	}
+
+	afterNavigate(() => {
+		if (loadingBarPercentage > 0) {
+			loadingBarPercentage = 100;
+			setTimeout(() => {
+				loadingBarPercentage = 0;
+			}, 100)
+		}
+	})
+</script>
+
+<div class="progress-bar" style="--loading-bar-scale: scaleX({loadingBarPercentage}%)"></div>
+
+<style>
+    .progress-bar {
+        width: 100%;
+        height: 1px;
+        border-radius: 1px;
+        background-color: #FFFFFF;
+        position: absolute;
+        top: 0;
+        transform: var(--loading-bar-scale);
+        transform-origin: left;
+    }
+</style>

From 615f4c43063e3df465d1aa77b06af3c539940f6a Mon Sep 17 00:00:00 2001
From: Nikola Ganchev <nikolamihailovg@gmail.com>
Date: Fri, 22 Sep 2023 20:50:24 +0300
Subject: [PATCH 6/6] Fix Close.svelte usages

---
 src/lib/MobileNav.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/MobileNav.svelte b/src/lib/MobileNav.svelte
index cc32235..2b9cc53 100644
--- a/src/lib/MobileNav.svelte
+++ b/src/lib/MobileNav.svelte
@@ -1,5 +1,5 @@
 <script>
-	import NavClose from "$lib/NavClose.svelte";
+	import Close from "$lib/Close.svelte";
 	import NavMinus from "$lib/NavMinus.svelte";
 	import NavPlus from "$lib/NavPlus.svelte";
 	import { fly } from 'svelte/transition';
@@ -31,7 +31,7 @@
 	<div class="mobile-nav" transition:fly="{{ x: 300, duration: 300 }}">
 		<div class="close">
 			<button class="icon-button" aria-label="затвори мобилна навигация" on:click={closeNavbar}>
-				<NavClose />
+				<Close />
 			</button>
 		</div>
 		<nav>