Add sidebar base logic

resources/scripts/assets/css/sidebar.css

@@ -0,0 +1,118 @@
+:root {
+    --color-primary: #212121;
+    --color-secondary: #3a3636;
+    --color-tertiary: #17171b;
+    --color-quaternary: #757575;
+    --color-quinary: #9e9e9e;
+    --button-color: #212121;
+    --button-color-hover: #424242;
+    --button-color-active: #c72510;
+    --button-color-disabled: #757575;
+    --button-color-text: #9e9e9e;
+    --text-main: #ffffff;
+    --text-secondary: #ffffff;
+    --text-tertiary: #ffffff;
+    --background-color: #212121;
+    --invert: 1000;
+    --sidebar-button-color: white;
+    --sidebar-button-color-hover: #0e0e1d;
+    --card-bg: #353535;
+}
+
+:root {
+    --sidebar-size: 220px;
+}
+.nav-bar {
+    display: none;
+}
+/* The side navigation menu */
+.sidebar {
+    margin: 0;
+    padding: 0;
+    width: var(--sidebar-size);
+    background-color: var(--color-tertiary);
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+    z-index: 999999;
+}
+
+/* Sidebar links */
+.sidebar a {
+    display: block;
+    color: var(--sidebar-button-color);
+    padding: 16px;
+    text-decoration: none;
+}
+
+/* Active/current link */
+.sidebar .router-link-active {
+    background-color: var(--button-color-active);
+    color: white;
+}
+
+/* Links on mouse-over */
+.sidebar a:hover:not(.router-link-active) {
+    background-color: var(--sidebar-button-color-hover);
+}
+
+/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
+div.content {
+    margin-left: var(--sidebar-size);
+    padding: 1px 16px;
+    height: 1000px;
+}
+
+/* On screens that are less than 700px wide, make the sidebar into a topbar */
+@media screen and (max-width: 700px) {
+    .sidebar {
+        width: 100%;
+        left: -700px;
+        transition: all 0.3s ease-in-out;
+    }
+
+    div.content {
+        margin-left: 0;
+        padding: 1px 16px;
+        height: 1000px;
+    }
+
+    .active-nav {
+        left: 0;
+        margin-right: var(--sidebar-size);
+        width: var(--sidebar-size);
+        height: 100vh;
+    }
+
+    .nav-bar {
+        display: flex;
+    }
+}
+
+.avatar {
+    margin: 10px;
+    width: 200px;
+    height: 200px;
+    border-radius: 5%;
+}
+
+.smallAvatar {
+    width: 70px;
+    border-radius: 50%;
+}
+
+.nav-bar > * {
+    margin: 10px;
+}
+
+.left {
+    margin-left: auto;
+}
+
+.openMenu {
+    font-size: 50px;
+}
+
+.openMenu:hover {
+    cursor: pointer;
+}

resources/scripts/components/NavigationBar.tsx

@@ -46,7 +46,7 @@ export default () => {
     };
 
     return (
-        <div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'}>
+        <div className={'w-full bg-neutral-700 shadow-md overflow-x-auto'}>
             <SpinnerOverlay visible={isLoggingOut} />
             <div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
                 <div id={'logo'} className={'flex-1'}>

resources/scripts/components/Sidebar.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import '@/assets/css/sidebar.css';
+
+const Sidebar = () => {
+    return (
+        <>
+            <div className='sidebar'>
+                <NavLink to='/'>
+                    Home <i className='bx bxs-home-heart' />
+                </NavLink>
+
+                <NavLink to='/resources'>
+                    Resources <i className='bx bx-list-ul' />
+                </NavLink>
+
+                <NavLink className='router-link-active' to='' v-if='isEditor'>
+                    Editor <i className='bx bx-edit-alt' />
+                </NavLink>
+
+                <a href='https://github.com/Angelillo15' target='_blank' rel='noreferrer'>
+                    GitHub <i className='bx bxl-github' />
+                </a>
+                <a href='https://discord.nookure.com' target='_blank' rel='noreferrer'>
+                    Discord <i className='bx bxl-discord-alt' />
+                </a>
+            </div>
+        </>
+    );
+};
+
+export default Sidebar;

resources/scripts/routers/DashboardRouter.tsx

@@ -8,6 +8,7 @@ import SubNavigation from '@/components/elements/SubNavigation';
 import { useLocation } from 'react-router';
 import Spinner from '@/components/elements/Spinner';
 import routes from '@/routers/routes';
+import Sidebar from '@/components/Sidebar';
 
 export default () => {
     const location = useLocation();
@@ -28,6 +29,9 @@ export default () => {
                     </div>
                 </SubNavigation>
             )}
+
+            <Sidebar />
+
             <TransitionRouter>
                 <React.Suspense fallback={<Spinner centered />}>
                     <Switch location={location}>

tailwind.config.js

@@ -31,6 +31,14 @@ module.exports = {
                 neutral: gray,
                 cyan: colors.cyan,
                 neutral: {
+                    50: colors.neutral[50],
+                    100: colors.neutral[100],
+                    200: colors.neutral[200],
+                    300: colors.neutral[300],
+                    400: colors.neutral[400],
+                    500: colors.neutral[500],
+                    600: colors.neutral[600],
+                    700: '#17171B',
                     800: '#212121',
                     900: '#121212',
                 }