questions/src/components/Sidebar/Sidebar.astro at 8d644bfe4a10e377fd842fce89accd7699608b6a · CarletonComputerScienceSociety/questions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
---
import SidebarItem from "./SidebarItem.astro";
import "./Sidebar.scss";

// mdi mdi-file-document-multiple-outline
// mdi mdi-bookmark-box-multiple-outline

const sections = [
  {
    icon: "mdi mdi-book-open-variant",
    title: "Evaluations",
    disabled: false,
    link: "/evaluations",
  },
  {
    icon: "mdi mdi-tag",
    title: "Tags",
    disabled: false,
    link: "/practice-by-tag",
  },
  // {
  //   icon: "mdi mdi-book",
  //   title: "Textbook",
  //   disabled: false,
  //   link: "https://patmorin.me/teaching/2804/resources/DiscreteStructures.pdf",
  // },
  {
    icon: "mdi mdi-video",
    title: "Lectures",
    disabled: false,
    // link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
    link: "/lectures",
  },
  { icon: "mdi mdi-creation", title: "Sandbox", disabled: true },
  // { icon: "mdi mdi-beaker", title: "Experiments", disabled: true },
];

const endSections = [
  {
    icon: "mdi mdi-newspaper-variant-outline",
    title: "About",
    disabled: false,
    link: "/about",
  },
  {
    icon: "mdi mdi-github",
    title: "Contribute",
    disabled: false,
    link: "https://github.com/CarletonComputerScienceSociety/questions",
  },
];
---

<div class="Sidebar">
  <div class="Sidebar__sections">
    <div>
      <img class="Sidebar__logo" src="/logo2.png" alt="CCSS Logo" />
      <!-- <hr style="border-color: #f1f1f12e; margin-bottom: 0.2rem" /> -->
      <SidebarItem
        icon={"mdi mdi-school"}
        title={"Home"}
        link={"/comp2804"}
        disabled={false}
      />
      <!-- <hr style="border-color: #f1f1f12e; margin-top: 0.2rem" /> -->
      {
        sections.map((section) => (
          <SidebarItem
            icon={section.icon}
            title={section.title}
            link={section.link}
            disabled={section.disabled}
          />
        ))
      }
    </div>
    <div>
      {
        endSections.map((endSection) => (
          <SidebarItem
            icon={endSection.icon}
            title={endSection.title}
            link={endSection.link}
            disabled={endSection.disabled}
          />
        ))
      }
    </div>
  </div>
</div>

<div class="Sidebar__mobile">
  <div class="Sidebar__mobile__inner">
    <!-- <a href={"/"}>
      <div class={`Sidebar__item`}>
        <div class="Sidebar__item__icon">
          <i class={"mdi mdi-school"}></i>
        </div>
        <div class="Sidebar__item__title">{"COMP 2804"}</div>
      </div>
    </a> -->
    {
      sections
        .filter((section) => !section.disabled)
        .slice(0, 4)
        .map((section) => (
          <a href={section.link}>
            <div class={`Sidebar__item`}>
              <div class="Sidebar__item__icon">
                <i class={section.icon} />
              </div>
              <div class="Sidebar__item__title">{section.title}</div>
            </div>
          </a>
        ))
    }
    <a href={"/about"}>
      <div class={`Sidebar__item`}>
        <div class="Sidebar__item__icon">
          <i class={"mdi mdi-newspaper-variant-outline"}></i>
        </div>
        <div class="Sidebar__item__title">{"About"}</div>
      </div>
    </a>
  </div>
</div>