Refactor SideBar.astro for improved syntax

修bug,  
div id="music" class="flex flex-col w-full gap-4">

src/components/widget/SideBar.astro

@@ -3,30 +3,31 @@ import type { MarkdownHeading } from "astro";
 import Categories from "./Categories.astro";
 import Profile from "./Profile.astro";
 import Tag from "./Tags.astro";
-import Music from './Music.astro'
-import Series from './Series.astro'
+import Music from './Music.astro';
+import Series from './Series.astro';
 
 interface Props {
-	class?: string;
-	headings?: MarkdownHeading[];
- series?: string
+  class?: string;
+  headings?: MarkdownHeading[];
+  series?: string;
 }
 
 const className = Astro.props.class;
-const series = Astro.props.series
+const series = Astro.props.series;
 ---
+
 <div id="sidebar" class:list={[className, "w-full"]}>
-    <div class="flex flex-col w-full gap-4 mb-4">
-        <Profile></Profile>
-    </div>
-    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
+  <div class="flex flex-col w-full gap-4 mb-4">
+    <Profile />
+  </div>
+  <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
     <div id="series" class="flex flex-col w-full gap-4">
-            { series && <Series series={ series }></Series> }
-        </div>
-        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
-        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
-        div id="music" class="flex flex-col w-full gap-4">
-           <Music></Music>
-       </div>
+      {series && <Series series={series} />}
     </div>
+    <Categories class="onload-animation" style="animation-delay: 150ms" />
+    <Tag class="onload-animation" style="animation-delay: 200ms" />
+    <div id="music" class="flex flex-col w-full gap-4">
+      <Music />
+    </div>
+  </div>
 </div>