From 18ec665bb29f43bd641e0afadddea76da5d26415 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Fri, 29 Sep 2023 09:46:15 +0300
Subject: [PATCH] create audio - hide actions (#243)

---
 src/components/Editor/Editor.tsx             |  2 --
 src/components/Nav/Header/Header.module.scss | 20 +++++++++++++-------
 src/components/Nav/Header/Header.tsx         | 17 +++++++----------
 src/components/Nav/Header/Link.tsx           |  4 ++--
 src/components/Views/Edit.tsx                |  3 ---
 src/components/Views/Feed.tsx                |  2 +-
 src/styles/app.scss                          |  2 ++
 7 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index b0ff7db1..f31f4e1f 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -205,7 +205,6 @@ export const Editor = (props: Props) => {
           placement: 'top',
           getReferenceClientRect: () => {
             const selectedElement = editor().view.dom.querySelector('.has-focus')
-            console.log('!!! selectedElement (blockquoteBubbleMenu):', selectedElement)
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }
@@ -225,7 +224,6 @@ export const Editor = (props: Props) => {
           placement: 'top',
           getReferenceClientRect: () => {
             const selectedElement = editor().view.dom.querySelector('.has-focus')
-            console.log('!!! selectedElement (incutBubbleMenu):', selectedElement)
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 902e59e8..5173d486 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -185,7 +185,7 @@
   }
 
   @include media-breakpoint-up(md) {
-    a,
+    span,
     button {
       padding: 0 0.4rem;
     }
@@ -250,8 +250,8 @@
 }
 
 .mainNavigationItemActive {
-  background: #000;
-  color: #fff !important;
+  background: var(--link-hover-background);
+  color: var(--link-hover-color);
 }
 
 .headerWithTitle.headerScrolledBottom {
@@ -306,7 +306,9 @@
   &::after,
   &::before {
     transform-origin: center !important;
-    transition: top 0.3s, transform 0.3s;
+    transition:
+      top 0.3s,
+      transform 0.3s;
   }
 
   &::after {
@@ -338,7 +340,9 @@
 .articleHeader,
 .articleControls {
   opacity: 0;
-  transition: opacity 0.3s, z-index 0s 0.3s;
+  transition:
+    opacity 0.3s,
+    z-index 0s 0.3s;
   z-index: -1;
 
   .headerScrolledBottom & {
@@ -435,7 +439,9 @@
   z-index: 1;
 
   .headerWithTitle.headerScrolledBottom & {
-    transition: opacity 0.3s, z-index 0s 0.3s;
+    transition:
+      opacity 0.3s,
+      z-index 0s 0.3s;
     opacity: 0;
     z-index: -1;
   }
@@ -590,7 +596,7 @@
   }
 
   a:hover {
-    background-color: var(--link-hover-background) !important;
+    //background-color: var(--link-hover-background) !important;
   }
 }
 
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 27179f44..29cc183c 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -184,16 +184,13 @@ export const Header = (props: Props) => {
             </Show>
             <div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
               <ul class="view-switcher">
-                <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
-                  <a
-                    classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
-                    onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
-                    onMouseOut={hideSubnavigation}
-                    href={getPagePath(router, 'home')}
-                  >
-                    {t('zine')}
-                  </a>
-                </li>
+                <Link
+                  onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
+                  onMouseOut={() => hideSubnavigation}
+                  routeName="home"
+                  active={isZineVisible()}
+                  body={t('zine')}
+                />
                 <Link
                   onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
                   onMouseOut={() => hideSubnavigation}
diff --git a/src/components/Nav/Header/Link.tsx b/src/components/Nav/Header/Link.tsx
index f07dad09..81648617 100644
--- a/src/components/Nav/Header/Link.tsx
+++ b/src/components/Nav/Header/Link.tsx
@@ -16,13 +16,13 @@ export const Link = (props: Props) => {
   const { page } = useRouter()
   const isSelected = page().route === props.routeName
   return (
-    <li classList={{ 'view-switcher__item--selected': isSelected }}>
+    <li classList={{ 'view-switcher__item--selected': page().route === props.routeName }}>
       <ConditionalWrapper
         condition={!isSelected && Boolean(props.routeName)}
         wrapper={(children) => <a href={getPagePath(router, props.routeName)}>{children}</a>}
       >
         <span
-          class={clsx('cursorPointer', { [styles.mainNavigationItemActive]: props.active })}
+          class={clsx('cursorPointer linkReplacement', { [styles.mainNavigationItemActive]: props.active })}
           onMouseOver={props.onMouseOver}
           onMouseOut={props.onMouseOut}
         >
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 2c5ac948..48b1534d 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -231,9 +231,6 @@ export const EditView = (props: Props) => {
     setIsLeadVisible(true)
   }
 
-  createEffect(() => {
-    console.log("!!!  props.shout.layout !== 'audio':", props.shout.layout)
-  })
   return (
     <>
       <div class={styles.container}>
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 1f292c3b..8bbbbab0 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -91,7 +91,7 @@ export const FeedView = () => {
       options.order_by = orderBy
     }
 
-    if (routesWithAuthGuard.has(page().route) && isAuthenticated()) {
+    if (isAuthenticated()) {
       return loadMyFeed(options)
     }
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index e7aa4020..45c9cfe8 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -619,6 +619,7 @@ figure {
   }
 
   a,
+  .linkReplacement,
   button {
     border-bottom: 2px solid #fff;
     color: var(--link-color);
@@ -635,6 +636,7 @@ figure {
     font-weight: bold;
 
     a,
+    .linkReplacement,
     button {
       border-bottom: 2px solid #000;
       color: #000;