Creating header package and dropdown component

Packages/ohif-header/components/header.html

@@ -0,0 +1,12 @@
+<template name="header">
+    <div class="header noselect {{headerClasses}}">
+        <div class="clearfix">
+            <a target='_blank' class="brand pull-left" href="{{choose this.brandHref '/'}}">
+                {{>section 'brand'}}
+            </a>
+            <div class="header-menu pull-right">
+                
+            </div>
+        </div>
+    </div>
+</template>

Packages/ohif-header/components/header.styl

@@ -0,0 +1,31 @@
+$expandedHeight = 160px
+
+.header
+  height: $topBarHeight
+  padding: 10px 10px 0
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
+  transition(all 0.5s ease)
+
+  &>.clearfix
+    position: relative
+
+  .brand
+    background-image: url(/packages/pim_webviewer/assets/logo.svg)
+    background-repeat: no-repeat
+    background-size: 100%
+    display: block
+    font-size: 9px
+    height: 3.5em
+    text-decoration: none
+    width: 34.6em
+
+  &.studyList
+    background-color: rgba(21, 25, 30, 0.7)
+    height: $expandedHeight
+    padding-left: $studyListPadding
+    padding-right: $studyListPadding
+
+    .brand
+      font-size: 16px
+      margin-top: 44px

Packages/ohif-header/index.js

@@ -0,0 +1,2 @@
+import './components/header.html';
+import './components/header.styl';

Packages/ohif-header/package.js

@@ -0,0 +1,19 @@
+Package.describe({
+    name: 'ohif:header',
+    summary: 'OHIF Header Templates',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.4.2.3');
+
+    // Meteor packages
+    api.use('ecmascript');
+    api.use('stylus');
+
+    // OHIF dependencies
+    api.use('ohif:core', 'client');
+
+    // Client imports
+    api.addFiles('index.js', 'client');
+});