Merge pull request #79 from michelada/navbar

Navbar

package.json

@@ -1,11 +1,11 @@
 {
- "version": "1.1.3",
+ "version": "1.1.4",
  "author": "michelada.io",
  "name": "@micheladaio/sips-and-bits.css",
  "scripts": {
  "start": "webpack serve --mode=development --open",
  "build": "export NODE_ENV=production && webpack",
- "preppublish": "postcss ./src/styles/index.css --dir dist/",
+ "preppublish": "rm -rf ./dist/js && postcss ./src/styles/index.css --dir dist/",
  "postpreppublish": "mkdir ./dist/js && cp -R ./src/js/controllers ./dist/js/controllers",
  "upload": "npm publish --access public"
  },

src/js/app.js

@@ -27,16 +27,16 @@ document.addEventListener('DOMContentLoaded', function () {
  var calendar = new Calendar(calendarEl, {
  plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
  initialView: 'dayGridMonth',
- dayHeaders: false,
+ dayHeaders: true,
  headerToolbar: {
  start: 'prev',
  center: 'title',
  end: 'next'
  },
  events: [
- { id: 1, title: 'test event', start: '2021-11-09' },
- { id: 1, title: 'second event', start: '2021-11-09' },
- { id: 1, title: 'week event', start: '2021-11-15 11:00', end: '2021-11-19 23:00' },
+ { id: 1, title: 'test event', start: '2022-02-18' },
+ { id: 1, title: 'second event', start: '2022-02-19 11:00', end: '2022-02-24 23:00' },
+ { id: 1, title: 'week event', start: '2022-02-21 11:00', end: '2022-02-27 23:00' },
  ]
  });
  calendar.render();
@@ -58,4 +58,4 @@ document.addEventListener('DOMContentLoaded', function () {
  svgOpen.classList.toggle('hidden');
  svgClose.classList.toggle('hidden');
  });
-});
+});

src/js/controllers/header_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+ static targets = ["menu", "close", "avatar", "submenu"]
+
+ connect () {
+ if(window.innerWidth <= 768) {
+ this.menuTarget.classList.toggle("hidden");
+ this.submenuTarget.classList.toggle("hidden");
+ }
+ }
+
+ toggleSubmenu(e) {
+ e.preventDefault();
+ this.submenuTarget.classList.toggle("hidden");
+ }
+
+ toggleMenu() {
+ this.menuTarget.classList.toggle("hidden");
+ this.closeTarget.classList.toggle("hidden");
+ this.avatarTarget.classList.toggle("hidden");
+ }
+}

src/styles/base/base.css

@@ -3,4 +3,11 @@
  a {
  @apply border-transparent;
  }
+}
+
+:root {
+ --fullcalendar-event-1: #434884;
+ --fullcalendar-event-2: #5C62B2;
+ --fullcalendar-event-3: #6D73CB;
+ --fullcalendar-event-4: #848CF0;
 }

src/styles/base/utils.css

@@ -1,4 +1,8 @@
 .stretched-link::after {
  content: "";
  @apply z-10 absolute inset-0 bg-transparent pointer-events-auto;
+}
+
+.responsive-aligned {
+ @apply text-center lg:text-left
 }

src/styles/components/header.css

@@ -0,0 +1,69 @@
+.navbar {
+ @apply bg-dark;
+ @apply container mx-auto flex justify-between items-center flex-wrap relative;
+
+ .brand {
+ @apply p-6;
+
+ img {
+ @apply max-h-6 inline-block;
+ }
+ }
+
+ .avatar {
+ @apply rounded-full;
+ @apply bg-blue font-bold text-white text-center leading-9;
+ }
+
+ .close-toggle {
+ @apply text-white cursor-pointer md:hidden;
+
+ .action-wrapper {
+ @apply m-4 min-h-[40px] min-w-[40px] grid place-items-center;
+
+ .avatar {
+ @apply w-10 h-10;
+ }
+ }
+ }
+
+ .nav-links {
+ @apply basis-full md:basis-auto bg-dark absolute md:static w-full md:w-auto top-[72px] md:block;
+
+ > ul {
+ @apply md:flex items-center;
+
+ li {
+ @apply md:inline-block;
+
+ .nav-link {
+ @apply flex space-x-6 md:space-x-0 text-white/80 p-6 hover:bg-blue-dark hover:text-white;
+ }
+ }
+
+ li.my-profile {
+ @apply bg-blue-dark relative;
+
+ a {
+ @apply p-6 md:p-4;
+ }
+
+ .avatar {
+ @apply w-6 h-6 md:w-10 md:h-10 leading-6;
+ }
+
+ .submenu {
+ @apply bg-blue-dark md:absolute md:right-0 w-max;
+
+ li {
+ @apply md:block;
+ }
+
+ .nav-link {
+ @apply flex space-x-6 p-6 text-white/80 hover:bg-blue-dark hover:text-white; 
+ }
+ }
+ }
+ }
+ }
+}

src/styles/components/sidebar-mobile.css

@@ -23,7 +23,7 @@
  justify-content: normal;
 
  img {
- height: 20x;
+ height: 20px;
  width: 20px;
  }
  }

src/styles/index.css

@@ -10,7 +10,6 @@
 
 @import 'components/buttons';
 @import 'components/forms';
-@import 'components/navigation-bar';
 @import 'components/alerts';
 @import 'components/headers';
 @import 'components/menus';
@@ -23,8 +22,7 @@
 @import 'components/brand';
 @import 'components/description_container.css';
 @import 'components/footer.css';
-@import 'components/navbar.css';
-@import 'components/navigation-bar.css';
+@import 'components/header.css';
 @import 'components/pto.css';
 @import 'components/table.css';