@okjavis/nodebb-theme-javis 1.0.1 → 1.3.0

package/scss/_sidebar.scss

@@ -0,0 +1,815 @@
+// ===========================================================
+// SIDEBAR SYSTEM – Widget Styles
+// Modern, clean sidebar with card-based widgets
+// ===========================================================
+
+// ===========================================================
+// JAVIS SIDEBAR LOGO
+// ===========================================================
+.javis-sidebar-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $jv-space-6 $jv-space-4; // 12px top/bottom, 8px left/right
+  margin-bottom: $jv-space-4; // 8px gap before nav - industry standard
+  border-bottom: 1px solid $jv-border-subtle;
+  flex-shrink: 0;
+
+  .javis-logo-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+  }
+
+  // Icon logo (collapsed state) - 32x32px
+  .javis-logo-icon {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+  }
+
+  // Full logo (expanded state) - max 140px width
+  .javis-logo-full {
+    max-width: 140px;
+    height: 32px;
+    object-fit: contain;
+  }
+}
+
+// Adjust when sidebar is open
+.sidebar-left.open .javis-sidebar-logo {
+  padding: $jv-space-6 $jv-space-10; // 12px vertical, 20px horizontal when expanded
+  justify-content: flex-start;
+}
+
+// ===========================================================
+// LEFT SIDEBAR (Main Navigation)
+// ===========================================================
+.sidebar {
+  background: $jv-surface;
+  border-right: 1px solid $jv-border-subtle;
+  padding-top: 0 !important; // Remove top padding so logo sits at top edge
+
+  // Main navigation list
+  #main-nav {
+    // No gap class - we control spacing per nav-item instead
+  }
+
+  // Nav items - proper spacing between items
+  .nav-item {
+    margin-bottom: $jv-space-2; // 4px between nav items - compact like Slack/Discord
+
+    &:last-child {
+      margin-bottom: 0; // No margin on last item
+    }
+  }
+
+  // Sidebar navigation links
+  .nav-link {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    padding: $jv-space-4 $jv-space-6;
+    color: $jv-text-muted;
+    font-size: $jv-font-size-sm;
+    font-weight: 500;
+    border-radius: $jv-radius-sm;
+    transition: all 0.15s ease;
+
+    i {
+      width: 18px;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    &:hover {
+      background: rgba(0, 81, 255, 0.06);
+      color: $jv-primary;
+    }
+
+    &.active {
+      background: $jv-primary-soft;
+      color: $jv-primary;
+      font-weight: 600;
+    }
+  }
+
+  // Sidebar section headers
+  .sidebar-header {
+    font-size: $jv-font-size-xs;
+    font-weight: 600;
+    color: $jv-text-soft;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: $jv-space-6 $jv-space-6 $jv-space-2;
+    margin-top: $jv-space-4;
+  }
+
+  // Category list in sidebar
+  .category-list-container {
+    padding: $jv-space-2 0;
+
+    .category-item {
+      display: flex;
+      align-items: center;
+      gap: $jv-space-4;
+      padding: $jv-space-4 $jv-space-6;
+      color: $jv-text-main;
+      font-size: $jv-font-size-sm;
+      border-radius: $jv-radius-sm;
+      transition: background-color 0.15s ease;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      .category-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: $jv-radius-xs;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// WIDGET CONTAINER (General)
+// ===========================================================
+.widget-area,
+div[data-widget-area] {
+  display: flex;
+  flex-direction: column;
+  gap: $jv-space-6;
+}
+
+// Individual widget card
+.widget {
+  background: $jv-surface;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-lg;
+  padding: $jv-space-8;
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: $jv-shadow-soft;
+  }
+}
+
+// Widget titles
+.widget-title,
+div[data-widget-area] h5,
+div[data-widget-area] h6,
+div[data-widget-area="right"] h5,
+div[data-widget-area="right"] h8 {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: $jv-space-6;
+  color: $jv-text-main;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+// ===========================================================
+// TRENDING TAGS
+// ===========================================================
+
+.popular-tags {
+  gap: 6px;
+
+  .tag-list > div {
+    background: $jv-surface;
+    border: 1px solid $jv-border-subtle;
+    border-radius: 10px;
+    padding: 10px 12px;
+    font-size: 14px;
+    color: $jv-text-main;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      border-color: rgba(0,0,0,0.12);
+      background: rgba(0,0,0,0.03);
+    }
+
+    small {
+      color: $jv-text-muted;
+      font-size: $jv-font-size-xs;
+    }
+  }
+}
+
+// ===========================================================
+// TRENDING NOW
+// ===========================================================
+
+#recent_posts {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: $jv-space-6;
+
+  li.widget-posts {
+    background: $jv-surface;
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: $jv-radius-md;
+    padding: 10px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: $jv-space-4;
+    transition: box-shadow 0.15s ease, border 0.15s ease;
+
+    &:hover {
+      border-color: rgba(0,0,0,0.08);
+      box-shadow: $jv-shadow-soft;
+    }
+
+    // Meta info
+    .d-flex.gap-2,
+    .timeago {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+    }
+
+    // Title inside mini post
+    a {
+      font-size: 14px;
+      font-weight: 500;
+      color: $jv-text-main;
+      text-decoration: none;
+      line-height: $jv-line-height-tight;
+
+      &:hover {
+        color: $jv-primary;
+      }
+    }
+
+    // 2-line clamp for content preview
+    p,
+    .content {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: $jv-font-size-sm;
+      color: $jv-text-muted;
+      margin: 0;
+    }
+
+    // Read more alignment
+    a.stretched-link {
+      font-size: $jv-font-size-xs;
+      color: $jv-primary;
+    }
+  }
+}
+
+// ===========================================================
+// SEARCH WIDGET
+// ===========================================================
+.search-widget {
+  .input-group {
+    display: flex;
+
+    .form-control {
+      flex: 1;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right: none;
+    }
+
+    .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding: 8px 14px;
+    }
+  }
+}
+
+// ===========================================================
+// ONLINE USERS WIDGET
+// ===========================================================
+.online-users,
+.online-now {
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid $jv-surface;
+    transition: transform 0.15s ease;
+
+    &:hover {
+      transform: scale(1.1);
+      z-index: 10;
+    }
+  }
+
+  .avatar-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+
+    .user-avatar {
+      margin-left: -8px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// CATEGORIES WIDGET
+// ===========================================================
+.categories-widget {
+  .category-item {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    padding: $jv-space-4 0;
+    border-bottom: 1px solid $jv-border-subtle;
+    transition: background-color 0.15s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
+      margin: 0 (-$jv-space-4);
+      padding-left: $jv-space-4;
+      padding-right: $jv-space-4;
+      border-radius: $jv-radius-sm;
+    }
+
+    .category-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: $jv-radius-xs;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .category-name {
+      flex: 1;
+      font-size: $jv-font-size-sm;
+      font-weight: 500;
+      color: $jv-text-main;
+    }
+
+    .category-count {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-soft;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 2px 6px;
+      border-radius: $jv-radius-pill;
+    }
+  }
+}
+
+// ===========================================================
+// STATS WIDGET
+// ===========================================================
+.stats-widget {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $jv-space-6;
+
+  .stat-item {
+    text-align: center;
+    padding: $jv-space-4;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: $jv-radius-sm;
+
+    .stat-value {
+      font-size: $jv-font-size-xl;
+      font-weight: 700;
+      color: $jv-text-main;
+      line-height: 1;
+    }
+
+    .stat-label {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      margin-top: $jv-space-2;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+// ===========================================================
+// INFO WIDGET
+// ===========================================================
+.info-widget {
+  font-size: $jv-font-size-sm;
+  color: $jv-text-muted;
+  line-height: $jv-line-height-base;
+
+  p {
+    margin-bottom: $jv-space-4;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: $jv-primary;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// ===========================================================
+// USER CARD WIDGET (in left sidebar)
+// ===========================================================
+.user-card-widget {
+  .user-header {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    margin-bottom: $jv-space-6;
+
+    .user-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .user-info {
+      flex: 1;
+
+      .user-name {
+        font-size: $jv-font-size-base;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
+
+      .user-title {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-muted;
+      }
+    }
+  }
+
+  .user-stats {
+    display: flex;
+    justify-content: space-around;
+    padding: $jv-space-4 0;
+    border-top: 1px solid $jv-border-subtle;
+    border-bottom: 1px solid $jv-border-subtle;
+    margin-bottom: $jv-space-6;
+
+    .stat {
+      text-align: center;
+
+      .value {
+        font-size: $jv-font-size-lg;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
+
+      .label {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-muted;
+      }
+    }
+  }
+
+  .user-actions {
+    display: flex;
+    flex-direction: column;
+    gap: $jv-space-2;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}
+
+// ===========================================================
+// SUGGESTED TOPICS WIDGET
+// ===========================================================
+.suggested-topics {
+  .topic-item {
+    display: flex;
+    gap: $jv-space-4;
+    padding: $jv-space-4 0;
+    border-bottom: 1px solid $jv-border-subtle;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .topic-thumb {
+      width: 48px;
+      height: 48px;
+      border-radius: $jv-radius-sm;
+      object-fit: cover;
+      flex-shrink: 0;
+    }
+
+    .topic-info {
+      flex: 1;
+      min-width: 0;
+
+      .topic-title {
+        font-size: $jv-font-size-sm;
+        font-weight: 500;
+        color: $jv-text-main;
+        line-height: $jv-line-height-tight;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        &:hover {
+          color: $jv-primary;
+        }
+      }
+
+      .topic-meta {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-soft;
+        margin-top: $jv-space-2;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// RESPONSIVE SIDEBAR
+// ===========================================================
+@media (max-width: 992px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    z-index: 1050;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+// ===========================================================
+// RIGHT SIDEBAR WIDGET AREA (Reddit-style)
+// ===========================================================
+div[data-widget-area="sidebar"],
+.col-lg-3[data-widget-area="sidebar"] {
+  display: flex;
+  flex-direction: column;
+  gap: $jv-space-6;
+
+  // Widget card container
+  > div {
+    background: $jv-surface;
+    border: 1px solid $jv-border-subtle;
+    border-radius: $jv-radius-lg;
+    overflow: hidden;
+  }
+
+  // Widget header/title
+  h5, h6, .widget-title {
+    font-size: 12px !important;
+    font-weight: 700 !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $jv-text-soft;
+    padding: $jv-space-6 $jv-space-6 $jv-space-4;
+    margin: 0 !important;
+    border-bottom: 1px solid $jv-border-subtle;
+    background: rgba(0, 0, 0, 0.015);
+  }
+}
+
+// ===========================================================
+// POPULAR TAGS WIDGET (Sidebar)
+// ===========================================================
+div[data-widget-area="sidebar"] {
+  .popular-tags,
+  [class*="tag"] {
+    padding: $jv-space-4;
+
+    // Tag items grid
+    .tag-list,
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: $jv-space-2;
+
+      > div,
+      > a {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: $jv-space-4 $jv-space-4;
+        background: transparent;
+        border: none;
+        border-radius: $jv-radius-sm;
+        color: $jv-text-main;
+        font-size: 14px;
+        font-weight: 500;
+        text-decoration: none;
+        transition: background-color 0.15s ease;
+        cursor: pointer;
+
+        &:hover {
+          background: rgba(0, 81, 255, 0.06);
+          color: $jv-primary;
+        }
+
+        // Topic count
+        small,
+        .count,
+        span:last-child {
+          font-size: 12px;
+          color: $jv-text-soft;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
+// ===========================================================
+// RECENT/TRENDING POSTS WIDGET (Sidebar)
+// ===========================================================
+div[data-widget-area="sidebar"] {
+  #recent_posts,
+  .recent-posts,
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: $jv-space-4 $jv-space-6;
+      border-bottom: 1px solid $jv-border-subtle;
+      transition: background-color 0.15s ease;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.02);
+      }
+
+      // Post header with avatar
+      .d-flex {
+        display: flex;
+        align-items: center;
+        gap: $jv-space-2;
+        margin-bottom: $jv-space-2;
+
+        // Avatar
+        .avatar,
+        img[class*="avatar"] {
+          width: 20px !important;
+          height: 20px !important;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        // Username
+        a:first-of-type {
+          font-size: 12px;
+          font-weight: 600;
+          color: $jv-text-main;
+          text-decoration: none;
+
+          &:hover {
+            color: $jv-primary;
+          }
+        }
+
+        // Timeago
+        .timeago {
+          font-size: 11px;
+          color: $jv-text-soft;
+        }
+      }
+
+      // Post title/content
+      > a,
+      .post-content a,
+      p {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        color: $jv-text-main;
+        text-decoration: none;
+        line-height: 1.4;
+        margin-bottom: $jv-space-2;
+
+        // Line clamp
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        &:hover {
+          color: $jv-primary;
+        }
+      }
+
+      // Content preview text
+      .post-content,
+      .content,
+      .text-xs {
+        font-size: 12px;
+        color: $jv-text-muted;
+        line-height: 1.45;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      // Read more link
+      a.stretched-link,
+      .read-more {
+        font-size: 12px;
+        font-weight: 600;
+        color: $jv-primary;
+        text-decoration: none;
+        margin-top: $jv-space-2;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+// ===========================================================
+// WIDGET HEADER ICONS
+// ===========================================================
+div[data-widget-area="sidebar"] {
+  h5, h6, .widget-title {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-2;
+
+    i {
+      font-size: 14px;
+      color: $jv-text-soft;
+    }
+  }
+}
+
+// ===========================================================
+// EMPTY STATE
+// ===========================================================
+div[data-widget-area="sidebar"] {
+  .empty,
+  .no-content {
+    padding: $jv-space-8;
+    text-align: center;
+    color: $jv-text-soft;
+    font-size: $jv-font-size-sm;
+  }
+}