initial commit (long overdue)

17th Website/src/components/ProfilePage/activityHistory.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>This is activity history</h1>
+</template>

17th Website/src/components/ProfilePage/personnel.vue

@@ -0,0 +1,5 @@
+
+
+<template>
+    <h1>this is a personnel file</h1>
+</template>

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+    name: 'profileHeader',
+    data() {
+        return {
+            count: 0
+        }
+    }
+}
+
+</script>
+
+<template>
+    <div>
+        <div id="headerImages">
+            <img id="rankImg" src="../icons/misc/test.png" />
+            <img id="rangerTab" src="#"/>
+        </div>
+
+        <h1>Dis the header</h1>
+    </div>
+</template>
+
+<style>
+#rankImg {
+    max-width: 200px;
+}
+
+#headerImages {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+</style>

17th Website/src/components/ProfilePage/shadowbox.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>This is shadowbox</h1>
+</template>

17th Website/src/components/cards/Alert.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { Icon } from '@iconify/vue'
+</script>
+
+<script>
+export const Alert = {
+    name: 'Alert',
+    props: {
+        icon: String,
+        title: String,
+        message: String
+    }
+}
+</script>
+
+<template>
+    <div class="alert">
+        <div class="alertHead">
+            <p>
+                <Icon icon="carbon:warning" />
+            </p>
+            <h2>{{title}}</h2>
+        </div>
+        <p>{{message}}</p>
+    </div>
+</template>
+
+<style>
+.alert {
+    background-color: #e0c422;
+    color: var(--background-secorndary);
+    display: flex;
+    flex-direction: column;
+    max-width: 800px;
+    margin: 20px auto;
+}
+
+.alertHead {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.alertHead p {
+    display: flex;
+    font-size: 35px;
+    margin: 10px;
+}
+
+.alertHead h2 {
+    display: flex;
+}
+</style>

17th Website/src/components/cards/Card.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="card">
+
+    </div>
+</template>
+
+
+<style>
+.card {
+    background-color: #ffffff;
+    color: var(--white);
+    padding: 0 10px;
+    margin: 10px;
+    border-radius: 10px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: fit-content;
+}
+</style>

17th Website/src/components/dropdown/Dropdown.vue

@@ -0,0 +1,48 @@
+<script>
+import { provide } from 'vue';
+import { Icon } from '@iconify/vue'
+
+export default {
+    name: 'Dropdown',
+    provide() {
+        return {
+            sharedState: this.sharedState
+        }
+    },
+    data () {
+        return {
+            sharedState: {
+                active: false
+            }
+        }
+    },
+    methods: {
+        toggle() {
+            this.sharedState.active = !this.sharedState.active
+        }
+    }
+}
+</script>
+
+<template>
+    <div @click="toggle">
+        <slot name="toggler">
+            <button>toggle <a href="#">hello</a></button>
+            <Icon icon="carbon:caret-down"/>
+        </slot>
+        <slot/>
+    </div>
+</template>
+
+<style>
+
+button {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+    font-size: 15px;
+    padding: 10px;
+    color: var(--white);
+}
+
+</style>

17th Website/src/components/dropdown/DropdownContent.vue

@@ -0,0 +1,19 @@
+<script>
+import { inject } from 'vue';
+
+export default {
+    name: 'DropdownContent',
+    inject: ['sharedState'],
+    computed: {
+        active() {
+            return this.sharedState.active
+        }
+    }
+}
+</script>
+
+<template>
+    <div v-if="active">
+        <slot />
+    </div>
+</template>

17th Website/src/components/dropdown/DropdownItem.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        test
+    </div>
+</template>

17th Website/src/components/navigation/Navbar.vue

@@ -0,0 +1,93 @@
+<script>
+import navitem from './navitem.vue'
+
+export default {
+    components: {
+        navitem
+    },
+    data() {
+        return {
+            activeButton: ''
+        }
+    },
+    methods: {
+        setActive(btn) {
+            this.activeButton = btn
+            
+        }
+    }
+}
+
+</script>
+
+<template>
+    <div class="sidebar">
+
+        <!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
+        <navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
+        <hr>
+        <navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
+        <navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
+        <navitem icon="carbon:align-box-bottom-left" link="#" @click="setActive('#docs')"  :active="activeButton === '#docs'"/>
+        <navitem icon="carbon:tool-kit" link="#" @click="setActive('#tools')"  :active="activeButton === '#tools'"/>
+    </div>
+</template>
+
+<style>
+/* 
+COLOR PALLETE
+BLACK #1C1C21
+LIGHTER BLACK #272731
+WHITE #EDF2F4
+GREEN #71F79F
+BLUE #46B1C9
+RED #F93943
+
+https://coolors.co/1c1c21-0de75a-46b1c9-f93943-edf2f4 
+https://dribbble.com/shots/4532899-dark-theme-table-view/attachments/10450101?mode=media 
+https://icon-sets.iconify.design/carbon/
+
+USING THE IBM CARBON ICON SET
+*/
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: var(--background-secondary);
+    text-align: center;
+    width: 80px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar a {
+    color: var(--white);
+    font-size: 30px;
+    overflow: hidden;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 10px;
+    padding: 5px;
+    transition: color 0.2s ease-in-out;
+}
+
+.sidebar a:hover {
+    color: var(--accent-primary);
+}
+
+.active {
+    /* border: 2px solid var(--accent-primary); */
+    /* border-radius: 10px; */
+    outline-color: var(--accent-primary);
+}
+
+.sidebar hr {
+    margin: 0 15%;
+    display: flex;
+    flex-direction: row;
+}
+</style>

17th Website/src/components/navigation/navitem.vue

@@ -0,0 +1,66 @@
+<!-- <script>
+export const navitem = {
+    props: ['icon', 'link']
+}
+</script>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+
+</script> -->
+
+
+<script>
+import { Icon } from '@iconify/vue'
+import { RouterLink } from 'vue-router';
+
+export default {
+    name: 'navitem',
+    props: {
+        icon: String,
+        link: String,
+        active: Boolean
+    },
+    methods: {
+        setActive() {
+            // Your code here
+            alert(`Hello ${event.target}!`)
+        }
+    },
+    components: {
+        Icon,
+        RouterLink
+    }
+}
+</script>
+
+<template>
+    <RouterLink :to="link" class="button" :class="{active: active}">
+        <Icon :icon="icon" />
+    </RouterLink>
+</template>
+
+
+<style>
+.button {
+    color: var(--white);
+    font-size: 30px;
+    overflow: hidden;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 10px;
+    padding: 5px;
+    transition: color 0.2s ease-in-out;
+}
+
+.button:hover {
+    color: var(--accent-primary);
+}
+
+.active {
+    border: 2px solid var(--accent-primary);
+    border-radius: 10px;
+}
+</style>