Docs update readme

README.md

@@ -1,10 +1,8 @@
-# This website is being rewritten. Again.
-# Starting May 2025, all new pull requests will be not be merged until the rewrite has been merged to main.
-# No new updates will be made on the current codebase as well.
 # Target launch is before the Fall 2025 semester.
 
 ## Development
-
+Read the wiki to get started
+https://github.com/CSSS/csss-site-frontend/wiki
 ### Prereqs
 You will need:
 - `git`

src/app/app.routes.ts

@@ -6,6 +6,7 @@ function makeTitle(pageTitle: string): string {
 }
 
 export const routes: Routes = [
+  // The CSSS
   {
     path: 'readme',
     loadComponent: () => import('./pages/readme/readme.component').then(m => m.ReadMeComponent),
@@ -35,11 +36,13 @@ export const routes: Routes = [
       import('./pages/affiliates/affiliates.component').then(m => m.AffiliatesComponent),
     title: makeTitle('Affiliates')
   },
+  // Events
   {
     path: 'events',
     loadComponent: () => import('./pages/events/events.component').then(m => m.EventsComponent),
     title: makeTitle('Events')
   },
+  // Elections
   { path: '', component: HomeComponent, title: 'Computing Science Student Society' },
   { path: '**', component: HomeComponent }
 ];

src/app/components/nav-bar/nav-bar.component.html

@@ -13,36 +13,46 @@
 </aside>
 
 <aside class="navbar" [hidden]="!uiService.isFileSystemOpen()" #navBar>
-  <header class="navbar__header">SFU CSSS</header>
+  <h1 class="navbar__heading">SFU CSSS</h1>
   <nav>
     <ul class="navbar__list">
       @for (entry of navEntries(); track entry.key) {
-        <!-- This is the template of the menu item, i.e. the actual nav entry's look -->
-        <code-list-item
-          class="nav-entry clickable"
-          [entry]="entry"
-          (click)="toggleDirectory(entry.key)"
-        >
-          <button type="button">
-            <fa-icon class="nav-entry__icon" [icon]="getDirectoryIcon(entry.isOpen)" />
+        <code-list-item [entry]="entry">
+          <button class="nav-entry" type="button" (click)="toggleDirectory(entry.key)">
+            <fa-icon
+              class="nav-entry__icon"
+              [icon]="getDirectoryIcon(entry.isOpen)"
+              [fixedWidth]="true"
+            />
             <span>{{ entry.label }}</span>
           </button>
         </code-list-item>
         @if (entry.isOpen && entry.children?.length) {
           <ul class="navbar__list">
             @for (subItem of entry.children; track subItem.key) {
               <code-list-item
-                class="nav-entry clickable"
-                [class.active]="subItem.url === appService.focusedApplication()?.route"
-                [ariaDisabled]="subItem.isDisabled"
-                (click)="navigate(subItem.url)"
                 [entry]="subItem"
                 [depth]="1"
+                routerLinkActive="active"
+                [routerLinkActiveOptions]="{ exact: true }"
               >
-                <a>
-                  <fa-icon class="nav-entry__icon" [icon]="subItem.icon" />
-                  <span>{{ subItem.label }}</span>
-                </a>
+                @if (subItem.route) {
+                  <a
+                    class="nav-entry"
+                    (click)="navigate(subItem)"
+                    [routerLink]="subItem.route"
+                    [class.clickable]="!subItem.isDisabled"
+                    routerLinkActive="active"
+                  >
+                    <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
+                    <span>{{ subItem.label }}</span>
+                  </a>
+                } @else {
+                  <a class="nav-entry clickable" [href]="subItem.href" target="_blank">
+                    <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
+                    <span>{{ subItem.label }}</span>
+                  </a>
+                }
               </code-list-item>
             }
           </ul>

src/app/components/nav-bar/nav-bar.component.scss

@@ -12,15 +12,6 @@ $navbar-w: 20rem;
   flex-direction: column;
 }
 
-button {
-  cursor: pointer;
-}
-
-header {
-  display: flex;
-  justify-content: space-between;
-}
-
 .activity-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, 4rem);
@@ -49,8 +40,11 @@ header {
   background-color: theme.$bg3;
   border-right: $border;
   z-index: 100;
+  overflow: scroll;
 
-  &__header {
+  &__heading {
+    font-size: 1.1rem;
+    font-weight: 400;
     padding: $item-spacing 2em;
   }
 
@@ -62,23 +56,26 @@ header {
 }
 
 .nav-entry {
+  display: block;
+  height: 100%;
+  width: 100%;
   padding: 0.5rem 0 0.5rem 0;
 
   &[aria-disabled='true'] {
     color: gray;
-    cursor: not-allowed;
   }
 
   &__icon {
     margin-right: 0.5rem;
   }
 
-  &.active {
-    background-color: theme.$bg0;
+  &__link {
+    display: block;
+    width: 100%;
   }
 }
 
-.clickable:hover {
+.active {
   background-color: theme.$bg0;
 }
 

src/app/components/nav-bar/nav-bar.component.ts

@@ -15,7 +15,7 @@ import { CodeListItemComponent } from '@csss-code/list/list-item/list-item.compo
 import { FontAwesomeModule, IconDefinition } from '@fortawesome/angular-fontawesome';
 import { faChevronDown, faChevronRight, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { csssLogo } from 'assets/icons/csss-logo';
-import { NAVBAR_ENTRIES, NavItem } from 'components/nav-bar/nav-bar.data';
+import { NAVBAR_ENTRIES, NavItem } from 'components/nav-bar/nav-entries';
 import { ApplicationService } from 'services/application/application.service';
 import { UiService } from 'services/ui/ui.service';
 import { BREAKPOINT_STRING_MAP } from 'styles/breakpoints';
@@ -130,15 +130,14 @@ export class NavBarComponent implements OnInit {
   /**
    * Opens the route.
    *
-   * @param url - URL to navigate to
+   * @param route - URL to navigate to
    */
-  navigate(url?: string): void {
-    if (!url) {
-      return;
-    }
-    this.router.navigate([url]);
-    if (!this.uiService.isLargeViewport()) {
-      this.uiService.isFileSystemOpen.set(false);
+  navigate(entry: NavItem): void {
+    if (entry.route) {
+      this.router.navigate([entry.route]);
+      if (!this.uiService.isLargeViewport()) {
+        this.uiService.isFileSystemOpen.set(false);
+      }
     }
   }
 }