Create main.component.scss

flare-ui/src/app/components/main/main.component.scss

@@ -0,0 +1,145 @@
+.main-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #fafafa;
+
+  .header-toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    mat-toolbar-row {
+      padding: 0 16px;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 20px;
+      font-weight: 500;
+
+      mat-icon {
+        vertical-align: middle;
+      }
+    }
+
+    .spacer {
+      flex: 1;
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .username {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+          vertical-align: middle;
+        }
+      }
+
+      .activity-button {
+        position: relative;
+
+        mat-icon {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  nav {
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    position: sticky;
+    top: 64px;
+    z-index: 99;
+
+    .mat-mdc-tab-nav-bar {
+      padding: 0 16px;
+    }
+
+    .mat-mdc-tab-link {
+      height: 48px;
+      opacity: 0.7;
+      font-weight: 500;
+
+      &.mdc-tab--active {
+        opacity: 1;
+      }
+
+      .tab-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+          vertical-align: middle;
+        }
+
+        span {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .main-content {
+    flex: 1;
+    overflow: auto;
+    background-color: #fafafa;
+  }
+}
+
+// Material overrides
+::ng-deep {
+  .mat-toolbar-single-row {
+    height: 64px;
+  }
+
+  .mat-mdc-menu-panel {
+    margin-top: 8px;
+  }
+
+  .mat-mdc-tab-header {
+    border-bottom: none;
+  }
+
+  .mat-mdc-tab-labels {
+    gap: 8px;
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .main-layout {
+    nav {
+      .mat-mdc-tab-nav-bar {
+        padding: 0 8px;
+      }
+
+      .mat-mdc-tab-link {
+        min-width: auto;
+        padding: 0 12px;
+
+        .tab-content span {
+          display: none;
+        }
+      }
+    }
+  }
+}