side navigation styling and suggested section

BrandonWingerAir · Feb 15, 2024 · eeb6d78 · eeb6d78
1 parent 1a85198
commit eeb6d78
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/components/MenuItemFollow.vue b/components/MenuItemFollow.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex items-center hover:bg-gray-100 rounded-md w-full py-1.5 px-2">
+    <img 
+      class="rounded-full lg:mx-0 mx-auto"
+      width="35"
+      src="https://picsum.photos/id/8/300/320"
+    >
+
+    <div class="lg:pl-2.5 lg:block hidden">
+      <div class="flex items-center">
+        <div class="font-bold text-[14px]">
+          Username
+        </div>
+
+        <div class="ml-1 rounded-full bg-cyan-700 h-[15px] relative">
+          <Icon class="relative -top-[7px]" name="carbon:checkmark" color="#ffffff" size="15"/>
+        </div>
+      </div>
+
+      <div class="font-light text-[12px] text-gray-600">
+        User Description
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps(['user']);
+</script>
diff --git a/components/SideNav.vue b/components/SideNav.vue
@@ -2,16 +2,32 @@
   <div
     id="SideNav"
     :class="route.fullPath === '/' ? 'lg:w-[310px]' : 'lg:w-[220px]'"
-    class="fixed x-20 bg-[#fafafa] pt-[85px] h-full lg:border-r-0 border-r w-[87px] md:w-[90px] overflow-auto"
+    class="fixed x-20 bg-[#fafafa] pt-[65px] h-full border border-neutral-400 w-[87px] md:w-[90px] overflow-auto"
   >
-    <h2 class="lg:text-xl font-semibold md:font-lg mb-5 text-center px-4">Gaming Footage</h2>
-    <hr class="mb-7 border-neutral-200 mx-auto" width="80%">
+    <div class="bg-white py-5 border-b border-b-neutral-300">
+      <h2 class="lg:text-xl font-semibold md:font-lg text-center px-4">
+        GAMING VIDEOS
+      </h2>
+    </div>
+
     <div class="lg:w-full w-[55px] mx-auto">
       <NuxtLink to="/">
         <MenuItem menuItemIcon="New Clips" class="bg-neutral-200" menuItemColor="#000" menuItemSize="30"/>
       </NuxtLink>
       <MenuItem menuItemIcon="Your Feed" menuItemColor="#000000" menuItemSize="27"/>
       <MenuItem menuItemIcon="Top Clips" menuItemColor="#000000" menuItemSize="27"/>
+
+      <hr width="90%" class="border-0 border-b mx-auto mt-2"/>
+
+      <div class="lg:block hidden text-xs text-gray-600 font-semibold pt-4 pb-2 px-2">
+        Suggested Accounts
+      </div>
+
+      <div class="lg:hidden block pt-3"></div>
+
+      <div class="cursor-pointer">
+        <MenuItemFollow/>
+      </div>
     </div>
   </div>
 </template>