minor work

frontend/src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
+  <Disclosure as="nav" class="navbar-bg sticky top-0 z-40" v-slot="{ open }">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-16 items-center justify-between">
         <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -25,8 +25,17 @@
           </div>
         </div>
 
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <button type="button" class="relative inline-flex items-center gap-x-1.5 rounded-md bg-orange px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+              <!--<PlusIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />-->
+              Patreon
+            </button>
+          </div>
+        </div>
+
         <!-- Mode Switcher Dropdown -->
-        <div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
+        <!--<div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
           <label class="sr-only" id="headlessui-listbox-label-:Rpkcr6:" data-headlessui-state="">Theme</label>
           <button type="button" id="headlessui-listbox-button-:R19kcr6:" aria-haspopup="true" aria-expanded="false" data-headlessui-state="" aria-labelledby="headlessui-listbox-label-:Rpkcr6: headlessui-listbox-button-:R19kcr6:" class="">
             <span class="dark:hidden">
@@ -51,7 +60,7 @@
               </svg>
             </span>
           </button>
-        </div>
+        </div>-->
 
         <!--<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
           <button type="button" class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
@@ -97,23 +106,33 @@
   </Disclosure>
 </template>
 
+<style scoped>
+.navbar-bg {
+  background: #00000060;
+}
+.bg-orange {
+  background: var('beammp-orange');
+}
+</style>
+
 <script>
 export default {
   methods: {
-    setTheme(theme) {
+    //setTheme(theme) {
-      if (theme === 'light') {
+    //  if (theme === 'light') {
-        document.documentElement.classList.remove('dark');
+    //    document.documentElement.classList.remove('dark');
-      } else if (theme === 'dark') {
+    //  } else if (theme === 'dark') {
-        document.documentElement.classList.add('dark');
+    //    document.documentElement.classList.add('dark');
-      } else if (theme === 'system') {
+    //  } else if (theme === 'system') {
-        document.documentElement.classList.remove('dark');
+    //    document.documentElement.classList.remove('dark');
-      }
+    //  }
-    },
+    //},
   },
 };
 </script>
 
 <script setup>
+
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 

frontend/tailwind.config.js

@@ -5,6 +5,20 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
+    colors: {
+      "beammp-orange": '#f36d24',
+      "beammp-white": '#ffffff',
+      "beammp-black": '#000000',
+      "beammp-gray": '#333333',
+      "beammp-green": '#1d9749',
+      "beammp-blue": '4470b6'
+    },
+    fontFamily: {
+      sans: [
+        '"Noto Sans"',
+      ],
+      serif: ['Merriweather', 'serif'],
+    },
     extend: {},
   },
   plugins: [],

src/views/includes/nav.ejs

@@ -1,5 +1,6 @@
 <div class="container">
-  <div class="row center-xs">
+  <nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
+    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
       <div class="col-md-4 col-sm-4">
         <a class="logo-img" href="/">
           <div class="logo-image">
@@ -7,89 +8,45 @@
           </div>
         </a>
       </div>
-    <div class="col-md-8 col-sm-8">
+    <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-      <div class="burger-menu">
+        <button data-collapse-toggle="navbar-sticky" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
-        <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i class="fas fa-bars fa-1x"></i></span></button>
+          <span class="sr-only">Open menu</span>
-      </div>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-      <!-- Collapsible content -->
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent1">
+          </svg>
-
+      </button>
-        <!-- Links -->
-        <div class="mobile-container">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <a class="nav-link" href="https://forum.beammp.com">Forum</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="https://wiki.beammp.com">Wiki</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/servers">Servers</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="/stats">Statistics</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="https://github.com/BeamMP/BeamMP">GitHub</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="https://www.patreon.com/BeamMP">Patreon</a>
-            </li>
-          </ul>
-        </div>
-
     </div>
     <div class="mobile-container">
       <div class="topnav mobile-links">
 
-          <div id="burger-links">
-            <a href="https://forum.beammp.com">Forum</a>
-            <a href="https://wiki.beammp.com">Docs</a>
-            <a href="/servers">Servers</a>
-            <a href="/stats">Statistics</a>
-            <a href="https://github.com/BeamMP/BeamMP">GitHub</a>
-            <a href="https://www.patreon.com/BeamMP">Patreon</a>
-          </div>
        
         <a href="javascript:void(0);" class="icon" onclick="myFunction()">
           <i class="fa fa-bars"></i>
         </a>
       </div>
     </div>
-      <div class="navbar-links">
+    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
-        <ul class="links">
+      <ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
         <li>
-            <a href="https://forum.beammp.com">
+          <a href="https://forum.beammp.com" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Forum</a>
-              <span class="text">Forum</span>
-            </a>
         </li>
         <li>
-            <a href="https://wiki.beammp.com">
+          <a href="https://wiki.beammp.com" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Wiki</a>
-              <span class="text">Docs</span>
-            </a>
         </li>
         <li>
-            <a href="/servers">
+          <a href="/servers" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Servers</a>
-              <span class="text">Servers</span>
-            </a>
         </li>
         <li>
-            <a href="/stats">
+          <a href="/stats" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Statistics</a>
-              <span class="text">Statistics</span>
-            </a>
         </li>
         <li>
-            <a href="https://github.com/BeamMP/BeamMP">
+          <a href="https://github.com/BeamMP/BeamMP" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">GitHub</a>
-              <span class="text">Github</span>
-            </a>
         </li>
         <li>
-            <a href="https://www.patreon.com/BeamMP">
+          <a href="https://www.patreon.com/BeamMP" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Patreon</a>
-              <span class="text">Patreon</span>
-            </a>
         </li>
       </ul>
     </div>
     </div>
-  </div>
+  </nav>
 </div>