From aa38f8e7b4367bbdedda859ed8dffe1b31713c2d Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Thu, 2 May 2024 16:21:45 +0330
Subject: [PATCH] template / create dynamic navigation bar

---
 app.vue                         |   7 +-
 assets/css/main.css             |   2 +
 components/home-page/Header.vue |  39 +---
 layouts/default.vue             | 377 ++++++++++++++++++++++++++++++++
 4 files changed, 385 insertions(+), 40 deletions(-)
 create mode 100644 layouts/default.vue

diff --git a/app.vue b/app.vue
index ea48c3e..d870b9c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,7 @@
 <template>
-  <NuxtPage />
-  <NuxtLayout name="footer"/>
+  <NuxtLayout />
+  <section id="openMenuFilter">
+    <NuxtPage />
+    <NuxtLayout name="footer" />
+  </section>
 </template>
diff --git a/assets/css/main.css b/assets/css/main.css
index fd2419d..140aef7 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -173,6 +173,7 @@ body {
 .imgWrap .right:before {
     background-position: -2001.4% 0;
 }
+section{}
 
 .contact {
     background-image: url("/public/images/aboutBg.jpg");
@@ -191,4 +192,5 @@ body {
 .mediagallery{
     background-image: url('/public/images/gallery2.jpg');
 background-size: cover;
+
 }
diff --git a/components/home-page/Header.vue b/components/home-page/Header.vue
index 3dc30ed..d95ff2b 100644
--- a/components/home-page/Header.vue
+++ b/components/home-page/Header.vue
@@ -3,44 +3,7 @@
   <div
     class="header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
   >
-    <svg
-      class="z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[1.51vw] me-[6.154vw] lg:me-[1.25vw]"
-      viewBox="0 0 40 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_836_14543)">
-        <path
-          d="M5 11.6667H35"
-          stroke="#A62186"
-          stroke-width="2.5"
-          stroke-linecap="round"
-        />
-        <path
-          d="M5 20H35"
-          stroke="#A62186"
-          stroke-width="2.5"
-          stroke-linecap="round"
-        />
-        <path
-          d="M5 28.3333H35"
-          stroke="#A62186"
-          stroke-width="2.5"
-          stroke-linecap="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_836_14543">
-          <rect width="40" height="40" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-
-    <img
-      src="/public/images/logo.png"
-      alt="logo"
-      class="absolute mt-[6.154vw] lg:mt-[1.25vw] right-[6.154vw] lg:right-[1.25vw] w-[8.718vw] lg:w-[70px] h-[8.718vw] lg:h-[70px]"
-    />
+ 
     
     <svg
       class="animate absolute rotating -top-[59.231vw] lg:-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[100vw] lg:w-[44.688vw]"
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..593fd64
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,377 @@
+<template>
+  <!-- desktop navMenu -->
+  <svg
+    @click="[openMenu(), (menuStatus = !menuStatus)]"
+    class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[1.51vw] me-[6.154vw] lg:me-[1.25vw]"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_836_14543)">
+      <path
+        d="M5 11.6667H35"
+        stroke="#A62186"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M5 20H35"
+        stroke="#A62186"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M5 28.3333H35"
+        stroke="#A62186"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_836_14543">
+        <rect width="40" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+
+  <div class="hidden md:block" v-show="menuStatus">
+    <svg
+      class="svg cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 lg:mt-[5.885vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.0359 4.73328L6.0526 11.7333C4.5526 12.8999 3.33594 15.3833 3.33594 17.2666V29.6166C3.33594 33.4833 6.48594 36.6499 10.3526 36.6499H29.6526C33.5193 36.6499 36.6693 33.4833 36.6693 29.6333V17.4999C36.6693 15.4833 35.3193 12.8999 33.6693 11.7499L23.3693 4.53328C21.0359 2.89995 17.2859 2.98328 15.0359 4.73328Z"
+        stroke="#A62186"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <svg
+      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[9.948vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.01855 18.6998V26.1831C5.01855 33.6664 8.01855 36.6664 15.5019 36.6664H24.4852C31.9686 36.6664 34.9686 33.6664 34.9686 26.1831V18.6998"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19.9971 20.0005C23.0471 20.0005 25.2971 17.5171 24.9971 14.4671L23.8971 3.3338H16.1137L14.9971 14.4671C14.6971 17.5171 16.9471 20.0005 19.9971 20.0005Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M30.5188 20.0005C33.8854 20.0005 36.3521 17.2671 36.0188 13.9171L35.5521 9.3338C34.9521 5.00047 33.2854 3.3338 28.9188 3.3338H23.8354L25.0021 15.0171C25.2854 17.7671 27.7688 20.0005 30.5188 20.0005Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.39932 20.0005C12.1493 20.0005 14.6326 17.7671 14.8993 15.0171L15.266 11.3338L16.066 3.3338H10.9826C6.61598 3.3338 4.94932 5.00047 4.34932 9.3338L3.89932 13.9171C3.56598 17.2671 6.03265 20.0005 9.39932 20.0005Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19.9963 28.3338C17.2129 28.3338 15.8296 29.7171 15.8296 32.5005V36.6671H24.1629V32.5005C24.1629 29.7171 22.7796 28.3338 19.9963 28.3338Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+    <svg
+      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[14.01vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M29.9998 11.9333C29.8998 11.9167 29.7831 11.9167 29.6831 11.9333C27.3831 11.85 25.5498 9.96665 25.5498 7.63332C25.5498 5.24998 27.4665 3.33331 29.8498 3.33331C32.2331 3.33331 34.1498 5.26665 34.1498 7.63332C34.1331 9.96665 32.2998 11.85 29.9998 11.9333Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M28.2829 24.0667C30.5662 24.45 33.0829 24.05 34.8496 22.8667C37.1996 21.3 37.1996 18.7333 34.8496 17.1667C33.0663 15.9833 30.5162 15.5833 28.2329 15.9833"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.94981 11.9333C10.0498 11.9167 10.1665 11.9167 10.2665 11.9333C12.5665 11.85 14.3998 9.96665 14.3998 7.63332C14.3998 5.24998 12.4831 3.33331 10.0998 3.33331C7.71647 3.33331 5.7998 5.26665 5.7998 7.63332C5.81647 9.96665 7.64981 11.85 9.94981 11.9333Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.6666 24.0667C9.38323 24.45 6.86657 24.05 5.0999 22.8667C2.7499 21.3 2.7499 18.7333 5.0999 17.1667C6.88324 15.9833 9.43323 15.5833 11.7166 15.9833"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M20.0003 24.3833C19.9003 24.3667 19.7836 24.3667 19.6836 24.3833C17.3836 24.3 15.5503 22.4167 15.5503 20.0833C15.5503 17.7 17.467 15.7833 19.8503 15.7833C22.2336 15.7833 24.1503 17.7167 24.1503 20.0833C24.1336 22.4167 22.3003 24.3167 20.0003 24.3833Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15.1502 29.6333C12.8002 31.2 12.8002 33.7667 15.1502 35.3333C17.8169 37.1167 22.1835 37.1167 24.8502 35.3333C27.2002 33.7667 27.2002 31.2 24.8502 29.6333C22.2002 27.8667 17.8169 27.8667 15.1502 29.6333Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+    <svg
+      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[18.073vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M31.6704 13.3338C34.4318 13.3338 36.6704 11.0952 36.6704 8.3338C36.6704 5.57238 34.4318 3.3338 31.6704 3.3338C28.909 3.3338 26.6704 5.57238 26.6704 8.3338C26.6704 11.0952 28.909 13.3338 31.6704 13.3338Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.6704 21.6662H20.0037"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.6704 28.3338H26.6704"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M23.3296 3.3338H14.9963C6.66292 3.3338 3.32959 6.66713 3.32959 15.0005V25.0005C3.32959 33.3338 6.66292 36.6671 14.9963 36.6671H24.9963C33.3296 36.6671 36.6629 33.3338 36.6629 25.0005V16.6671"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+    <svg
+      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 lg:mt-[22.135vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.0002 36.6667C29.1668 36.6667 36.6668 29.1667 36.6668 20C36.6668 10.8333 29.1668 3.33334 20.0002 3.33334C10.8335 3.33334 3.3335 10.8333 3.3335 20C3.3335 29.1667 10.8335 36.6667 20.0002 36.6667Z"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M20 13.3333V21.6667"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M19.9907 26.6667H20.0057"
+        stroke="#383E43"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+
+    <svg
+      class="cursor-pointer z-[1000] h-[8.718vw] lg:h-[3.125vw] w-[8.718vw] lg:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] lg:mt-[26.198vw] me-[6.154vw] lg:me-[1.25vw]"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_875_26519)">
+        <path
+          d="M20 25C26.2132 25 31.25 20.1498 31.25 14.1667C31.25 8.18359 26.2132 3.33334 20 3.33334C13.7868 3.33334 8.75 8.18359 8.75 14.1667C8.75 20.1498 13.7868 25 20 25Z"
+          stroke="#383E43"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M12.5332 22.5333L12.5166 34.8333C12.5166 36.3333 13.5666 37.0667 14.8666 36.45L19.3333 34.3334C19.6999 34.15 20.3166 34.15 20.6833 34.3334L25.1666 36.45C26.4499 37.05 27.5166 36.3333 27.5166 34.8333V22.2333"
+          stroke="#383E43"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_875_26519">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+
+  
+  <img
+  src="/public/images/logo.png"
+  alt="logo"
+  class="z-[1] absolute mt-[6.154vw] lg:mt-[1.25vw] right-[6.154vw] lg:right-[1.25vw] w-[8.718vw] lg:w-[70px] h-[8.718vw] lg:h-[70px]"
+  />
+  
+  <!-- mobile navMenu -->
+  <div
+  v-show="menuStatus"
+    class="fixed z-[1000] !bottom-[0px] flex h-[100vh] w-full items-center justify-center md:hidden"
+  >
+    <div
+      class="fixed bottom-[5vw] space-y-[6vw] text-[4.038vw] flex flex-col items-center justify-center h-[110.769vw] w-[90%] bg-white z-[10] rounded-[6.41vw]"
+    >
+      <svg
+      @click="[openMenu(), (menuStatus = !menuStatus)]"
+        class="w-[6.154vw] h-[6.154vw]"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995"
+          stroke="#292D32"
+          stroke-width="1.5"
+          stroke-miterlimit="10"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <div class="space-y-[7vw] flex flex-col items-start w-[85%]">
+        <p class="flex">
+            <svg 
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.51797 2.36664L3.0263 5.86664C2.2763 6.44997 1.66797 7.69164 1.66797 8.63331V14.8083C1.66797 16.7416 3.24297 18.325 5.1763 18.325H14.8263C16.7596 18.325 18.3346 16.7416 18.3346 14.8166V8.74997C18.3346 7.74164 17.6596 6.44997 16.8346 5.87497L11.6846 2.26664C10.518 1.44997 8.64297 1.49164 7.51797 2.36664Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            خانه</p>
+            <p class="flex">
+            <svg 
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+             viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.50928 9.34985V13.0915C2.50928 16.8332 4.00928 18.3332 7.75094 18.3332H12.2426C15.9843 18.3332 17.4843 16.8332 17.4843 13.0915V9.34985" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.99877 10.0003C11.5238 10.0003 12.6488 8.75866 12.4988 7.23366L11.9488 1.66699H8.0571L7.49877 7.23366C7.34877 8.75866 8.47377 10.0003 9.99877 10.0003Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M15.2596 10.0003C16.943 10.0003 18.1763 8.63366 18.0096 6.95866L17.7763 4.66699C17.4763 2.50033 16.643 1.66699 14.4596 1.66699H11.918L12.5013 7.50866C12.643 8.88366 13.8846 10.0003 15.2596 10.0003Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M4.69966 10.0003C6.07466 10.0003 7.31632 8.88366 7.44966 7.50866L7.63299 5.66699L8.03299 1.66699H5.49132C3.30799 1.66699 2.47466 2.50033 2.17466 4.66699L1.94966 6.95866C1.78299 8.63366 3.01632 10.0003 4.69966 10.0003Z" stroke="#383E43" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.99837 14.167C8.60671 14.167 7.91504 14.8587 7.91504 16.2503V18.3337H12.0817V16.2503C12.0817 14.8587 11.39 14.167 9.99837 14.167Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            فروشگاه</p>
+            <p class="flex">
+            <svg 
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.9999 5.96675C14.9499 5.95842 14.8916 5.95842 14.8416 5.96675C13.6916 5.92508 12.7749 4.98342 12.7749 3.81675C12.7749 2.62508 13.7332 1.66675 14.9249 1.66675C16.1166 1.66675 17.0749 2.63342 17.0749 3.81675C17.0666 4.98342 16.1499 5.92508 14.9999 5.96675Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M14.1417 12.0333C15.2834 12.225 16.5417 12.025 17.425 11.4333C18.6 10.65 18.6 9.36664 17.425 8.58331C16.5334 7.99164 15.2584 7.79163 14.1167 7.99163" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M4.97539 5.96675C5.02539 5.95842 5.08372 5.95842 5.13372 5.96675C6.28372 5.92508 7.20039 4.98342 7.20039 3.81675C7.20039 2.62508 6.24206 1.66675 5.05039 1.66675C3.85873 1.66675 2.90039 2.63342 2.90039 3.81675C2.90872 4.98342 3.82539 5.92508 4.97539 5.96675Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.83353 12.0333C4.69186 12.225 3.43353 12.025 2.5502 11.4333C1.3752 10.65 1.3752 9.36664 2.5502 8.58331C3.44186 7.99164 4.71686 7.79163 5.85853 7.99163" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.9999 12.1916C9.9499 12.1833 9.89157 12.1833 9.84157 12.1916C8.69157 12.1499 7.7749 11.2083 7.7749 10.0416C7.7749 8.84994 8.73323 7.8916 9.9249 7.8916C11.1166 7.8916 12.0749 8.85827 12.0749 10.0416C12.0666 11.2083 11.1499 12.1583 9.9999 12.1916Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M7.5751 14.8166C6.4001 15.5999 6.4001 16.8832 7.5751 17.6666C8.90843 18.5582 11.0918 18.5582 12.4251 17.6666C13.6001 16.8832 13.6001 15.5999 12.4251 14.8166C11.1001 13.9332 8.90843 13.9332 7.5751 14.8166Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            ارگان ها</p>
+            <p class="flex">
+            <svg 
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15.835 6.66699C17.2157 6.66699 18.335 5.5477 18.335 4.16699C18.335 2.78628 17.2157 1.66699 15.835 1.66699C14.4542 1.66699 13.335 2.78628 13.335 4.16699C13.335 5.5477 14.4542 6.66699 15.835 6.66699Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.83496 10.833H10.0016" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5.83496 14.167H13.335" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M11.665 1.66699H7.49837C3.33171 1.66699 1.66504 3.33366 1.66504 7.50032V12.5003C1.66504 16.667 3.33171 18.3337 7.49837 18.3337H12.4984C16.665 18.3337 18.3317 16.667 18.3317 12.5003V8.33366" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            رسانه ها</p>
+            <p class="flex">
+            <svg
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.99984 18.3333C14.5832 18.3333 18.3332 14.5833 18.3332 9.99996C18.3332 5.41663 14.5832 1.66663 9.99984 1.66663C5.4165 1.66663 1.6665 5.41663 1.6665 9.99996C1.6665 14.5833 5.4165 18.3333 9.99984 18.3333Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M10 6.66663V10.8333" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9.99561 13.3334H10.0031" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            درباره ما</p>
+            <p class="flex">
+            <svg 
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_1288_43993)">
+                <path d="M10 12.5C13.1066 12.5 15.625 10.0748 15.625 7.08329C15.625 4.09175 13.1066 1.66663 10 1.66663C6.8934 1.66663 4.375 4.09175 4.375 7.08329C4.375 10.0748 6.8934 12.5 10 12.5Z" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M6.26662 11.2667L6.2583 17.4167C6.2583 18.1667 6.7833 18.5334 7.4333 18.225L9.66663 17.1667C9.84996 17.075 10.1583 17.075 10.3416 17.1667L12.5833 18.225C13.225 18.525 13.7583 18.1667 13.7583 17.4167V11.1167" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_1288_43993">
+                <rect width="20" height="20" fill="white"/>
+                </clipPath>
+                </defs>
+                </svg>
+                
+            افتخارات</p>
+            <p class="flex">
+            <svg
+            class="w-[5.128vw] h-[5.128vw] me-[2vw]"
+            viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.41699 6.29995C7.67533 3.29995 9.21699 2.07495 12.592 2.07495H12.7003C16.4253 2.07495 17.917 3.56662 17.917 7.29162V12.725C17.917 16.45 16.4253 17.9416 12.7003 17.9416H12.592C9.24199 17.9416 7.70033 16.7333 7.42533 13.7833" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M1.66602 10H12.3993" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M10.542 7.20825L13.3337 9.99992L10.542 12.7916" stroke="#383E43" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                
+            ثبت نام / ورود</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const menuStatus = ref(false);
+
+const openMenu = () => {
+  if (menuStatus.value === true) {
+    document.getElementById("openMenuFilter").style.filter = "none";
+    document.getElementById("openMenuFilter").style.backdropFilter = "none";
+    document
+      .getElementsByTagName("html")[0]
+      .classList.remove("overflow-hidden");
+    console.log("nist");
+  } else {
+    document.getElementById("openMenuFilter").style.filter = "brightness(50%)";
+    document.getElementById("openMenuFilter").style.backdropFilter = "brightness(90%)";
+
+
+    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
+    console.log("hast");
+  }
+};
+</script>
\ No newline at end of file