From d0999c301464c12ae0982573fdd635e06db0411f Mon Sep 17 00:00:00 2001
From: Justyna <46591755+justyna-13@users.noreply.github.com>
Date: Fri, 23 Jun 2023 12:47:30 +0200
Subject: [PATCH] feat: navbar top simple mobile (#2830)

* feat: navbar top with simple mobile

* feat: navbar top with simple mobile

* fix: smaller iframe for navbars top
---
 apps/docs/components/blocks/NavbarTop.md      |  34 ++++-
 .../NavbarTop/NavbarTopFilledSimpleMobile.tsx | 134 +++++++++++++++++
 .../NavbarTop/NavbarTopSimpleMobile.tsx       | 135 ++++++++++++++++++
 .../NavbarTop/NavbarTopFilledSimpleMobile.vue | 131 +++++++++++++++++
 .../NavbarTop/NavbarTopSimpleMobile.vue       | 127 ++++++++++++++++
 5 files changed, 559 insertions(+), 2 deletions(-)
 create mode 100644 apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
 create mode 100644 apps/preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx
 create mode 100644 apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
 create mode 100644 apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue

diff --git a/apps/docs/components/blocks/NavbarTop.md b/apps/docs/components/blocks/NavbarTop.md
index 596f514c53..e78bf1f156 100644
--- a/apps/docs/components/blocks/NavbarTop.md
+++ b/apps/docs/components/blocks/NavbarTop.md
@@ -11,7 +11,7 @@ hideToc: true
 
 ## NavbarTop with white background
 
-<Showcase showcase-name="NavbarTop/NavbarTop" no-paddings style="min-height: 500px;">
+<Showcase showcase-name="NavbarTop/NavbarTop" no-paddings style="min-height: 150px;">
 
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTop.vue
@@ -24,7 +24,7 @@ hideToc: true
 
 ## NavbarTop with filled background
 
-<Showcase showcase-name="NavbarTop/NavbarTopFilled" no-paddings style="min-height: 500px;">
+<Showcase showcase-name="NavbarTop/NavbarTopFilled" no-paddings style="min-height: 150px;">
 
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue
@@ -34,3 +34,33 @@ hideToc: true
 <!-- end react -->
 
 </Showcase>
+
+## NavbarTop with white background and simple mobile bar
+
+The alternate NavbarTop variant designed to work seamlessly with the NavbarBottom, providing a cohesive mobile navigation experience.
+
+By combining with the NavbarBottom, you can create a unified navigation structure that accommodates both top and bottom navigation elements on mobile devices. This ensures a smooth and intuitive user experience, allowing users to access important navigation options easily. 
+
+<Showcase showcase-name="NavbarTop/NavbarTopSimpleMobile" no-paddings style="min-height: 150px;">
+
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx#source
+<!-- end react -->
+
+</Showcase>
+
+## NavbarTop with filled background and simple mobile bar
+
+<Showcase showcase-name="NavbarTop/NavbarTopFilledSimpleMobile" no-paddings style="min-height: 150px;">
+
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx#source
+<!-- end react -->
+
+</Showcase>
diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
new file mode 100644
index 0000000000..695681882f
--- /dev/null
+++ b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
@@ -0,0 +1,134 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { useState } from 'react';
+import {
+  SfButton,
+  SfIconShoppingCart,
+  SfIconFavorite,
+  SfIconPerson,
+  SfIconExpandMore,
+  SfInput,
+  SfIconSearch,
+  SfIconMenu,
+  SfIconArrowBack,
+} from '@storefront-ui/react';
+
+export default function TopNavFilled() {
+  const [inputValue, setInputValue] = useState('');
+
+  const actionItems = [
+    {
+      icon: <SfIconShoppingCart />,
+      label: '',
+      ariaLabel: 'Cart',
+      role: 'button',
+    },
+    {
+      icon: <SfIconFavorite />,
+      label: '',
+      ariaLabel: 'Wishlist',
+      role: 'button',
+    },
+    {
+      label: 'Log in',
+      icon: <SfIconPerson />,
+      ariaLabel: 'Log in',
+      role: 'login',
+    },
+  ];
+
+  const search = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    alert(`Successfully found 10 results for ${inputValue}`);
+  };
+
+  return (
+    <header className="flex justify-center w-full py-2 px-4 lg:py-5 lg:px-6 text-white border-0 bg-primary-700">
+      <div className="flex flex-wrap lg:flex-nowrap justify-between items-center flex-row md:justify-start h-full max-w-[1536px] w-full">
+        <SfButton variant="tertiary" className="md:hidden text-white" aria-label="Go back">
+          <SfIconArrowBack />
+        </SfButton>
+        <a
+          href="#"
+          aria-label="SF Homepage"
+          className="inline-block mr-4 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm shrink-0"
+        >
+          <img
+            src="http://localhost:3100/@assets/vsf_logo_white.svg"
+            alt="Sf Logo"
+            className="w-[175px] md:h-6 md:w-[176px] lg:w-[12.5rem] lg:h-[1.75rem]"
+          />
+        </a>
+        <SfButton variant="tertiary" className="md:hidden text-white" aria-label="Search">
+          <SfIconSearch />
+        </SfButton>
+        <SfButton
+          aria-label="Open categories"
+          className="hidden md:block lg:hidden order-first lg:order-1 mr-4 text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900"
+          square
+          variant="tertiary"
+        >
+          <SfIconMenu />
+        </SfButton>
+        <SfButton
+          className="hidden lg:flex lg:mr-4 text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900"
+          type="button"
+          variant="tertiary"
+          slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
+        >
+          <span className="hidden lg:flex whitespace-nowrap">Browse products</span>
+        </SfButton>
+        <form
+          role="search"
+          className="hidden md:flex flex-[100%] order-last lg:order-3 mt-2 lg:mt-0 pb-2 lg:pb-0"
+          onSubmit={search}
+        >
+          <SfInput
+            value={inputValue}
+            type="search"
+            className="[&::-webkit-search-cancel-button]:appearance-none"
+            placeholder="Search"
+            wrapperClassName="flex-1 h-10 pr-0"
+            size="base"
+            slotSuffix={
+              <span className="flex items-center">
+                <SfButton
+                  variant="tertiary"
+                  square
+                  aria-label="search"
+                  type="submit"
+                  className="rounded-l-none hover:bg-transparent active:bg-transparent"
+                >
+                  <SfIconSearch />
+                </SfButton>
+              </span>
+            }
+            onChange={(event) => setInputValue(event.target.value)}
+          />
+        </form>
+        <nav className="flex-1 hidden md:flex justify-end lg:order-last lg:ml-4">
+          <div className="flex flex-row flex-nowrap">
+            {actionItems.map((actionItem) => (
+              <SfButton
+                key={actionItem.ariaLabel}
+                className="mr-2 -ml-0.5 rounded-md text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900"
+                aria-label={actionItem.ariaLabel}
+                variant="tertiary"
+                square
+                slotPrefix={actionItem.icon}
+              >
+                {actionItem.role === 'login' && (
+                  <p className="hidden xl:inline-flex whitespace-nowrap">{actionItem.label}</p>
+                )}
+              </SfButton>
+            ))}
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+// #endregion source
+TopNavFilled.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx
new file mode 100644
index 0000000000..7088d93e39
--- /dev/null
+++ b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopSimpleMobile.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable no-alert */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { useState } from 'react';
+import {
+  SfButton,
+  SfIconShoppingCart,
+  SfIconFavorite,
+  SfIconPerson,
+  SfIconExpandMore,
+  SfInput,
+  SfIconSearch,
+  SfIconMenu,
+  SfIconArrowBack,
+} from '@storefront-ui/react';
+
+export default function TopNavSimpleMobile() {
+  const [inputValue, setInputValue] = useState('');
+
+  const actionItems = [
+    {
+      icon: <SfIconShoppingCart />,
+      label: '',
+      ariaLabel: 'Cart',
+      role: 'button',
+    },
+    {
+      icon: <SfIconFavorite />,
+      label: '',
+      ariaLabel: 'Wishlist',
+      role: 'button',
+    },
+    {
+      label: 'Log in',
+      icon: <SfIconPerson />,
+      ariaLabel: 'Log in',
+      role: 'login',
+    },
+  ];
+
+  const search = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    alert(`Successfully found 10 results for ${inputValue}`);
+  };
+
+  return (
+    <header className="flex justify-center w-full py-2 px-4 lg:py-5 lg:px-6 bg-white border-b border-neutral-200">
+      <div className="flex flex-wrap justify-between lg:flex-nowrap items-center flex-row md:justify-start h-full max-w-[1536px] w-full">
+        <SfButton variant="tertiary" className="md:hidden" aria-label="Go back">
+          <SfIconArrowBack />
+        </SfButton>
+        <a
+          href="#"
+          aria-label="SF Homepage"
+          className="inline-block mr-4 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm shrink-0"
+        >
+          <img
+            src="http://localhost:3100/@assets/vsf_logo.svg"
+            alt="Sf Logo"
+            className="w-[175px] md:h-6 md:w-[176px] lg:w-[12.5rem] lg:h-[1.75rem]"
+          />
+        </a>
+        <SfButton variant="tertiary" className="md:hidden" aria-label="Search">
+          <SfIconSearch />
+        </SfButton>
+        <SfButton
+          aria-label="Open categories"
+          className="hidden md:block lg:hidden order-first lg:order-1 mr-4"
+          square
+          variant="tertiary"
+        >
+          <SfIconMenu />
+        </SfButton>
+        <SfButton
+          className="hidden lg:flex lg:mr-4"
+          type="button"
+          variant="tertiary"
+          slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
+        >
+          <span className="hidden lg:flex whitespace-nowrap">Browse products</span>
+        </SfButton>
+        <form
+          role="search"
+          className="hidden md:flex flex-[100%] order-last lg:order-3 mt-2 lg:mt-0 pb-2 lg:pb-0"
+          onSubmit={search}
+        >
+          <SfInput
+            value={inputValue}
+            type="search"
+            className="[&::-webkit-search-cancel-button]:appearance-none"
+            placeholder="Search"
+            wrapperClassName="flex-1 h-10 pr-0"
+            size="base"
+            slotSuffix={
+              <span className="flex items-center">
+                <SfButton
+                  variant="tertiary"
+                  square
+                  aria-label="search"
+                  type="submit"
+                  className="rounded-l-none hover:bg-transparent active:bg-transparent"
+                >
+                  <SfIconSearch />
+                </SfButton>
+              </span>
+            }
+            onChange={(event) => setInputValue(event.target.value)}
+          />
+        </form>
+        <nav className="flex-1 hidden md:flex justify-end lg:order-last lg:ml-4">
+          <div className="flex flex-row flex-nowrap">
+            {actionItems.map((actionItem) => (
+              <SfButton
+                key={actionItem.ariaLabel}
+                className="mr-2 -ml-0.5 rounded-md text-primary-700 hover:bg-primary-100 active:bg-primary-200 hover:text-primary-600 active:text-primary-700"
+                aria-label={actionItem.ariaLabel}
+                variant="tertiary"
+                square
+                slotPrefix={actionItem.icon}
+              >
+                {actionItem.role === 'login' && (
+                  <p className="hidden xl:inline-flex whitespace-nowrap">{actionItem.label}</p>
+                )}
+              </SfButton>
+            ))}
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+// #endregion source
+TopNavSimpleMobile.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
new file mode 100644
index 0000000000..f2a678935c
--- /dev/null
+++ b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
@@ -0,0 +1,131 @@
+<template>
+  <header class="flex justify-center w-full py-2 px-4 lg:py-5 lg:px-6 bg-primary-700 border-b border-neutral-200">
+    <div
+      class="flex flex-wrap justify-between lg:flex-nowrap items-center flex-row md:justify-start h-full max-w-[1536px] w-full"
+    >
+      <SfButton variant="tertiary" class="md:hidden text-white" aria-label="Go back">
+        <SfIconArrowBack />
+      </SfButton>
+      <a
+        href="#"
+        aria-label="SF Homepage"
+        class="inline-block mr-4 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm shrink-0"
+      >
+        <img
+          src="http://localhost:3100/@assets/vsf_logo_white.svg"
+          alt="Sf Logo"
+          class="w-[175px] md:h-6 md:w-[176px] lg:w-[12.5rem] lg:h-[1.75rem]"
+        />
+      </a>
+      <SfButton variant="tertiary" class="md:hidden text-white" aria-label="Search">
+        <SfIconSearch />
+      </SfButton>
+      <SfButton
+        aria-label="Open categories"
+        class="hidden md:block text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900 lg:hidden order-first lg:order-1 mr-4"
+        square
+        variant="tertiary"
+      >
+        <SfIconMenu />
+      </SfButton>
+      <SfButton
+        class="hidden lg:flex text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900 lg:mr-4"
+        type="button"
+        variant="tertiary"
+      >
+        <template #suffix>
+          <SfIconExpandMore class="hidden lg:block" />
+        </template>
+        <span class="hidden lg:flex whitespace-nowrap">Browse products</span>
+      </SfButton>
+      <form
+        role="search"
+        class="hidden md:flex flex-[100%] order-last lg:order-3 mt-2 lg:mt-0 pb-2 lg:pb-0"
+        @submit.prevent="search"
+      >
+        <SfInput
+          v-model="inputValue"
+          type="search"
+          class="[&::-webkit-search-cancel-button]:appearance-none"
+          placeholder="Search"
+          wrapper-class="flex-1 h-10 pr-0"
+          size="base"
+        >
+          <template #suffix>
+            <span class="flex items-center">
+              <SfButton
+                variant="tertiary"
+                square
+                aria-label="search"
+                type="submit"
+                class="rounded-l-none hover:bg-transparent active:bg-transparent"
+              >
+                <SfIconSearch />
+              </SfButton>
+            </span>
+          </template>
+        </SfInput>
+      </form>
+      <nav class="hidden md:flex flex-1 justify-end lg:order-last lg:ml-4">
+        <div class="flex flex-row flex-nowrap">
+          <SfButton
+            v-for="actionItem in actionItems"
+            :key="actionItem.ariaLabel"
+            class="text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900 mr-2 -ml-0.5 rounded-md"
+            :aria-label="actionItem.ariaLabel"
+            variant="tertiary"
+            square
+          >
+            <template #prefix>
+              <Component :is="actionItem.icon" />
+            </template>
+            <span v-if="actionItem.role === 'login'" class="hidden xl:inline-flex whitespace-nowrap">{{
+              actionItem.label
+            }}</span>
+          </SfButton>
+        </div>
+      </nav>
+    </div>
+  </header>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import {
+  SfButton,
+  SfIconShoppingCart,
+  SfIconFavorite,
+  SfIconPerson,
+  SfIconExpandMore,
+  SfInput,
+  SfIconSearch,
+  SfIconMenu,
+  SfIconArrowBack,
+} from '@storefront-ui/vue';
+
+const actionItems = [
+  {
+    icon: SfIconShoppingCart,
+    ariaLabel: 'Cart',
+    role: 'button',
+    label: '',
+  },
+  {
+    icon: SfIconFavorite,
+    ariaLabel: 'Wishlist',
+    role: 'button',
+    label: '',
+  },
+  {
+    label: 'Log in',
+    icon: SfIconPerson,
+    ariaLabel: 'Log in',
+    role: 'login',
+  },
+];
+
+const inputValue = ref('');
+
+const search = () => {
+  alert(`Successfully found 10 results for ${inputValue.value}`);
+};
+</script>
diff --git a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
new file mode 100644
index 0000000000..d458169256
--- /dev/null
+++ b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
@@ -0,0 +1,127 @@
+<template>
+  <header class="flex justify-center w-full py-2 px-4 lg:py-5 lg:px-6 bg-white border-b border-neutral-200">
+    <div
+      class="flex flex-wrap justify-between lg:flex-nowrap items-center flex-row md:justify-start h-full max-w-[1536px] w-full"
+    >
+      <SfButton variant="tertiary" class="md:hidden" aria-label="Go back">
+        <SfIconArrowBack />
+      </SfButton>
+      <a
+        href="#"
+        aria-label="SF Homepage"
+        class="inline-block mr-4 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm shrink-0"
+      >
+        <img
+          src="http://localhost:3100/@assets/vsf_logo.svg"
+          alt="Sf Logo"
+          class="w-[175px] md:h-6 md:w-[176px] lg:w-[12.5rem] lg:h-[1.75rem]"
+        />
+      </a>
+      <SfButton variant="tertiary" class="md:hidden" aria-label="Search">
+        <SfIconSearch />
+      </SfButton>
+      <SfButton
+        aria-label="Open categories"
+        class="hidden md:block lg:hidden order-first lg:order-1 mr-4"
+        square
+        variant="tertiary"
+      >
+        <SfIconMenu />
+      </SfButton>
+      <SfButton class="hidden lg:flex lg:mr-4" type="button" variant="tertiary">
+        <template #suffix>
+          <SfIconExpandMore class="hidden lg:block" />
+        </template>
+        <span class="hidden lg:flex whitespace-nowrap">Browse products</span>
+      </SfButton>
+      <form
+        role="search"
+        class="hidden md:flex flex-[100%] order-last lg:order-3 mt-2 lg:mt-0 pb-2 lg:pb-0"
+        @submit.prevent="search"
+      >
+        <SfInput
+          v-model="inputValue"
+          type="search"
+          class="[&::-webkit-search-cancel-button]:appearance-none"
+          placeholder="Search"
+          wrapper-class="flex-1 h-10 pr-0"
+          size="base"
+        >
+          <template #suffix>
+            <span class="flex items-center">
+              <SfButton
+                variant="tertiary"
+                square
+                aria-label="search"
+                type="submit"
+                class="rounded-l-none hover:bg-transparent active:bg-transparent"
+              >
+                <SfIconSearch />
+              </SfButton>
+            </span>
+          </template>
+        </SfInput>
+      </form>
+      <nav class="flex-1 hidden md:flex justify-end lg:order-last lg:ml-4">
+        <div class="flex flex-row flex-nowrap">
+          <SfButton
+            v-for="actionItem in actionItems"
+            :key="actionItem.ariaLabel"
+            class="mr-2 -ml-0.5 rounded-md text-primary-700 hover:bg-primary-100 active:bg-primary-200 hover:text-primary-600 active:text-primary-700"
+            :aria-label="actionItem.ariaLabel"
+            variant="tertiary"
+            square
+          >
+            <template #prefix>
+              <Component :is="actionItem.icon" />
+            </template>
+            <span v-if="actionItem.role === 'login'" class="hidden xl:inline-flex whitespace-nowrap">{{
+              actionItem.label
+            }}</span>
+          </SfButton>
+        </div>
+      </nav>
+    </div>
+  </header>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import {
+  SfButton,
+  SfIconShoppingCart,
+  SfIconFavorite,
+  SfIconPerson,
+  SfIconExpandMore,
+  SfInput,
+  SfIconSearch,
+  SfIconMenu,
+  SfIconArrowBack,
+} from '@storefront-ui/vue';
+
+const actionItems = [
+  {
+    icon: SfIconShoppingCart,
+    ariaLabel: 'Cart',
+    role: 'button',
+    label: '',
+  },
+  {
+    icon: SfIconFavorite,
+    ariaLabel: 'Wishlist',
+    role: 'button',
+    label: '',
+  },
+  {
+    label: 'Log in',
+    icon: SfIconPerson,
+    ariaLabel: 'Log in',
+    role: 'login',
+  },
+];
+
+const inputValue = ref('');
+
+const search = () => {
+  alert(`Successfully found 10 results for ${inputValue.value}`);
+};
+</script>