Cleanup

src/css/sidebar.css

@@ -26,7 +26,6 @@
   top: 57px;
   height: 100vh;
   width: 0;
-  padding: 1.25rem;
   overflow-y: auto;
   display: none;
 }
@@ -70,7 +69,8 @@
   height: 30px;
 }
 
-.sidebar-item {
+.sidebar-item,
+.drawer-navigation .sidebar-item {
   position: relative;
   font-size: 0.9rem;
   color: #a1a1aa;
@@ -81,12 +81,14 @@
   text-decoration: none !important;
 }
 
-.sidebar-item:hover {
+.sidebar-item:hover,
+.drawer-navigation .sidebar-item:hover {
   color: #fff;
   cursor: pointer;
 }
 
-.active-sidebar-item {
+.active-sidebar-item,
+.drawer-navigation .active-sidebar-item {
   width: fit-content;
   padding: 0.25em 0.25em 0.25em 0;
   color: #fff;
@@ -94,7 +96,8 @@
   transition: color 0.3s ease;
 }
 
-.active-sidebar-item::before {
+.active-sidebar-item::before,
+.drawer-navigation .active-sidebar-item::before {
   content: '';
   position: absolute;
   left: -1.15rem;
@@ -107,12 +110,15 @@
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.active-sidebar-item:hover {
+.active-sidebar-item:hover,
+.drawer-navigation .active-sidebar-item:hover {
   text-decoration: none;
 }
 
 .sidebar-item .new-tag,
-.sidebar-item .updated-tag {
+.sidebar-item .updated-tag,
+.drawer-navigation .sidebar-item .new-tag,
+.drawer-navigation .sidebar-item .updated-tag {
   margin-left: 0.6em;
   font-size: 10px;
   border-radius: 6px;
@@ -122,13 +128,15 @@
   text-decoration: none !important;
 }
 
-.sidebar-item .new-tag {
+.sidebar-item .new-tag,
+.drawer-navigation .sidebar-item .new-tag {
   color: #fff;
   border: 1px solid #27ff64;
   background-color: rgba(82, 39, 255, 0.3);
 }
 
-.sidebar-item .updated-tag {
+.sidebar-item .updated-tag,
+.drawer-navigation .sidebar-item .updated-tag {
   color: #fff;
   border: 1px solid #ffffff77;
   background-color: #ffffff26;
@@ -162,12 +170,10 @@
   background-size: 200% 200%;
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  color: #fff;
   border: none;
+  color: #fff;
   border-radius: 50px;
   cursor: pointer;
-
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -231,7 +237,8 @@
   margin-bottom: 1rem;
 }
 
-.category-name {
+.category-name,
+.drawer-navigation .category-name {
   margin-bottom: 0.5rem;
   font-weight: 900;
   letter-spacing: -0.5px;
@@ -239,7 +246,13 @@
   font-size: 1.1rem;
 }
 
-.category-items {
+.drawer-navigation .category-name {
+  font-size: 1rem;
+  letter-spacing: -1px;
+}
+
+.category-items,
+.drawer-navigation .category-items {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
@@ -519,83 +532,8 @@
 }
 
 .drawer-navigation .category-name {
-  margin-bottom: 0.5rem;
-  font-weight: 900;
-  letter-spacing: -1px;
-  color: #fff;
   font-size: 1rem;
-}
-
-.drawer-navigation .category-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding-left: 1rem;
-  border-left: 2px solid #ffffff33;
-  position: relative;
-}
-
-.drawer-navigation .sidebar-item {
-  position: relative;
-  font-size: 0.9rem;
-  color: #a1a1aa;
-  padding: 0.25em 0;
-  display: flex;
-  align-items: center;
-  transition: color 0.3s ease;
-  text-decoration: none !important;
-}
-
-.drawer-navigation .sidebar-item:hover {
-  color: #fff;
-}
-
-.drawer-navigation .active-sidebar-item {
-  width: fit-content;
-  padding: 0.25em 0.25em 0.25em 0;
-  color: #fff;
-  position: relative;
-  transition: color 0.3s ease;
-}
-
-.drawer-navigation .active-sidebar-item::before {
-  content: '';
-  position: absolute;
-  left: -1.15rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 2px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 1px;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.drawer-navigation .active-sidebar-item:hover {
-  text-decoration: none;
-}
-
-.drawer-navigation .sidebar-item .new-tag,
-.drawer-navigation .sidebar-item .updated-tag {
-  margin-left: 0.6em;
-  font-size: 10px;
-  border-radius: 6px;
-  font-weight: 500;
-  padding: 0.2em 0.4em;
-  opacity: 1;
-  text-decoration: none !important;
-}
-
-.drawer-navigation .sidebar-item .new-tag {
-  color: #fff;
-  border: 1px solid #27ff64;
-  background-color: rgba(82, 39, 255, 0.3);
-}
-
-.drawer-navigation .sidebar-item .updated-tag {
-  color: #fff;
-  border: 1px solid #ffffff77;
-  background-color: #ffffff26;
+  letter-spacing: -1px;
 }
 
 @media (min-width: 768px) {
@@ -608,4 +546,4 @@
   .drawer-header {
     padding: 0 1em;
   }
-}
+}

src/demo/TextAnimations/GradientTextDemo.vue

@@ -4,7 +4,7 @@
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Add a splash of color!"
@@ -17,7 +17,7 @@
 
         <h2 class="demo-title-extra">Border Animation</h2>
 
-        <div class="demo-container relative min-h-[150px] flex items-center justify-center">
+        <div class="demo-container">
           <div class="text-[2rem]">
             <GradientText
               text="Now with a cool border!"
@@ -130,6 +130,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .demo-title-extra {
   font-size: 1.125rem;
   font-weight: 600;

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -59,7 +59,7 @@ import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
 const containerRef = ref<HTMLElement | null>(null);
-const scrollText = ref('vuebits');
+const scrollText = ref('Vue Bits!');
 const animationDuration = ref(1);
 const ease = ref('back.inOut(2)');
 const scrollStart = ref('center bottom+=50%');

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -4,13 +4,13 @@
       <template #preview>
         <h2 class="demo-title-extra">Basic</h2>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <div class="demo-container">
           <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
         </div>
 
         <h2 class="demo-title-extra">Button Text</h2>
 
-        <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+        <div class="demo-container">
           <div class="shiny-button">
             <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
           </div>
@@ -87,6 +87,10 @@ const propData = [
 </script>
 
 <style scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .shiny-button {
   padding: 12px 24px;
   border-radius: 50px;