cista-storage/cista-front/src/components/HeaderMain.vue

<script setup lang="ts">
import { useDocumentStore } from '@/stores/documents'
import LoginModal from '@/components/LoginModal.vue'
import UploadButton from '@/components/UploadButton.vue'
import { ref  } from 'vue';

const documentStore = useDocumentStore()
const searchQuery = ref<string>('')
const showSearchInput = ref<boolean>(false)

const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value;
  if (!showSearchInput.value) {
    searchQuery.value = ''
  }
}

const executeSearch = (ev: InputEvent) => {
  // FIXME: Make reactive instead of this update handler
  const query = (ev.target as HTMLInputElement).value
  console.log("Searching", query)
  documentStore.setFilter(query)
  console.log("Filtered")
}

function createFileHandler() {
  console.log("Creating file")
}

function uploadFolderHandler() {
  console.log("Uploading Folder")
}
function createFolderHandler() {
  console.log("Uploading Folder")
}
function newViewHandler() {
  console.log("Creating new view ...")
}
function preferencesHandler() {
  console.log("Preferences ...")
}
function about() {
  console.log("About ...")
}
function deleteHandler(){
  console.log("Delete ...")
}
function share(){
  console.log("Share ...")
}
function download(){
  console.log("Download ...")
}

</script>

<template>
  <div class="actions-container">
    <div class="actions-list">
      <UploadButton />
      <!--

      <a-tooltip title="Upload folder from disk">
        <a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
      </a-tooltip>

      <a-tooltip title="Create file">
        <a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
      </a-tooltip>

      <a-tooltip title="Create folder">
        <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
      </a-tooltip>

      <template v-if="documentStore.selected.size > 0">
        <a-tooltip title="Share">
          <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
        </a-tooltip>
        <a-tooltip title="Download Zip">
          <a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
        </a-tooltip>
        <a-tooltip title="Delete">
          <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
        </a-tooltip>
      </template>
      -->
    </div>
    <div class="actions-list">
      <LoginModal></LoginModal>
      <template v-if="showSearchInput">
        <input type="search" v-model="searchQuery" class="margin-input">
      </template>
      <!--

      <a-tooltip title="Search">
        <a-button @click="toggleSearchInput" type="text" class="action-button" :icon="h(SearchOutlined)" />
      </a-tooltip>

      <a-tooltip title="Create new view">
        <a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
      </a-tooltip>

      <a-tooltip title="Preferences">
        <a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
      </a-tooltip>

      <a-tooltip title="About">
        <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
      </a-tooltip>
      -->

    </div>
  </div>
</template>

<style>
.actions-container,
.actions-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
}

.actions-container {
  justify-content: space-between;
}

.action-button {
  padding: 0;
  font-size: 1.5em;
  color: var(--secondary-color);

  &:hover {
    color: var(--blue-color) !important;
  }
}

@media only screen and (max-width: 600px) {

  .actions-container,
  .actions-list {
    gap: 6px;
  }
}
.margin-input{
  margin-top: 5px;
}

.path {
  box-shadow: 0 0 0.5em rgba(0,0,0,.15);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  z-index: 1;
  flex: 0 0 1.5rem;
  order: 1;
  font-size: .9rem;
  position: relative;
}
</style>