@wface/pixel-cli - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

src/components/blocks/sidebar/Sidebar.module.scss

+.sidebar {
+  width: 240px;
+  background: var(--elevation-surface);
+  height: 100vh;
+  border-right: 1px solid var(--border-default);
+
+  &.mini {
+    width: 90px;
+  }
+
+  .sidebarWrapper {
+    .sidebarHeader {
+      padding: 24px 8px 8px;
+
+      .wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 8px;
+
+        .logoContainer {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .logo {
+            width: 32px;
+            height: 32px;
+            border-radius: var(--sizing-4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--background-accent-purple-pressed);
+          }
+
+          .logoContent {
+            .title {
+
+            }
+
+            .desc {
+
+            }
+          }
+        }
+      }
+    }
+
+    .sidebarItems {
+      .menuGroup {
+        border-bottom: 1px solid var(--border-default);
+
+        > ul {
+          > .menuItem {
+            padding: 8px;
+            position: relative;
+
+            a {
+              padding: 10px 8px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              color: var(--text-subtle);
+              font-size: var(--sizing-12);
+              line-height: var(--sizing-16);
+              border-radius: var(--sizing-4);
+
+              .menuItemContent {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                .icon {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  width: 20px;
+                  height: 20px;
+                }
+              }
+
+              .subMenuIndicator {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 16px;
+                height: 16px;
+              }
+            }
+
+            .subMenuList {
+              position: absolute;
+              left: 100%;
+              top: 0;
+              background: var(--elevation-surface);
+              border: 1px solid var(--border-default);
+              padding: 8px;
+              min-width: 140px;
+              opacity: 0;
+              transform: translateX(-30px);
+              transition: all 0.3s;
+              pointer-events: none;
+              li {
+                a {
+                  display: block;
+                  padding: 6px 12px;
+                  color: var(--text-subtle);
+                  font-size: var(--sizing-12);
+                  line-height: var(--sizing-16);
+
+                  &:hover {
+                    color: var(--text-accent-purple);
+                  }
+                }
+              }
+            }
+
+            &.active {
+              > a {
+                background: var(--background-accent-gray-subtlest-default);
+                color: var(--text-default);
+              }
+            }
+
+            &:hover {
+              > a {
+                background: var(--background-accent-purple-subtlest-default);
+                color: var(--text-accent-purple);
+              }
+
+              .subMenuList {
+                opacity: 1;
+                transform: translateX(0);
+                pointer-events: auto;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/blocks/sidebar/sidebar.types.ts

+import type {IconType} from "react-icons";
+
+type SubMenu = {
+    path: string;
+    title: string;
+}
+
+type MenuItem = {
+    path: string;
+    title: string;
+    icon: IconType;
+    subMenu: SubMenu[];
+}
+
+export type SidebarItemProps  = {
+    menuItem: MenuItem
+};

src/components/blocks/topbar/Topbar.module.scss

+.topbar {
+  border-bottom: 2px solid var(--border-default);
+  .topbarWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 32px;
+    .topbarContent {
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        .breadcrumbItem {
+          margin-right: 4px;
+          color: var(--text-default);
+          font-size: var(--sizing-14);
+          font-weight: 300;
+          line-height: var(--sizing-20);
+          a {
+            display: inline-block;
+            margin-right: 4px;
+            &:hover {
+              color: var(--text-accent-purple);
+            }
+          }
+        }
+      }
+      .pageTitle {
+        margin-top: 4px;
+        font-weight: 500;
+      }
+    }
+    .topbarActions {
+      display: flex;
+      align-items: center;
+      gap: var(--sizing-8);
+    }
+  }
+}

package.json

 {
   "name": "@wface/pixel-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
@@ -5,0 +5,0 @@ "bin": {

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

13485415

0.08%

Number of package files

89

3.49%

Lines of code

100840

0.18%

No dependency changes