sidemenu fixed (#22)

Turizak · Sep 23, 2024 · 4b0f594 · 4b0f594
1 parent ee38225
commit 4b0f594
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 43 deletions.
diff --git a/components/Nav-bar.vue b/components/Nav-bar.vue
@@ -20,46 +20,19 @@ async function logout() {
 <template>
   <nav>
     <ul class="flex justify-between bg-green-400 text-black">
-      <div class="flex">
-        <li class="p-2">
+      <div class="flex p-2">
+        <li>
           <UButton label="Open" @click="openSlideover">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              class="size-5"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
-                clip-rule="evenodd"
-              />
-            </svg>
+            <UIcon name="material-symbols:density-medium" class="w-5 h-5" />
           </UButton>
         </li>
-        <li class="py-2 text-xl">Fables</li>
-      </div>
-      <div class=":hover cursor-pointer" @click="logout">
-        <li class="py-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            class="size-5 mt-1 mx-2"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z"
-              clip-rule="evenodd"
-            />
-            <path
-              fill-rule="evenodd"
-              d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </li>
+        <li><p class="text-xl px-2">Fables</p></li>
       </div>
+      <li class="p-2">
+        <UButton @click="logout">
+          <UIcon name="material-symbols:logout" class="w-5 h-5" />
+        </UButton>
+      </li>
     </ul>
   </nav>
 </template>
diff --git a/components/SideMenu.vue b/components/SideMenu.vue
@@ -14,7 +14,7 @@ const slideover = useSlideover();
       <ul>
         <li class="h-6" />
         <li>
-          <NuxtLink to="/">
+          <NuxtLink to="/" @click="slideover.close">
             <div
               class="flex p-2 ml-2 gap-2 md:hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
@@ -24,13 +24,13 @@ const slideover = useSlideover();
           </NuxtLink>
         </li>
         <li>
-          <div class="flex p-2 ml-2 gap-2">
+          <div class="flex p-2 ml-2 gap-2 bg-gray-700">
             <UIcon name="material-symbols:globe" class="w-5 h-5 mt-1" />
             <p class="text-xl">Campaigns</p>
           </div>
         </li>
         <li>
-          <NuxtLink to="/create-campaign">
+          <NuxtLink to="/create-campaign" @click="slideover.close">
             <div
               class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
@@ -43,7 +43,7 @@ const slideover = useSlideover();
           </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/view-campaigns">
+          <NuxtLink to="/view-campaigns" @click="slideover.close">
             <div
               class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
@@ -56,12 +56,21 @@ const slideover = useSlideover();
           </NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/cchar/cchar-1">
+          <div class="flex p-2 ml-2 gap-2 bg-gray-700">
+            <UIcon name="heroicons:user-group-solid" class="w-5 h-5 mt-1" />
+            <p class="text-xl">Characters</p>
+          </div>
+        </li>
+        <li>
+          <NuxtLink to="/cchar/cchar-1" @click="slideover.close">
             <div
               class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
-              <UIcon name="material-symbols:person-book" class="w-5 h-5 mt-1" />
-              <p class="text-xl">Characters</p>
+              <UIcon
+                name="material-symbols:person-book"
+                class="w-5 h-5 mt-1 ml-4"
+              />
+              <p class="text-lg">Create a Character</p>
             </div>
           </NuxtLink>
         </li>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@iconify-json/material-symbols": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
     "@nuxt/types": "^2.18.1",
     "@nuxt/ui": "^2.18.4",