作家写作

frontend-web/src/components/page-sdebar.css

@@ -16,7 +16,9 @@
 .item-nav{
     width:100%;
     padding:10px 0;
+    border:0;
     border-bottom:1px solid rgba(85, 166, 254, 0.2);
+    background:transparent;
     font-family:'Noto Sans S Chinese', sans-serif;
     font-weight:500;
     color:rgba(255, 255, 255, 0.8);
@@ -44,7 +46,7 @@
 
 .item-nav-content{ 
     width: 155px;
-    height: 970px;
+    min-height: 970px;
     background: rgba(3, 38, 80, 0.8);
     border: 1px solid;
     border-color: rgba(43, 143, 254, 0.6);
@@ -54,6 +56,8 @@
     left: 97px;
     top: 0;
     z-index: 1000;
+    padding: 14px 13px 18px 16px;
+    overflow-y:auto;
 }
 
 .item-nav-active{
@@ -81,4 +85,87 @@
     height:45px;
     background: url('../assets/icon/nav-line-logo.svg') no-repeat;
     background-size: cover;
-}
+}
+
+.sidebar-flyout-list{
+    display:flex;
+    flex-direction:column;
+    gap:2px;
+    position:relative;
+}
+
+.sidebar-flyout-list--level-1,
+.sidebar-flyout-list--level-2,
+.sidebar-flyout-list--level-3{
+    margin-left:19px;
+    padding-left:14px;
+}
+
+.sidebar-flyout-node{
+    position:relative;
+}
+
+.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded > .sidebar-flyout-list::before{
+    content:'';
+    position:absolute;
+    left:0;
+    top:0;
+    width:1px;
+    height:100%;
+    background:rgba(43, 143, 254, 0.22);
+}
+
+.sidebar-flyout-item{
+    width:100%;
+    min-height:34px;
+    display:flex;
+    align-items:center;
+    gap:9px;
+    border:0;
+    background:transparent;
+    padding:3px 0;
+    font-family:Noto Sans S Chinese;
+    font-size:18px;
+    line-height:28px;
+    font-weight:500;
+    letter-spacing:0;
+    color:rgba(255, 255, 255, 0.8);
+    text-align:left;
+    cursor:pointer;
+    transition:color 0.2s ease, text-shadow 0.2s ease;
+}
+
+.sidebar-flyout-item:hover,
+.sidebar-flyout-item--active{
+    color:#48ddff;
+    text-shadow:0 0 8px rgba(72, 221, 255, 0.25);
+}
+
+.sidebar-flyout-item--leaf{
+    justify-content:center;
+    padding-left:0;
+}
+
+.sidebar-flyout-list--level-1 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-2 > .sidebar-flyout-node > .sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-3 > .sidebar-flyout-node > .sidebar-flyout-item--leaf{
+    padding-left:0;
+}
+
+.sidebar-flyout-arrow{
+    width:9px;
+    height:9px;
+    flex:0 0 9px;
+    background:url('../assets/icon/down-logo.svg') center / contain no-repeat;
+    transform:rotate(-90deg);
+    transition:transform 0.2s ease;
+}
+
+.sidebar-flyout-node--expanded > .sidebar-flyout-item > .sidebar-flyout-arrow{
+    transform:rotate(0deg);
+}
+
+.sidebar-flyout-label{
+    flex:1;
+    white-space:nowrap;
+}